PhpStorm 2016.2 Help

Enabling Emmet Support

On this page:

Basics

Native Emmet support allows you to generate XML/HTML, JavaScript (JSX Harmony) and CSS structures based on abbreviations. PhpStorm 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 HTML, JSX and 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 PhpStorm | Preferences for OS X. 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 check box.

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

  3. To have PhpStorm show a pop-up window with a preview of the entered abbreviation before actually expanding it , select the Enable abbreviation preview check box.
  4. Specify how Emmet in PhpStorm will treat URL addresses by selecting or clearing the Enable automatic URL recognition while wrapping text with <a> tag check box.
    • If this check box is cleared and you attempt to wrap an URL address with the <a> tag, PhpStorm 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 check box is selected and you attempt to wrap an URL address with the <a> tag, PhpStorm 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, PhpStorm 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 PhpStorm | Preferences for OS X.
  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 check box.

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 PhpStorm | Preferences for OS X. Expand the Editor node, and then click CSS under Emmet. The CSS page opens.
  2. To enable the Emmet support in the CSS context, select the Enable CSS Emmet check box.

    When this check boxes 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 check box: When this check box 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:;') check box:
    • When this check box is selected, any entered word will be expanded into the same word followed with a colon and a semicolon;
    • When this check box 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 check box: If this check box 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 check box 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 check box under the browser column.
    • To add a new property to the list, click the Add button add 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 lsit, select them and press Remove delete or press Alt+Delete.

See Also

Procedures:

Reference:

External Links:

Last modified: 24 November 2016