The Best VS Code HTML Shortcuts

Visual Studio Code (VS Code) offers many valuable features and shortcuts to simplify HTML development. These features are handy and allow developers to spend less time writing code. While you might not use all the available shortcuts, learning the most important ones can go a long way. This article covers some of the handiest shortcuts to consider when HTML coding.

Emmet Abbreviations

VS Code supports Emmet. This tool makes it easier to write CSS and HTML code through shortcuts. The basic HTML structure expands if you type an exclamation mark (!) and then press Tab.

Emmet introduces expansion capabilities that lessen the time taken to code using HTML in Visual Studio Code. You can use this in other editors as well. Writing shorthand expressions results in complete structures in HTML.

• Basic Emmet abbreviations: These abbreviations expand some commonly used elements. Typing div and then hitting Tab expands into <div></div>, while p expands to <p></p>. If you type ul>li*3, it’ll expand to a list with three items.
• Nested Elements: the > can be used to specify child elements. For example, div>h1 expands to <div><h1></h1></div>, essentially creating a <div> element with the <h1> element within.
• Multiplication: Multiplication generates multiple elements. Adding *3 to an ordered list generates a list with three items.
• Attributes: Add attributes to HTML elements inside square brackets. For example, [href=”#”] becomes <a href="#"></a>, creating an anchor element with a href attribute.
• CSS-like syntax: The syntax is inspired by CSS selectors, making it familiar and intuitive for web developers.
• Math expressions: You can perform some basic maths operations inside abbreviations. For example, div>ul>li.item$*3 will expand into an <div> element containing an ordered list with three list items with class names item1, item2, and item3.

Abbreviations are expanded by typing and then pressing the Tab button. If there are a couple of valid explanations for your abbreviation, cycle them by pressing the Tab option again. Emmet abbreviations are not specific to VS Code. You can use them in other editors that support Emmet.

Tag Wrapping

Select a line or command, then press Ctrl+Shift+G if using Linux or Windows. If using Mac, use Cmd+Shift+G. This shortcut wraps the content selected with an HTML tag.

This is a convenient feature in VS Code. It is useful when you must enclose the content content with tags or when you need to structure your code. The selection could be a single line, multiple lines, or a code block.

Another option is to right-click your selected code and then pick Wrap with abbreviation in the context menu. When you trigger the tag wrapping command, a prompt comes up where you can choose a desired HTML tag name. If you enter div, for example, a <div> element wraps the selected code.

Tag wrapping helps markup and structure code without manually typing the opening and closing tags. This saves a lot of time and reduces the incidence of syntax errors.

Formatting

Formatting HTML code is a good way of maintaining consistency and readability in projects. In VS Code, built-in formatting options allow the action to happen automatically in HTML following predefined rules.

The keyboard shortcut used to format HTML is Shift+Alt+F for Windows and Linux. Shift+Option+F works on macOS. 

The shortcut can format a whole HTML document or a part of the code. When you press it, the formatting rules are applied. Indention spacing and line breaks are adjusted accordingly.

You can also auto-format code in VS Code.

Commenting

You can comment or uncomment either on a single line or on multiple code lines as selected at the same time. If a comment already exists, the shortcut removes the comment, and if uncommented, comments are added. Comments in HTML are enclosed in <!—and > tags.

Code Navigation

This refers to the capacity to move between the different parts of the codebase or jump directly to definitions in the HTML attributes or tags. Using the Ctrl+] option on Linux and Windows to navigate through tags. Mac users can use Cmd+] to go to the element’s closing tag. To jump to the opening tag, press Ctrl+[ for Windows and Linux or Cmd +[ for Mac.

To jump to the definition of an attribute or tag, use the F12 key. It identifies the codebase’s corresponding closing or opening tag to find the correct location.

You will still access the definition when you hold the control key and click on an HTML attribute or tag on Windows. Press Command+click on macOS for the same action. This eliminates the need to search for the location manually.

Zen Mode

This mode is distraction-free. It makes it easier for developers to focus on code entirely by hiding buttons and toolbars. Activate this mode using the Ctrl+K Z shortcut on Windows and Cmd+K Z on Mac. Alternatively, go to View and then Appearance. Toggle on Zen mode here.

Command Palette

This is a widely used feature in VS Code and is especially useful for beginners. It represents every configuration, shortcut, and functionality option and is in the form of a list.

All you have to do is type what you want done within the command palette. You will receive different commands to assist you.

To access the command palette, use the Ctrl+Shift+P shortcut for Windows. The Mac shortcut is Cmd+Shift+P.

Search Files

If there is text you need located in the current project files, you can access it by clicking on the Search icon in the sidebar. Alternatively, use the Ctrl+Shift+F shortcut on Windows or Cmd+Shift+F on Mac.

Delete the Previous Word

When you hold down on the backspace bar to delete a word, you may accidentally delete other parts. To limit the deletion to the previous word, use the Ctrl+Backspace shortcut on Windows or Cmd+Backspace on Mac.

Copy Line

During development, programmers sometimes need to copy-paste lines to other project parts. Small alterations can then be done to the lines as needed. A keyboard shortcut is a good way to speed up this process, especially if you do this regularly.

The Windows shortcut is Shift+alt+up or Shift+alt+down. For Mac, the shortcut is Opt+shift+up or Opt+shift+down.

Reopen Closed Editor

If you are handling a huge HTML project with many files, it can get frustrating if you accidentally close a tab. Thankfully, you can use a shortcut to open the last closed tab in VS Code

To reopen a closed editor, use the Ctrl+Shift+T shortcut on Windows or Cmd +Shift+T on Mac. You can open multiple closed tabs using this shortcut.

Accelerate Coding With HTML Shortcuts

Many shortcuts make using VS code relatively easier. While there are more options than what’s in the article, the above are some of the most common that beginners and seasoned users may find useful. With VS Code’s popularity, taking advantage of all the features can make it more enjoyable. Choose shortcuts that you commonly use to pick up coding speed.

Next, you should learn how to compare two files in VS Code.

FAQs

Q: Are HTML shortcuts customizable in VS Code?

A: Yes. You can customize HTML shortcuts in VS Code by changing your user or workspace settings.

Q: Can I create my own custom HTML shortcuts in VS Code?

A: Yes. You can create custom HTML snippets or shortcuts in VS Code by defining them in user or workspace settings. This allows you to create shortcuts for frequently used code patterns or custom elements.