webstrom 中启用emmet插件的方法

Posted 一个勤奋的胖子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webstrom 中启用emmet插件的方法相关的知识，希望对你有一定的参考价值。

参考页面：https://www.jetbrains.com/help/webstorm/2016.2/enabling-emmet-support.html

 

Basics

Native Emmet support allows you to generate XML/HTML, javascript (JSX Harmony) and CSS structures based on abbreviations. WebStorm supports basic Emmet andEmmet 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 WebStorm | Preferences for OS X. Expand the Editornode, 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 WebStorm 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 WebStorm will treat URL addresses by selecting or clearing theEnable 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, WebStorm simply encloses the URL address in <a href=""></a> and positions the cursor inside the double quotes in the href attribute. For example, wrappinghttp://www.jetbrains.com will result in <a href="|">http://www.jetbrains.com</a>:技术分享
    • If this check box 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 hrefattribute and encloses the URL in <a href="<wrapped URL>"></a>. For example, wrappinghttp://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:技术分享

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 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 Emmetcheck 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 WebStorm | Preferences for OS X. Expand the Editornode, 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 theEnable 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 prefixescheck 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 技术分享 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 技术分享 or press Alt+Delete.

当前我设置的快捷键为 ctrl+shift+alt+e

以上是关于webstrom 中启用emmet插件的方法的主要内容，如果未能解决你的问题，请参考以下文章

Emmet使用方法

如何在Dreamweaver中使用emmet(ZenCoding)插件

vue 项目 webstrom IDE格式化代码规则遵循eslint设置

vue 项目 webstrom IDE格式化代码规则遵循eslint设置

emmet插件快捷键：

sublime插件emmet安装和使用