Enable Emmet completion in custom file types

Background/Situation

By default, Emmet abbreviation expansion (triggered with Tab) is active only in the file types Emmet supports natively: HTML, XML, JSX, CSS, SCSS, SASS, and LESS. In any other file type — for example, Markdown (.md), Phoenix HEEx (.heex), Embedded Elixir (.eex), Twig, Smarty, or a custom extension — typing an abbreviation such as div.container>ul>li*3 and pressing Tab leaves the text as-is.

Question

How can Emmet abbreviation expansion be enabled in file types that Emmet does not support out of the box?

Answer

Emmet expansion is implemented as a set of live templates grouped under Zen HTML, Zen XSL, and Zen CSS in the IDE settings. Each live template has its own context — the set of file types in which it is active. Enabling Emmet in another file type means copying the relevant Zen templates into a new group and adding the target file type to the copied templates' context. Working from a separate group keeps the built-in Zen HTML/XSL/CSS groups untouched and makes the customization easy to revert.

1. Open Settings | Editor | Live Templates.

2. Click the + icon on the right toolbar and choose Template Group. Give the new group a recognizable name, for example, Zen HTML (extended).

3. Expand the built-in Zen HTML group, select the templates to reuse (Ctrl+A / ⌘A selects all), right-click, and choose Copy.

4. Select the custom group created in step 2, right-click, and choose Paste.

5. With the pasted templates selected in the custom group, right-click and choose Change context.

6. In the context dialog, enable the checkbox for each target file type. If the file type is not listed, expand the HTML node and enable Other to cover unrecognized HTML-like contexts.

   

7. Click Apply and OK. Type an Emmet abbreviation in a file of the target type and press Tab to expand it.

Notes

• The Change context action operates on whichever templates are currently selected, not on the parent group. Selecting the group itself and changing context has no effect on its members; select the templates individually or use Ctrl+A / ⌘A within the group first.
• For CSS or XSL abbreviations such as m10 (margin: 10px) or xsl:for-each, repeat the procedure with the Zen CSS and Zen XSL groups.
• If Tab stops triggering expansion after the change, open the custom group's settings and set Expand with explicitly to Tab rather than leaving it on Default. Restarting the IDE clears stale state if the setting alone does not take effect.

For more details on managing live templates and their contexts, see the Live Templates settings reference.