snippets.json

Create snippets.json file in extensions folder to add or override snippets. The structure of this file is the same as the original one: on the top level you define syntax name your snippets belong to, and the second level has the following section:

When loaded, users’ snippets.json in recursively merged with the original one, adding or updating abbreviations and snippets.

Text snippets

In snippets section of syntax definition, you create plain text snippets, pretty like the same as your editor ones. You can also use tabstops inside snippets to traverse between them with Tab key when abbreviation is expanded (if your editor supports them). Emmet borrows tabstop format from TextMate editor:

Note that ${0} or $0 tabstop has a special meaning in some editors like TextMate or Eclipse and is used as a final caret position after leaving “tabstops mode” so you’d better use tabstops staring from 1.

Variables

You can use variables in snippets to output predefined data. For example, the html:5 snippet of HTML syntax has the following definition:

<!doctype html>\n<html lang="${lang}">...</body>\n</html>

In the example above, ${lang} is used to refer lang variable defined in variables section of snippets.json. If your primary language is, for example, Russian, you can simply override lang variable with ru value and keep the original snippets.

Also, you can override variable values with inline abbreviation attributes: html:5[lang=ru]. Together with ID and CLASS attributes shorthands—# and .—you can easily override variables right in abbreviation:

"for": "for (var ${class} = 0; i < ${id}.length; ${class}++) {\n\t|}"

Example usage: for#array.i.

Predefined variables

Snippets have some predefined variable names that have special meaning to Emmet:

Escaping | and $ characters

The $ character is used for tabstops and variables, the | character it used to indicate caret position when snippet is expanded. If you want to output these characters as-is, you should use double slash to escape them: \\$ or \\|

Sharing snippets

If you want to share your snippets with other users, you should put them into a file which name starts with snippets, for example: snippets-foo.json, snippets_bar.json, snippetsBaz.json. Emmet will load them on start and merge into a single snippets set.

Notice that snippets defined in snippets.json file has higher priority over ones defined in snippets*.json.

comments powered by Disqus