Sublime 2 autocomplete html with multiple classes

Question

I don't really know how to create an html tag with multiple classes. Each time I do, I get this strange result.

If I want an anchor with classes "foo" and "bar", and I write

a.foo.bar

it turns into:

a.<foo class="bar"></foo>

What is the proper way to do this?

Answer 1

As mentioned by MBlanc in the comments, Emmet will do what you want.

1. Install Package Control if you haven't already
2. Open the Command Palette ( Ctrl Shift P in Windows and Linux, ⌘ Shift P in OS X)
3. Type pci to bring up Package Control: Install Package and hit Enter
4. Type emmet , hit Enter , wait for it to install, then restart Sublime.

Now, in an HTML document, just type:

a.foo.bar

hit Tab , and it automatically expands to

<a href="|" class="foo bar"></a>

where | is the cursor position. Type in your href , hit Tab again, and the cursor moves here:

<a href="foobar.html" class="foo bar">|</a>

so you can enter the link's text.

Make sure you read through all the documentation on emmet.io , this is an extremely powerful plugin, and once you get used to it your coding will be immensely faster.