The Best VSCode Extensions for Web Development in 2020
Published: 2020-07-23 17:47:31

---
title: The Best VSCode Extensions for Web Development in 2020
published: true
date: 2020-07-13 07:00:00 UTC
tags: 
canonical_url: https://brandonb.ca/the-best-vscode-extensions-for-web-development-in-2020
---

I’ve been using [Visual Studio Code](https://code.visualstudio.com/) (VSCode for short) as my editor of choice for what feels like a [very long time](https://twitter.com/brandonb927/status/895105158979268608?s=20). Ever since I [first set eyes on the project](https://twitter.com/brandonb927/status/593532993026699266?s=20) the project and the community has intrigued me.

My primary use case for VSCode is web development and over the years I’ve amassed a very finely tuned environment and extensions list that comes with me to every computer I use. What follows is a list of the best VSCode extensions that I have installed and personally used, along with an explanation of the value each extension provides.

<!-- break -->
### Settings Sync

The _number one extension_ you need to install after you’ve installed VSCode. Settings Sync allows you to sync your VSCode settings to a private GitHub gist so that you always have your setup backed up.

[https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

Note: There is going to be a built-in “Settings Sync” [eventually](https://code.visualstudio.com/docs/editor/settings-sync) so this project may become unmaintained in time, however for right now it works amazingly.

### Project Manager

The second most important extension if you work on multiple repositories or projects. Project Manager gives you a menu where you can quickly move between projects.

[https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

### File Icons

The stock file icons are kinda meh, so add some pizzazz to Explorer sidebar with the File Icons extension.

[https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons](https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons)

### Open In Browser

If you work with HTML files a lot, this one is for you: simply open the command palette and type “open in browser” to open your HTML file in your default web browser.

[https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser)

### Tomorrow Theme Kit

Theme your editor with one of the best syntax and colour schemes.

[https://marketplace.visualstudio.com/items?itemName=ms-vscode.Theme-TomorrowKit](https://marketplace.visualstudio.com/items?itemName=ms-vscode.Theme-TomorrowKit)

### File Size

Adds a simple file size indicator to the status bar for the current file. This should really be baked into the editor by default.

[https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize](https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize)

### Word count

Adds a simple word count indicator to the status bar for the current file that updates as you type. Another extension that should really be built-in.

[https://marketplace.visualstudio.com/items?itemName=ms-vscode.wordcount](https://marketplace.visualstudio.com/items?itemName=ms-vscode.wordcount)

### Duplicate Action

I can’t believe this isn’t built-in… but this extension adds a “Duplicate” action to the right-click context in the sidebar.

[https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate)

### SSH

If you frequently ssh into machines, this extension allows you to connect to a remote host over ssh directly in VSCode! This is handy when editing config files where you don’t want to be forced to use an unconfigured version of nano or vim on the server.

[https://marketplace.visualstudio.com/items?itemName=chrmarti.ssh](https://marketplace.visualstudio.com/items?itemName=chrmarti.ssh)

### Excel Viewer

Sometimes you just need a better way to view tabular data.

[https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer](https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer)

### GitHub Pull Requests

Manage your GitHub Pull Requests directly within VSCode.

[https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)

### Regex tester

Inline regex testing within VSCode.

[https://marketplace.visualstudio.com/items?itemName=chrmarti.regex](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)

### Emojisense

You’ve likely used the “colon-word-colon” format for emoji in many pieces of software, now you can use that same familiar emoji format within VSCode.

[https://marketplace.visualstudio.com/items?itemName=bierner.emojisense](https://marketplace.visualstudio.com/items?itemName=bierner.emojisense)

### Run On Save

Need to run some arbitrary code whenever you save a file? RunOnSave is the extension for you.

[https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave](https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave)

### SVG Viewer

Sometimes you just need to view what an SVG renders like instead of editing the code of said SVG.

[https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer)

### Bracket Pair Colorizer 2

Sometimes code gets hairy, deeply nested, and overall visually difficult to grok. Fortunately, Bracket Pair Colorizer can help with making sense of your “eight-level-deep if-statement mixed with ten functions and callbacks”.

Make sure you install v2 as it comes with a significant speed improvement as it uses the built-in VSCode bracket parsing engine.

[https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2).

### Toggle

Need to toggle different settings in VSCode based on a keyboard shortcut? Now you can do that. I personally used this extension to toggle my environments for “coding for work and pleasure” and “teaching code to a class of students” which changes my window zoom level and the theme for my editor.

[https://marketplace.visualstudio.com/items?itemName=rebornix.toggle](https://marketplace.visualstudio.com/items?itemName=rebornix.toggle)

### Code Spell Checker

A spell checker for code and other documents in VSCode.

[https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

### Open in GitHub

Also works for BitBucket[https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github](https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github)

### Prettier

The defacto code formatter supporting a wide variety of languages.

[https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

### Document This

Called from the command palette, Document This will automatically document the outermost function under your cursor.

[https://marketplace.visualstudio.com/items?itemName=joelday.docthis](https://marketplace.visualstudio.com/items?itemName=joelday.docthis)

### Better Comments

Adds better syntax highlighting to specific content within comments.

[https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

### Markdownlint

Format your Markdown files using a linting library with standard and sane defaults based on a combination of Markdown and CommonMark markup languages.

[https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

### Version Lens

Used in your `package.json` files, this extension allows you to view and even update to the current latest version of an npm package, as well as the next package supported by it’s version string.

[https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)