Useful tools for editing HTML in VS Code

Knowing how to use your tools makes a major difference in your speed and overall productivity. In this post, you’ll learn about some low-lift, easy-to-use extensions and shortcuts in Visual Studio Code that make marking up HTML simple and fast.

Prettier + Word Wrap

Prettier

Prettier is a code formatter extension for VS Code that makes unformatted code, well, prettier. It can format several languages in addition to HTML such as CSS, JavaScript, JSON, etc. In my experience, it’s been useful in any situation where code needs to be reformatted so it’s easier to work with, such as expanding minified CSS styles.

Prettier makes code…pretty

Word Wrap

Word Wrap is a native feature in VS Code that wraps text in the visible window. You can toggle Word Wrap by clicking View > Word Wrap or by using the shortcut Option + Z (Mac) or Alt + Z (Windows)

Word wrap makes it easy to see what you’re working on

Emmet wrap tag

Emmet is a toolkit featuring loads of shortcuts for making editing HTML and CSS faster. There is a bit of a learning curve because it’s so feature-rich, but one easy way to get started with Emmet is to use the wrap tag feature. Here’s how it works:

  1. Highlight some text
  2. Open the command palette in VS Code
  3. Search “Emmet wrap tag”
  4. Type in the tag you want
  5. Press Enter
Emmet correctly wraps elements

Just like that, Emmet will add the appropriate opening and closing tags for you! This feature is very useful if you have lots of plain text that you need to quickly markup.

Additional Resources

To learn more about Emmet, check out the Official Documentation. To learn more about the native Emmet integration with VS Code, check out Emmet in Visual Studio Code from the Microsoft VS Code Docs.

Multiple cursor insertion

VS Code supports multiple cursor insertion, which is very handy when you need to apply the same code or tag to multiple lines. For example, it’s handy when you need to add a list item tag to multiple items in a list.

Multiple cursors speed up list building

To add multiple cursors, press Option on Mac or Alt on Windows and click where you’d like to add multiple cursors. The multiple cursors will persist until you click on screen again, which means that you can use keyboard commands for navigation. For example, you can add multiple cursors at the beginning of several lines and use the shortcut Command + Right Arrow (Mac) or Ctrl + Right Arrow (Windows) to move all of the cursors to the end of their respective lines.

To learn more, check out Multiple selections (multi-cursor) from the Microsoft VS Code Docs.

Additional Resources

Custom Keybinding for Inserting Hyperlinks

During a recent project, I encountered an enormous number of links that had not been formatted properly. For example, the document listed all of the links like this:

Useful tools for editing HTML in VS Code www.callandret.com/useful-tools-for-editing-HTML

The links were in plain text, so the original site was displaying them as such. I needed to convert all of the links to the proper HTML format, like this:

<a href="www.callandret.com/useful-tools-for-editing-HTML">Useful tools for editing HTML in VS Code</a>

I got through about half of the document and thought, there has to be a way to speed this up or automate this process. There are link generators online, but they would have required me to perform additional formatting on my document that just would have taken unneccary time. Fortunately, I stumbled across a Stack Overflow thread titled vscode: How to linkify text with a URL in HTML mode? which explained how to add custom keybindings to the keybindings.json file and also provided this handy script for creating proper HTML hyperlinks based on the clipboard contents and the currently highlighted text.

{
  "key": "alt+h",        // whatever keybinding you want
  "command": "editor.action.insertSnippet",
  "when": "editorHasSelection  && editorLangId == html",
  "args": {
      "snippet": "<a href=\"${CLIPBOARD}\">${TM_SELECTED_TEXT}<\/a>"
  }
}

The script defines a shortcut (which I set to Option + H on my Mac), as well as the action to be performed by the shortcut. Now I can make hyperlinks at warp speed!

This custom keybinding makes link formatting as easy as copy + paste

Additional Tips

If you’re just starting out with VS Code, I recommend learning how you can move around a document with just the keyboard. The tools described in this post are helpful, but their efficacy is somewhat limited if you still have to click around with a mouse or trackpad. Learn what the Command/Ctrl and Option/Alt keys do in conjunction with the arrow keys as well as when used with Shift.

A tool like VS Code has a lot under the hood that’s worth exploring. And because it’s such a widely used application, there’s a wide range of tutorials and helpful solutions from the community. There are so many extensions and tools that can speed up your workflow. If you ever find yourself in completing a task over and over again, there’s a good chance that someone has already asked how to automate or speed up the process. Learning new shortcuts is like compounding interest for productivity. A little goes a very long way over time.

Scroll to Top