The Best VSCode Extensions for Web Development in 2020

🗓 Posted


I’ve been using Visual Studio Code (VSCode for short) as my editor of choice for what feels like a very long time. Ever since I first set eyes on the project 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.

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.

Note: There is going to be a built-in “Settings Sync” eventually 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.

File Icons #

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

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.

Tomorrow Theme Kit #

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

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.

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.

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.


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.

Excel Viewer #

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

GitHub Pull Requests #

Manage your GitHub Pull Requests directly within VSCode.

Regex tester #

Inline regex testing within VSCode.

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.

Run On Save #

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

SVG Viewer #

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

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.

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.

Code Spell Checker #

A spell checker for code and other documents in VSCode.

Open in GitHub #

Also works for BitBucket

Prettier #

The defacto code formatter supporting a wide variety of languages.

Document This #

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

Better Comments #

Adds better syntax highlighting to specific content within 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.

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.

I want to hear from you, dear reader 😄
If you enjoyed this content, please let me know on Twitter.