Emmet

Last modified: 15 June 2023

The Emmet toolkit enhances coding with HTML, CSS, and JSX. You can use Emmet code templates without leaving GoLand. To expand a template into the correct markup, type its abbreviation and press . To replace with another key, see Configure the abbreviation expansion key.

For example, in an HTML file, type table>tr*3>td*2 and press to get a stub of a 3 × 2 table:

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

As a more complex example, let's type table#myid>tr.row$*3>td*2 and press to get the same table but with the id attribute and a custom class for each table row:

<table id="myid">
    <tr class="row1">
        <td></td>
        <td></td>
    </tr>
    <tr class="row2">
        <td></td>
        <td></td>
    </tr>
    <tr class="row3">
        <td></td>
        <td></td>
    </tr>
</table>

Refer to Emmet Cheat Sheet for more examples.

GoLand supports such features as new syntax for writing RGBA colors, implied, default, and boolean attributes, the Update Tag action, and more.

Enable and configure Emmet

With GoLand, 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 Editor | Live Templates page of the IDE settings .

GoLand 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 type="$TYPES$">$END$ <entry>

To generate a list of entries, you just need to type “entry-list<entry[number=$]*5″ and press . By default, the number attribute will be generated before type. To customize the position where it is generated, you need to add the ATTRS variable to your template, for example:

<entry type="$TYPES$" $ATTRS$>$END$ <entry>

The ATTRS variable must have an empty string as the default value and should be skipped.

Use live templates with Emmet

  1. Press to open the IDE settings and then select Editor | Live Templates.

  2. On the Emmet page, select the checkboxes next to the templates you want to use.

  3. 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.

  4. In the Template Text field, add the required text and variables to the template body.

  5. 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.

Configure the abbreviation expansion key

By default, Emmet native abbreviations and additional live templates are expanded by pressing . For additional live templates, GoLand 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.

Configure the expansion key for native Emmet abbreviations

  1. Press to open the IDE settings and then select Editor | Emmet.

  2. On the Emmet page that opens, choose the new expansion key instead of the default from the Expand abbreviation with list.

Configure expansion keys for Emmet live templates

  1. Press to open the IDE settings and then select Editor | Live Templates.

  2. On the Live Templates page opens, expand the Zen HTML, Zen CSS, or Zen XSL template group and select the desired template. The focus moves to the Template Text area.

  3. From the Expand with list, choose the key to expand the template with.

Surround a block of code with an Emmet template

Navigate 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.

See also

Reference

External Links