DEV Community

Brandon Brown
Brandon Brown

Posted on • Originally published at brandonb.ca on

The Best VSCode Extensions for Web Development in 2020

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.

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

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.

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

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

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

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

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

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

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

Excel Viewer

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

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

Regex tester

Inline regex testing within VSCode.

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

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

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

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.

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

Code Spell Checker

A spell checker for code and other documents in VSCode.

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

Open in GitHub

Also works for BitBuckethttps://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

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

Better Comments

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

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

Top comments (0)