Wrap Selection With Tag
Use the keyboard to put a wrapper tag around a selection of code.
You're in an HTML file, working on a nice block of markup, and realize your CSS framework wants a wrapper <div>. Don't they always? What's another <div>, right?
You could use mouse to move to the start, type in <div>, go to the end, type in </div>, and by then you forgot what you were doing.
Instead:
-
Invoke Surround With ⌘⇧A (macOS) / Ctrl+Shift+A (Windows/Linux)
-
Hit T to choose Surround with
in the Live Templates section -
In the prompt, type the name of the tag
If you're a fan of the Emmet system for quickly generating markup, you can also surround with Emmet.
