Installation & Configuration

Emmet for Brackets

Installation

Install Emmet extension by Sergey Chikuyonok

Debug > Reload With Extensions

Preferences

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

Emmet > Preferences…

For Extensions Folder, enter the following:

• Mac: /Users/rsgranne/Documents/Emmet
• Windows: C:\Users\Your Name\Documents\Emmet

syntaxProfiles.json

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:

<p>

</p>

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

preferences.json

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 https://github.com/sergeche/emmet-sublime#tab-key-handler 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: https://github.com/sergeche/emmet-sublime.

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

{
    // Path to folder where Emmet should look for extensions
    // http://docs.emmet.io/customization/
    "extensions_path": "/Users/rsgranne/Dropbox/Apps/Brackets/Emmet/Extensions"
}

Emmet for BBEdit

Go to https://github.com/mattienodj/zencoding_BBEdit.

Click on Clone or Download & select Download ZIP, which should download a file named zencoding_BBEdit-master.zip.

Double-click on the ZIP to expand it.

Using Emmet