PhpStorm 8.0.2 Web Help

Emmet

File | Settings | Editor | Emmet

Ctrl+Alt+S

settings

In this page, enable PhpStorm to use Emmet in HTML, XML files and style sheets.

Item Description
Expand abbreviation with Use this drop-down box to select the default key to expand Emmet selectors with.

This key will also by default expand Emmet live templates. You can re-define this default setting for each specific live template.

XML
Enable XML Emmet Select this check box to enable Emmet support for XML. If this check box is not selected, the complicated abbreviations, like div.class>ul#list>.item$), will not work in the editor.
Enable abbreviation preview If this check box is selected, PhpStorm shows a pop-up window with the preview of the entered abbreviation, prior to actually expanding it.
emmet_abbreviation_preview
Filters enabled by default Select the check boxes next to the filter names to enable them.
CSS
Enable CSS Emmet Select this check box to enable Emmet (aka Zen Coding) support for the style sheets. If this check box is not selected, the complicated abbreviations, like bdci:n expanding into border-corner-image: none;, will not work in the editor.
Enable fuzzy search among CSS abbreviations Select this check box to enable fuzzy search among CSS snippet names. When enabled, every unknown abbreviation will be scored against available template names. The match with best score will be used to resolve template. For example, with this option enabled, the following abbreviations can be equal:
  • ov:h
  • ov-h
  • o-h
  • oh
Enable expansion of unknown properties ('unknown' to 'unknown:;') If this check box is selected, then any entered word will expand into the same word appended by a colon and semicolon;
If this check box is not selected, then only known properties (for example, color) will be expanded this way (color:;)
Auto insert CSS vendor prefixes If this check box is selected, the CSS properties listed in the table below are expanded into constructs that contain pre-pending vendor prefixes.

If this check box is not selected, the entire properties table is disabled.

Properties and vendor prefixes This table contains the list of CSS properties and vendor prefixes for the various browsers.

Select or clear the check boxes under each browser column to enable or disable prefixes for certain browsers.

add Alt+Insert Click this button to add a new property with the specified name to the list.
delete Alt+Delete Click this button to remove one or more selected properties from the list.

See Also

Last modified: 10 December 2014