How to enable the Emmet plugin in Webstrom

Reference Page: https://www.jetbrains.com/help/webstorm/2016.2/enabling-emmet-support.html

Basics

Native Emmet support allows-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 configured separately on the HTML, JSX and CSS pages respectively.

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

2. 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.
4. To enable the Emmet, the HTML or XML context, Select the enable xml/html Emmet check box.

   When this check boxes are cleared, all of the other controls on this page become Disabled.

6. To has webstorm show a pop-up window with a preview of the entered abbreviation before actually expanding it, select the Enable abbreviation Preview Check box.
7. Specify how Emmet in Webstorm would treat URL addresses by selecting or clearing theEnable automatic URL recognition while wrapping text with <a> tag check box.
   • if This check box are cleared and you attempt to wrap a URL address with the <a> tag, webstor M 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 was selected and you attempt to wrap a URL address with the <a> tag, webstorm inserts the URL addr ESS inside the double quotes as the value of the href attribute and encloses the URL in <a href="<wrapped URL>"></a> . For example, wrapping would http://www.jetbrains.com 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

2. 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.
4. Under the Languages and frameworks node, Click JavaScript, and select the language level JSX Harmony.
6. Expand the Editor node, and then click JSX under Emmet. The JSX page opens.
8. 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

2. 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.
4. to enable The emmet support in the CSS context, Select The enable CSS emmet check box.

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

6. configure The unknown abbreviations is treated by selecting or clearing The enable Fuzzy search among CSS abbreviations check box:when this check box is selected , every unknown abbreviation'll be scored against available template Names. The match with the best score is used to resolve the Template. For example, with this option enabled, the following abbreviations can is equal to:
   • ov:h
   • ov-h
   • o-h
   • oh
8. configure The "the" unrecognized properties is treated by selecting or clearing Theenable expansion of unknown properties (' unknown ' to ' unknown:; ')  check box:
   • when This check box was selected, any en tered word would be expanded to the same word followed with a colon and a semicolon; 
   • color () 'll be expanded the this (color:; )
10. Configure inserting browser-specific prefixes using the Auto insert CSS vendor Prefixescheck box:if this check bo X is selected, the CSS properties listed in the table below be expanded into constructs that contain pre-pending vendor P Refixes. Learn more at Vendor Prefixes.

    If This check box was cleared, the entire table of properties is Disabled.

12. Configure the use of the 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 & Nbsp;or press alt+insert . Then type the name of the "the" in the dialog box, 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 .

Currently I set the shortcut key to Ctrl+shift+alt+e

How to enable the Emmet plugin in Webstrom