VS Code: You don't need that extension part 2
Tags: vscode, tooling, productivity
Published: 2021-11-08 11:40:09

This follows on from the post [VS Code: You don't need that extension](https://dev.to/robole/vs-code-you-don-t-need-that-extension-18d7) 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.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6df2oefvqu742xdyj5in.png" alt="html example" width="882" height="478" loading="lazy"/>

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

### Extensions

- [htmltagwrap](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap) (277K installs): "Wraps selected code with HTML tags"
- [html tag wrapper](https://marketplace.visualstudio.com/items?itemName=hwencc.html-tag-wrapper&ssr=false#overview) (165K installs): "wrap selected html tag by press ctrl+i, you can change the wrapper tag name simply too."

### 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.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kv4bo1k122p04mn9ddn.gif" alt="emmet wrap abbreviation demo" width="600" height="413" loading="lazy"/>

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:

```html
<main>
    <div class="container">
        <div>Lorem....</div>
        <div>Animi...</div>
        <div>Velit...</div>
    </div>
</main>
```

## 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.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zbimukteri9b1lq05uu.png" alt="bracket colorization example" width="681" height="252" loading="lazy"/>

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

### Extensions

- [Bracker Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) (6.2M installs): "A customizable extension for colorizing matching brackets." The same author wrote Bracket Pair Colorizer 2 as a replacement with breaking changes and more emphasis on performance.
- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) (3.2M installs): "A customizable extension for colorizing matching brackets." It is now unmaintained.
- [Rainbow Brackets](https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets) (1M installs): "Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets. "
- [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) (945K installs): "Highlights matching closing and opening tags".
- [Subtle Match Brackets](https://marketplace.visualstudio.com/items?itemName=rafamel.subtle-brackets) (88K installs): "Underlined matching brackets and more".

### 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"](https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization) blog for a deep dive.

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

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlv4e5hdkljne6zul9wn.png" alt="demostration of bracket pair colorization for 6 indented levels" width="591" height="598" loading="lazy"/>

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.

### Bracket pair coloring settings summary

```yaml
"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](https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization#_tokens-to-the-rescue) 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".

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mfvgw85t170bbxezejt.png" alt="colored guides example" width="681" height="252" loading="lazy"/>

### Extensions

- [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) (2.4M installs): "This extension colorizes the indentation in front of your text alternating four different colors on each step." Indentation colorization is based on tab size.

### 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.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ok9mpj004g72sfdxoct.png" alt="indent guide colorization" width="591" height="598" loading="lazy"/>

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.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ucumkvoekmrtk3cfpra.png" alt="active indent guide" width="591" height="598"/>

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`.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcnb68fu0ci4q3w3zyc8.gif" alt="horiztonal line indent guide" width="600" height="342" loading="lazy"/>

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}` .

### Indent guides settings summary

The relevent settings are:

```json
"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.

### Extensions

- [NPM](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) (2.7M installs): "This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json."
- [Gulp Tasks](https://marketplace.visualstudio.com/items?itemName=nickdodd79.gulptasks) (39K installs): "A gulp task visualization and execution extension for Visual Studio Code."
- [Make](https://marketplace.visualstudio.com/items?itemName=technosophos.vscode-make) (31K installs): "Run Make easily."

### 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`.

#### 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:

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oe7k1zbkqzg6x0zanmm0.png" alt="build task command palette" width="734" height="223" loading="lazy"/>

Usually, the first option is the correct option.

#### 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.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nomc7v5conh37t60ien.png" alt="tasks" width="590" height="255" loading="lazy"/>

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.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ih157bl741m6kt5vbhsy.jpg" alt="tasks" width="599" height="176" loading="lazy"/>

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

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urpojx82mnk3veknllsm.jpg" alt="npm tasks" width="598" height="352" loading="lazy"/>

Pick one and it will run the script.

#### 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**.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8f08vrino79sxu9pwl3.png" alt="configure task command" width="598" height="352" loading="lazy"/>

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](https://www.roboleary.net/vscode/2020/10/19/vscode-task-onstartup.html). 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:

```javascript
{
  "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" }
    }
  ]
}
```

### 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:

```json
{
  "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](https://code.visualstudio.com/docs/editor/tasks#vscode) 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.

### Extensions

- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) (15M installs): Prettier is a very opinionated formatter with very few configuration options. It supports some languages by default: JavaScript, JSX, Angular, Vue, Flow, TypeScript, CSS, Less,  SCSS, HTML, JSON, GraphQL, Markdown, and YAML. It has a plugin architecture to extend it to more languages.
- [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) (7.3M installs): Beautify uses `js-beautify`, which is a less opinionated formatter.  It supports Javascript, JSON, CSS, Sass, and HTML. You can use a `.jsbeautifyrc` file to control the style settings.
- [HTML Format](https://marketplace.visualstudio.com/items?itemName=mohd-akram.vscode-html-format) (300k installs)
- [JSON Formatter](https://marketplace.visualstudio.com/items?itemName=ClemensPeters.format-json) (30K installs)
- Many, many more [extensions listed in the "Formatter" category in the VS Code marketplace](https://marketplace.visualstudio.com/search?target=VSCode&category=Formatters&sortBy=Installs.).

### 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.

You may be wondering why CSS and CSS-like syntaxes are not on this list, I don't know why. What i do know is that [the VS Code team does not plan to add one in the future](https://github.com/microsoft/vscode/issues/119877). Like other languages that are not in this list, you will need an extension to provide formatting for that language. While it is tempting, particularly as a frontend developer, just to install Prettier because it covers a number of languages out of the box, there are tradeoffs with this. I will discuss this in the "Other languages" section below.

#### Settings for languages with builtin formatters

To use the builtin formatters, you can add the following settings:

```json
"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript, javascriptreact, typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json, jsonc]": {
	"editor.defaultFormatter": "vscode.json-language-features"
}
```

I tried these out for a while and was pleasantly surprised. VS Code uses [js-beautify](https://www.npmjs.com/package/js-beautify/v/1.13.0) under the hood, which is also used by the [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) extension. So, you can expect similar results to that extension. Your mileage may vary for the formating of JSONC, it is asking the JSON Language Features extension to deal with "illegal" comments, but it appears to manage it without issues. I don't use React, so I can't comment how well React is formatted.

You cannot include a `.jsbeautifyrc` file in a project to control the formatting. However, there are equivalent formatting settings available. You will find formatting settings for each language with the naming convention of `"<language-name>.format.<property-name>"`. Here are a few examples:

```json
"html.format.wrapAttributesIndentSize": 2,
"html.format.templating": true,

"javascript.format.insertSpaceAfterCommaDelimiter": true,
"javascript.format.semicolons": "insert",
```

There is an [overview of the HTML formatting settings in the docs if you want to delve deeper](https://code.visualstudio.com/docs/languages/html#_formatting).

#### Other languages

The tricky thing with formatters is that they involve considerable work to maintain, it is mosty left to independent devs to create the extensions to fill the gaps. Realistically, people are not able to maintain these as side projects, so the quality varies depending on how popular a language is. This is a weak spot for VS Code.

For other languages, you have a few different options:

1. Many language support extensions are also formatters e.g. [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python), [Language Support for Java by Red Hat](https://marketplace.visualstudio.com/items?itemName=redhat.java), [Ruby](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby), [YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml), [XML Tools](https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml),  [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) for Vue, and [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) (uses Prettier under the hood). You can use one of these as your formatter.
2. You can install the [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension or the [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) extension to cover a few extra languages such as CSS. This is easy to do. However, these extensions are always loaded, regardless of the languages used in a project, because they use the `onStartupFinished` [Activation Event](https://code.visualstudio.com/api/references/activation-events) in their configuration. This is wasteful of system resources, especially if you are working on backend projects that do not use to any of their default languages that these extensions format. Of course, you can disable the extension for a workspace to ensure that they do not load. If you have a decent computer, this may not bother you.
3. If you want to use the [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension for a language that is not supported out of the box such as Java, you need to install a Prettier plugin (a node package) as a development dependency for that project. It is awkward to have node packages in a non-JavaScript backend project. If you share a project with others, having 2 or more sets of dev dependencies is a headache.
4. You can install a formatter that targets a particular language. You can search in the marketplace for a particular language in the "Formatter" category: <https://marketplace.visualstudio.com/search?target=VSCode&category=Formatters&sortBy=Installs>. These are not that common.

If you are a frontend developer, the big omission from the list of builtin formatters is for CSS and CSS-like syntaxes. The options for this are:

- You can use the [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) extension to cover you for both linting and formatting. Stylelint covers all CSS-like syntaxes. You can point to a global stylelint config in the VS Code settings.
- If you use SASS (.sass files), you probably have installed the [SASS extension](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented) for language support. This is also a formatter.
- If you use one of the UI frameworks, you probably have installed an extension for language support, which are also formatters e.g. [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) for Vue, and [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) for Svelte.
- There does not seem to be a worthwhile dedicated CSS formatter, there is the [JS-CSS-HTML Formatter](https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter&ssr=false#review-details) but it has a backlog of serious issues.
- If the above does not satisfy you, then maybe installing [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) or [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is the best option.

For backend languages, you will find that most language support extensions are also formatters. You need to try them out to see if they are satisfactory. Of course, you could choose to use a linter to cover the formatting duties for you for these languages too.

## 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.

---
Thank you for reading! Feel free to subscribe to my [RSS feed](https://www.roboleary.net/feed.xml), and share this article with others on social media. 💌 🙂