WebStorm 6.0 Web Help

Tip

WebStorm supports Zen Coding up to version 0.7.

With WebStorm, you can edit HTML and CSS code faster by applying Zen Coding features. WebStorm provides two types of Zen Coding support.

You can configure the shortcut keys to expand Zen Coding selectors and live templates. The shortcut for expanding selectors also by default applies to expanding Zen Coding live templates. You can re-define this default setting for each specific live template.

To enable native zen coding support
To enable support of additional HTML, css, and xsl live templates
  1. Open the IDE settings and click Live Templates.
  2. In the Live Templates page, that opens, select the check boxes next to the relevant template group. The available options are:
    • Zen CSS
    • Zen HTML
    • Zen XSL
To configure shortcuts to expand abbreviations, do one of the following:
  • To specify the shortcut to apply to selectors, open the Smart Keys page of the Settings dialog box and choose the desired option from the Expand abbreviation with drop-down list.
  • To re-define the expansion key for a live template, open the Live Templates page, expand the Zen Coding node, and select the desired template. The focus moves to the Template Text area.
  • From the Expand with drop-down list, select the key to expand the template with.

    Note

    This setting does not override the default setting specified for native Zen Coding support; you will just get the possibility to expand the template using either of the specified keys.

See Also

Concepts:

Procedures:

Reference:

External Links:

Web Resources: