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 BitBucket 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
Document This #
Called from the command palette, Document This will automatically document the outermost function under your cursor.
https://marketplace.visualstudio.com/items?itemName=oouo-diogo-perdigao.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