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.
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.
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.
The stock file icons are kinda meh, so add some pizzazz to Explorer sidebar with the File Icons extension.
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.
Theme your editor with one of the best syntax and colour schemes.
Adds a simple file size indicator to the status bar for the current file. This should really be baked into the editor by default.
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.
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.
Sometimes you just need a better way to view tabular data.
Manage your GitHub Pull Requests directly within VSCode.
Inline regex testing within VSCode.
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.
Need to run some arbitrary code whenever you save a file? RunOnSave is the extension for you.
Sometimes you just need to view what an SVG renders like instead of editing the code of said SVG.
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.
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.
A spell checker for code and other documents in VSCode.
Also works for BitBuckethttps://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github
The defacto code formatter supporting a wide variety of languages.
Called from the command palette, Document This will automatically document the outermost function under your cursor.
Adds better syntax highlighting to specific content within comments.
Format your Markdown files using a linting library with standard and sane defaults based on a combination of Markdown and CommonMark markup languages.
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.