VS Code: You don’t need that extension part 2

This follows on from the post VS Code: You don’t need that extension that I wrote last year.

There are builtin features and settings that ably do the work of many popular extensions. Perhaps, you do not need that extension!

Our remedies oft in ourselves do lie

- William Shakespeare

1. Wrap selected HTML in a tag

Sometimes, you want to wrap a block of HTML with another element when you are refactoring your HTML. This is awkward to do manually.

For example, in the code below, to wrap the 3 div elements in a main element, we would need to go to line 10 and type out an opening main tag. If we have auto closing tags setting turned on, we may have to delete this closing tag. Then, we need to go to line 26 and type out the closing main tag.

html example

It would be nice to just select the block and run a command to wrap it with the main tags.

1.1. Extensions

1.2. Feature

Emmet can do this for you. Select the code you want and run the command Emmet: wrap with abbreviation. You will be prompted for an abbreviation, you can just type the name of the tag you want. We just type “main” and hit enter.

emmet wrap abbreviation demo

If you wanted to wrap it with more than one tag and include a class, you can provide an Emmet abbreviation such as main>div.container, which will give you HTML like this:

<div class="container">

2. Bracket pair coloring

Styling of matching brackets pairs can help with identification of scope in your code. In particular, it is very popular for people to color brackets depending on their nesting level.

bracket colorization example

Quite a few extensions have filled this role in some way or another.

2.1. Extensions

2.2. Feature

VS Code introduced native bracket pair coloring in v1.6.0 (August 2021). It is much faster than any of the extensions listed. You can read the “Bracket pair colorization 10,000x faster” blog for a deep dive.

Bracket pair coloring can be enabled by setting editor.bracketPairColorization.enabled to true.

demostration of bracket pair colorization for 6 indented levels

The bracket colors can be declared in a theme, or can be set through the setting workbench.colorCustomizations.

To set the colors for an installed theme through the workbench.colorCustomizations setting, you specify the name of the theme in square brackets, and then assign values to the properties as below. The property editorBracketHighlight.foreground1 refers to the first set of brackets, editorBracketHighlight.foreground2 to the second set of brackets, and so on. Also, there is the editorBracketHighlight.unexpectedBracket.foreground property for any extra brackets that are unmatched.

2.3. Bracket pair coloring settings summary

"editor.bracketPairColorization.enabled": true,
"workbench.colorCustomizations": {
"[Panda Syntax]": {
"editorBracketHighlight.foreground1": "#E6E6E6",
"editorBracketHighlight.foreground2": "#FF75B5",
"editorBracketHighlight.foreground3": "#19f9d8",
"editorBracketHighlight.foreground4": "#B084EB",
"editorBracketHighlight.foreground5": "#45A9F9",
"editorBracketHighlight.foreground6": "#FFB86C",
"editorBracketHighlight.unexpectedBracket.foreground": "#FF2C6D"

Some of the aforementioned extensions enable you to apply more styles to the brackets, such as underlining and borders, currently this is not possible with this feature. However, there is a possibility for this to be added in the future because the bracket pair algorithm identifies brackets as tokens similar to how syntax highlighting works. Time will tell if this is something that will be added.

3. Indentation guides colorization

Indentation guides are vertical lines that outline the blocks of your code. They can help guide your eye to see how your code structured. VS Code refers to them as “brackt pair guides”.

colored guides example

3.1. Extensions

3.2. Feature

Since v1.61 (September 2021), the editor supports colors for indentation guides. VS Code refers to them as “bracket pair guides”. They use the same colors as the bracket pair coloring feature discussed above by default.

Bracket pair guides can be enabled by setting editor.guides.bracketPairs to true, it is set to to false by default. There is a third option active to only show the indent guide for the active block. This setting should be used instead of the deprecated editor.renderIndentGuides setting.

As you can see from the example below, the guides are quite muted by default. It looks like the colors are destaurated.

indent guide colorization

You can enable highlighting of the indent guide for the current scope by setting editor.guides.highlightActiveIndentation to true. This should be used instead of the deprecated editor.highlightActiveIndentGuide setting.

As you can see from the example below, the active indent guide is shown in a brighter (more saturated) color.

active indent guide

There is also a setting editor.guides.bracketPairsHorizontal that controls if and when to render horizontal lines when a line of code crosses into another indentation level. It defaults to active.

horiztonal line indent guide

Similar to bracket pairs, the colors can be declared in a theme, or can be set through the setting workbench.colorCustomizations. You can change the color of the lines at each indent level through the properties editorBracketPairGuide.background{1,...,6} and editorBracketPairGuide.activeBackground{1,...,6} .

3.3. Indent guides settings summary

The relevent settings are:

"editor.guides.bracketPairs" : true,
"editor.guides.highlightActiveIndentation" : true,
"editor.guides.bracketPairsHorizontal" : "active",

"workbench.colorCustomizations": {
"[Panda Syntax]": {
"editorBracketPairGuide.background1": "#FFB86C",
"editorBracketPairGuide.background2": "#FF75B5",
"editorBracketPairGuide.background3": "#45A9F9",
"editorBracketPairGuide.background4": "#B084EB",
"editorBracketPairGuide.background5": "#E6E6E6",
"editorBracketPairGuide.background6": "#19f9d8",

"editorBracketPairGuide.activeBackground1": "#FFB86C",
"editorBracketPairGuide.activeBackground2": "#FF75B5",
"editorBracketPairGuide.activeBackground3": "#45A9F9",
"editorBracketPairGuide.activeBackground4": "#B084EB",
"editorBracketPairGuide.activeBackground5": "#E6E6E6",
"editorBracketPairGuide.activeBackground6": "#19f9d8",

4. Running and automating scripts (NPM, Gulp, Make, and others)

Most projects requires some tasks to be run like linting, testing, building, packaging, and deploying. Depending on the type of project it is, you may use different tools to handle this such as NPM, Grunt, Gulp, Make, and so on. While this is often something you do on the command-line, it can be handy to run some of these actions in the editor without switching context.

4.1. Extensions

4.2. Feature

VS Code has a Tasks feature. Tasks can be configured to run scripts you want inside VS Code through the command palette, you can customise how they are run, you can add a keybinding to them, you can run multiple scripts in a sequence, and you can run them automatically when you open a workspace.

VS Code can autodetect scripts for Gulp, Grunt, Jake, and npm. You can also run shell scripts, however they are not autodetected.

I will show you briefly how you can run NPM scripts as tasks. VS Code picks them up from your package.json.

4.2.1. Default build task

Pressing Ctrl+Shift+B or running the command Run Build Task will show you a picker of the autodetected tasks. For NPM, it narrows the list down for you:

build task command palette

Usually, the first option is the correct option.

4.2.2. Running a task

You can run a task through the Tasks: Run Task command. It will show you a list of the autodetected tasks from your workspace, and any custom tasks you created.


If you want to be run a task for a particular tool, you can use Quick Open, by pressing Ctrl + P or through the menu File > Go to File, you type “task” and hit space, and then the dropdown will show you the options for the different tools.


For my JavaScript project I pick “npm” and I get a list of my npm scripts.

npm tasks

Pick one and it will run the script.

4.2.3. Automate tasks

You can define custom tasks for your project in <project folder>/.vscode/tasks.json. You can create the file yourself, or you can run the Tasks: Configure Task command to build a template file for you by picking the option Create task.json file from template.

configure task command

You can configure a task to run when you open a project through the runOptions property. I discuss this in another article - How to run a command automatically in VS Code when you open a project. I often use this in projects to fire up a dev server whenever I open a project. This is what the tasks.json look like for that:

"version": "2.0.0",
"tasks": [
"label": "Run dev server on startup",
"type": "shell",
"command": "npm run dev",
"windows": {
"command": "npm run dev"
"presentation": {
"reveal": "always",
"panel": "new"
"runOptions": { "runOn": "folderOpen" }

4.3. Adding a shortcut for a task

If you run a task frequently, you can define a keyboard shortcut for the task.

For example, to bind Ctrl+R to the my dev server task, I could add the following to the keybindings.json file:

"key": "ctrl+r",
"command": "workbench.action.tasks.runTask",
"args": "Run dev server on startup"

The args property should match the value of the label property from the tasks.json.

You can read the user guide on Tasks to learn more about tasks.

5. Formatting code

Consistent code formatting makes code easier to read, and saves your brain parsing cycles.

If you use many different languages, you will need some type of extension for formatting, but along the way you still may be using an extension that you actually don’t need. It is not as cut and dry as the other items I have discussed, it is dependent on the particular languages you use. Let’s get into it more specifically.

5.1. Extensions

5.2. Feature

VS Code has builtin formatters for HTML, JavaScript, TypeScript, and JSON. This is a decent basis for frontend developers and JavaScript-oriented backend developers.

UPDATED: 18/05/22

Formatting for CSS, LESS, and SCSS was added in v1.66 (March 2022). You can read more about this topic in my post, VS Code - You don’t need a formatting extension (Prettier and friends).

6. Conclusion

Before you reach for an extension, see if VS Code can do it already. It sounds like an obvious move, but we are all probably guilty of doing it at one time or another. VS Code is adding features regularly, so it is worth checking the changelog every so often.