• Developer: Patrick Edelman
• Find it on the Brackets Extension Manager (note that it is called Brackets Surround)
• What it does: “…wrap selected text in Brackets”

• How to use it:

  1. Select the text around which you want to insert HTML or characters
  2. Press Ctrl+Shift+J (Windows) or ⇧⌘J (Mac)
  3. Enter HTML tags or characters & press Enter

Some examples:

• <span> automatically adds the </span>
• <a href="https://www.granneman.com"> automatically adds the </a>
• <!-- automatically adds -->
• " automatically adds "
• [ automatically adds ]

(Mac users can ignore all of this!) On Windows, the Surround extension’s key command (Ctrl+Shift+J) may conflict with the key command for the Join Lines extension. The fix is to change the key command for Surround from Ctrl+Shift+J to Alt+Shift+J. The way to implement the fix is as follows:

1. Choose Debug > Open User Key Map. A file named keymap.json should open.

2. Look for this section in keymap.json:

   "overrides": {
   
   }
   

   It may already have something in it, like this (this is an example, so you might have something different!):

   "overrides": {
     "Cmd-Opt-Shift-L": "gruehle.lookupInDevDocs"
   }
   

   If so, type a comma after the last quotation mark on the line with the key command so it looks like this:

   "overrides": {
     "Cmd-Opt-Shift-L": "gruehle.lookupInDevDocs",
   }
   

3. Add this line between the { & }:

   "Ctrl-Shift-9": "pedelman.surround"
   

   It should now look like this:

   "overrides": {
       "Ctrl-Shift-9": "pedelman.surround"
   }
   

   If you started out with something already inside "overrides" it would instead look like this:

   "overrides": {
     "Cmd-Opt-Shift-L": "gruehle.lookupInDevDocs",
     "Ctrl-Shift-9": "pedelman.surround"
   }
   

4. Save the file & close it.

5. Now test your new key command. Highlight some text & press Ctrl-Shift-9 & you should see the Surround box show up.

If you don’t like Ctrl-Shift-9, how about Alt+Shift+J?