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.
It would be nice to just select the block and run a command to wrap it with the main tags.
1.1. Extensions
- htmltagwrap (277K installs): “Wraps selected code with HTML tags”
- html tag wrapper (165K installs): “wrap selected html tag by press ctrl+i, you can change the wrapper tag name simply too.”
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.
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:
<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.
Quite a few extensions have filled this role in some way or another.
2.1. Extensions
- Bracker 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.
- Rainbow Brackets (1M installs): "Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets. "
- Highlight Matching Tag (945K installs): “Highlights matching closing and opening tags”.
- Subtle Match Brackets (88K installs): “Underlined matching brackets and more”.
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.
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”.
3.1. Extensions
- 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.
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.
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.
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.
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
- NPM (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 (39K installs): “A gulp task visualization and execution extension for Visual Studio Code.”
- Make (31K installs): “Run Make easily.”
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:
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.
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.
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
- Prettier (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 (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.jsbeautifyrcfile to control the style settings. - HTML Format (300k installs)
- JSON Formatter (30K installs)
- Many, many more extensions listed in the “Formatter” category in the VS Code marketplace.
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.