Brackets already has a neat trick up its sleeve: when you finish typing a start tag like <p>, Brackets automatically creates the closing tag—the </p>—for you. That’s nice, but you know what would be even nicer? If Brackets not only created that closing tag, but also moved it below the opening tag & placed your cursor between the two, ready to type. In other words, if you typed <p> & ended up with this (the pipe symbol—the |—shows where the cursor will end up so you can start typing):

<p>
  |
</p>

Of course, we don’t want to do that with every element. We certainly wouldn’t want that with <strong> or <em> or <a>, for instance. But for a substantial number of elements, that is exactly what we’d like.

So how do we do it? Actually, you don’t need an extension for this. The capability is built into Brackets—you just have to turn it on! It’s slightly tricky, but if you follow my instructions carefully, you shouldn’t have a problem, & in just a few moments you’ll be in HTML efficiency heaven.

To start with, open Brackets & select Debug > Open Preferences File.

It is very important that you edit this file carefully. The last few lines of the file will look something like this (although the actual content could be different):

    …
    "fonts.fontSize": "16px",
    "fonts.fontFamily": "'Source Code Pro', monospace"
}

Notice that a comma is at the end of every line, except for the last line before the closing curly brace (the }). Now let’s look at the lines that will enable the new formatting we want:

"closeTags": {
    "whenOpening": true, 
    "whenClosing": true, 
    "indentTags": ["address","article","aside","audio","blockquote","body",
                   "canvas","div","dl","fieldset","figcaption","figure","footer",
                   "form","head","header","iframe","main","map","nav","object",
                   "ol","p","pre","script","section","style","table",
                   "tbody","td","tfoot","th","thead","tr","ul","video"]
}

This tells Brackets¹ to close the tag when your type the final > of an opening tag or when you type the / of a closing tag. And it also defines which tags will get indented—in other words, which ones will look like this, with the pipe symbol (the |) again showing where the cursor will end up, ready for you to type:

<pre>
  |
</pre>

Here’s the complexity: you cannot just paste those lines in to the Preferences file! You have to be very careful when you add those links, so that the last few lines of the Preferences file will now look something like this:

    …
    "fonts.fontSize": "16px",
    "fonts.fontFamily": "'Source Code Pro', monospace",
    "closeTags": {
        "whenOpening": true, 
        "whenClosing": true, 
        "indentTags": ["address","article","aside","audio","blockquote","body",
                       "canvas","div","dl","fieldset","figcaption","figure","footer",
                       "form","head","header","iframe","main","map","nav","object",
                       "ol","p","pre","script","section","style","table",
                       "tbody","td","tfoot","th","thead","tr","ul","video"]
    }
}

In my example, the last line of the Preferences file was originally "fonts.fontFamily": "'Source Code Pro', monospace". In the new one, there is now a comma after that line, with the new stuff after it. Yes, there is a another set of curly braces, which means that the Preferences file ends with two closing curly braces (when you see the file, you’ll see the opening curly brace at the very beginning). Feel free to check out my complete Brackets Preferences file, but don’t just blindly copy it over yours; instead, study it to see how to add the lines we’re discussing.

Once you’ve added the lines, select Debug > Reload With Extensions & test out your new editing efficiency! Create an HTML page (using the HTML Templates extension, naturally) & then type <p>. It should immediately expand to this, with the pipe symbol (the |) showing where the cursor will end up:

<p>
  |
</p>

Try it with the other elements listed in the Preferences file. Pretty neat, huh? It’s a fantastic time saver!

Don’t worry if you screw up your Preferences file. When you reload the program after changing your Preferences file, Brackets will complain if there are problems & take you right back to the file so that you can fix it. Look at it carefully & compare it to mine (again, don’t just blindly copy my whole Preferences file; instead, study it to see how it’s supposed to look) & then re-paste in the lines you need. In particular, pay attention to the comma that needs to go after what was formerly the last line!