Emmet in CodeMix

Emmet support is built right into CodeMix, no extension is required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.

Expanding Emmet Abbreviations and Snippets

Emmet abbreviation and snippet expansions are enabled by default in html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less and stylus files; as well as any language that inherits from any of the above, like handlebars and php.

As you type an Emmet abbreviation, the abbreviation is displayed in the suggestion list. If you have the suggestion documentation fly-out open, you will see a preview of the expansion as you type. If you are in a stylesheet file, the expanded abbreviation shows up in the suggestion list sorted among the other CSS suggestions.

Note: If you have disabled quick suggestions from the CodeMix>Editors>Contents Assist preference page, you won’t see suggestions as you type. You can still trigger suggestions manually by pressing Ctrl + Space.

Setting Emmet Preferences

To update Emmet preferences, go to Window>Preferences (or Eclipse>Preferences on Mac), and select CodeMix>Extensions>Emmet. A number of Emmet properties can be edited directly from this page. For some properties, you will need to click the Edit in settings file link to edit the settings manually. 

For a complete list of Emmet settings that you can use to customize your Emmet experience, refer to this doc.

Emmet Abbreviations for Other File Types

To enable the Emmet abbreviation expansion in file types where it is not available by default, use the emmet.includeLanguages setting. Make sure to use language identifiers for both sides of the mapping.

For example:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "plaintext": "jade"
}

Emmet has no knowledge of these new languages, and so you might see Emmet suggestions showing up in non HTML/CSS context. To avoid this, set the Show Expanded Abbreviation property to inMarkupAndStylesheetFilesOnly.

Additional Emmet Features

Vendor prefixes—Prefix your CSS abbreviations with – to get all applicable vendor prefixes included in the expanded abbreviation.
Filters—Special post-processors that modify the expanded abbreviation before it is output to the editor.
Custom snippets—Add your own snippets for more productive coding.