AppCode 2017.1 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. AppCode 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 AppCode Preferences by choosing AppCode | Preferences. 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 AppCode 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 AppCode 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, AppCode 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>:
      /help/img/idea/2017.1/emmet_recognize_url_off.png
    • If this check box is selected and you attempt to wrap an URL address with the <a> tag, AppCode 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, AppCode highlights the wrapped URL green as a recognized URL:
      /help/img/idea/2017.1/emmet_recognize_url.png

Enabling native Emmet support in the JavaScript context

  1. Open the AppCode Preferences by choosing AppCode | Preferences.
  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 AppCode Preferences by choosing AppCode | Preferences. 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 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 /help/img/idea/2017.1/new.png or press N/A. 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 /help/img/idea/2017.1/delete.png or press ⌥⌦.

See Also

Procedures:

Reference:

External Links:

Last modified: 26 July 2017