Configuring & Using Emmet

Installation & Configuration

Emmet for Brackets


Install Emmet extension by Sergey Chikuyonok

Debug > Reload With Extensions


Create a folder in Documents to store your Emmet preferences: Emmet

Emmet > Preferences…

For Extensions Folder, enter the following:


Create a JSON file in the Emmet folder named syntaxProfiles.json & put the following in it:

    "html": {
        "tag_nl": "true"

The tag_nl name determines if Emmet outputs each tag on a new line with indentation. In other words, like this:



Because I want Emmet to output each tag on a new line with indentation, I use the value of true.


In the Emmet folder, create another JSON file named preferences.json & put the following in it:

    "format.forceIndentationForTags": "address,article,aside,audio,blockquote,body,canvas,div,dl,figcaption,figure,footer,form,head,header,html,iframe,main,map,nav,object,ol,p,pre,script,section,style,table,tbody,td,tfoot,th,thead,tr,ul,video"

Save preferences.json & close it.

Emmet for Sublime Text

Use Package Control to install Emmet.

If you’re asked to install PyV8, allow it.

Restart Sublime Text.

By default, Emmet expands abbreviations with Tab in HTML, XML, HAML, CSS, SASS, LESS, & Stylus documents. However, this means you can’t use some ST2 snippets. Please read about how Tab handler works and how to tweak it.

In HTML and XML documents, Emmet overrides Enter key to insert formatted line breaks between opening and closing tags. To disable Enter key handler, add the following option in your user’s Preferences file:

"disable_formatted_linebreak": true

Emmet has a number of actions with keyboard shortcuts that may override ones you’re using commonly (for example, Ctrl-E or Ctrl-Down). Please read the project main page to get list of available actions and keyboard shortcuts and how to disable them:

Edit Sublime Text > Preferences > Package Settings > Emmet > Settings - User:

    // Path to folder where Emmet should look for extensions
    "extensions_path": "/Users/rsgranne/Dropbox/Apps/Brackets/Emmet/Extensions"

Emmet for BBEdit

Go to

Click on Clone or Download & select Download ZIP, which should download a file named

Double-click on the ZIP to expand it.

Using Emmet

WebSanity Top Secret