WebStorm 2017.3 Help

Enabling Emmet Support

In this section:

Basics

Native Emmet support allows you to generate XML/HTML, JavaScript (JSX Harmony) and CSS structures based on abbreviations. WebStorm supports basic Emmet and Emmet version 1.1 features, such as:

  • New syntax for writing RGBA colors.
  • Implied attributes.
  • Default attributes.
  • Boolean attributes.
  • The Update Tag action.

Emmet is supported in HTML/XML, JavaScript (JSX Harmony) and in the CSS contexts. This support is configured separately on the Emmet. HTML, Emmet. JSX and Emmet. CSS pages respectively.

Enabling and configuring native Emmet support in the HTML or XML context

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS. Expand the Editor node, and then click XML under Emmet. The Emmet page opens.
  2. To enable the Emmet support in the HTML or XML context, select the Enable XML/HTML Emmet checkbox.

    When this checkboxes is cleared, all the other controls on this page become disabled.

  3. To have WebStorm show a pop-up window with a preview of the entered abbreviation before actually expanding it, select the Enable abbreviation preview checkbox.
  4. Specify how Emmet in WebStorm will treat URL addresses by selecting or clearing the Enable automatic URL recognition while wrapping text with <a> tag checkbox.
    • If this checkbox is cleared and you attempt to wrap an URL address with the <a> tag, WebStorm simply encloses the URL address in <a href=""></a> and positions the cursor inside the double quotes in the href attribute. For example, wrapping http://www.jetbrains.com will result in <a href="|">http://www.jetbrains.com</a>:
      emmet recognize url off
    • If this checkbox is selected and you attempt to wrap an URL address with the <a> tag, WebStorm inserts the URL address inside the double quotes as the value of the href attribute and encloses the URL in <a href="<wrapped URL>"></a>. For example, wrapping http://www.jetbrains.com will result in <a href="http://www.jetbrains.com">http://www.jetbrains.com</a>. Moreover, WebStorm highlights the wrapped URL green as a recognized URL:
      emmet recognize url

Enabling native Emmet support in the JavaScript context

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS.
  2. Under the Languages and Frameworks node, click JavaScript, and select the language level JSX Harmony.
  3. Expand the Editor node, and then click JSX under Emmet.

    The JSX page opens.

  4. To enable the Emmet support in the JavaScript context, select the Enable JSX Emmet checkbox.

Enabling and configuring native Emmet support in the CSS context

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for macOS. Expand the Editor node, and then click CSS under Emmet.

    The Emmet. CSS page opens.

  2. To enable the Emmet support in the CSS context, select the Enable CSS Emmet checkbox.

    When this checkboxes is cleared, all the other controls on this page become disabled.

  3. Configure the way unknown abbreviations are treated by selecting or clearing the Enable fuzzy search among CSS abbreviations checkbox: When this checkbox is selected, every unknown abbreviation will be scored against available template names. The match with the best score will be used to resolve the template. For example, with this option enabled, the following abbreviations can be equal to:
    • ov:h
    • ov-h
    • o-h
    • oh
  4. Configure the way unrecognized properties are treated by selecting or clearing the Enable expansion of unknown properties ('unknown' to 'unknown:;') checkbox:
    • When this checkbox is selected, any entered word will be expanded into the same word followed with a colon and a semicolon;
    • When this checkbox is cleared, only known properties (for example, color) will be expanded this way (color:;)
  5. Configure inserting browser-specific prefixes using the Auto insert CSS vendor prefixes checkbox: If this checkbox is selected, the CSS properties listed in the table below are expanded into constructs that contain pre-pending vendor prefixes. Learn more at Vendor prefixes.

    If this checkbox is cleared, the entire table of properties is disabled.

  6. Configure the use of properties in different browsers using the Properties and vendor prefixes table. The table contains a list of CSS properties and vendor prefixes that correspond to various browsers.
    • To enable or disable a property in a browser, select or clear the checkbox under the browser column.
    • To add a new property to the list, click the Add button new or press Alt+Insert. Then type the name of the property in the dialog box that opens and enable it in the relevant browsers.
    • To delete one or more properties from the list, select them and press Remove delete or press Alt+Delete.
Last modified: 26 March 2018

See Also

Procedures:

Reference:

External Links: