2018.2

Table Of Contents

Emmet Snippets Preferences

Emmet Snippet are similar to abbreviations in that they are expanded when the Tab key is

pressed, but they are just blocks of plain text. Anything in a snippet will be outputted “as is”,

without any transformation.

New: Click to create a new snippet.

Name: The name of the abbreviation is also its trigger.

Context: The context in which the snippet is enabled (HTML, CSS, etc.).

Description: A short description of the snippet.

Pattern: The pattern defines what a snippet expands to.

Automatically insert: This option doesn't affect how Emmet works in Connect

Designer.

Edit: Modify the currently selected snippet.

Remove: Remove the currently selected snippet from the list.

Import: Click to open a browse dialog to import an XML file containing exported snippets.

The imported snippets are added to the current list.

Export: Click to open a Save as dialog to export all the snippets in an XML file that can

be shared and re-imported.

Preview box: Shows what the selected snippet is expanded to.

l To temporarily disable a snippet, uncheck the checkbox next to the name of the snippet in

the list.

Emmet Variables Preferences

Variables are placeholders used in Emmet 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 below. 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].

Name: The name of the variable. This should be a single alphanumeric string with no

spaces or special characters. For example, the myVar name is referred to as ${myVar}.

Page 331