Emmet and Emmet version 1.1 are toolkits that let develop HTML, CSS, or JSX code faster. You can use Emmet code templates without leaving AppCode. To expand a template into a markup, just type its abbreviation and press the expansion key or shortcut. By default, abbreviations are expanded with ⇥, but you can choose another key as described in Configuring the abbreviation expansion key.
For example, in an HTML file, type
table>tr*3>td*2 and then press ⇥ to get a stub of a 3x2 table:
AppCode supports such features as new syntax for writing RGBA colors, implied, default, and boolean attributes, the Update Tag action and more.
Enabling and configuring Emmet
With AppCode, you can use native Emmet templates plus more than 200 additional HTML, CSS, and XSL live templates that are listed under the Zen CSS, Zen HTML, and Zen XSL nodes on the page of AppCode preferences ⌘,.
To enable and configure native Emmet in AppCode
AppCode lets you use and customize Emmet live templates, or you can add your custom templates. Suppose you have a template entry with the following template text:
“entry-list<entry[number=$]*5″and press ⇥. By default, the
numberattribute will be generated before
type. To customize the position where it is generated, you need to add the
ATTRSvariable to your template, for example:
ATTRSvariable must have an empty string as the default value and should be skipped.
To use live templates with Emmet
On the Emmet page, select the checkboxes next to the templates you want to use.
When you select a template in the list, the focus moves to the Template Text area where the fields show the settings of the selected template.
In the Template Text field, add the required text and variables to the template body.
Click the Edit Variables button. In the Edit Template Variables dialog that opens, specify the default variable values in the Default value field and select the Skip if defined checkbox where necessary.
Configuring the abbreviation expansion key
By default, Emmet native abbreviations and additional live templates are expanded by pressing ⇥. For additional live templates, AppCode lets you re-define the default expansion key. Note, that this custom setting does not override the default setting for native Emmet support; you will just get the ability to expand the template using either of these keys.
To configure the expansion key for native Emmet abbreviations
On the Emmet page that opens, choose the new expansion key instead of the default ⇥ from the Expand abbreviation with list.
To configure expansion keys for Emmet live templates
Surrounding a block of code with an Emmet template
In the editor, select a block of code to surround and press ⌥⌘J or selectfrom the main menu.
From the Emmet:list, select
Type the Emmet abbreviation to use and press ⏎.
Note the list to the right. Click the down arrow to view the history of recently applied Emmet live templates:
Also mind the color indication. If you type a valid Emmet abbreviation, the background is green. However, when a non-existent abbreviation is entered, the background turns red:
Navigating between edit points
In HTML and XML, you can navigate between edit points, that is, between those points of code where Emmet templates are applicable.
To move the cursor to the previous edit point, choose, or press ⌃⌥←.
To move the cursor to the next edit point, choose, or press ⌃⌥→.