20 Best VS Code Extensions for Web Development | Aug, 2020
Make your life easier and enjoy programming, with these extensions
VS Code is not perfect.
It’s great, but not perfect. There are still many important things missing.
Luckily, one of VS Code’s biggest strengths is it’s community, that works tirelessly to contribute the missing bits of functionality themselves.
From better git integration, through spell checkers, to integrated SVG editors. Here is a list of some of the best, the community has to offer.
Prettier — Code formatter
by Prettier • 7.9 million installs
The most popular VS Code extension for automatically formatting your code. It supports JavaScript, TypeScript, CSS, SCSS, HTML, Markdown & more.
It will use the Prettier configuration files in your project directory, and VS Code settings as a fallback.
👉 Download
ESLint
by Dirk Baeumer • 10.5 million installs
This extension integrates the popular ESLint linter into VS Code. It will help you find & fix issues with your code.
It uses the ESLint library installed in your project directory or the global installation as a fallback. You can find installation & configuration instructions on the extension page.
👉 Download
GitLens
by Eric Amodio • 6.1 million installs
This extension is an absolute must-have for any developer. It provides all of git functionality missing from vanilla VS Code. It can easily replace most standalone Git programs.
Just a few of my favorite features.
- Full Repositories View
- File & Line History View
- Current Line & Status Bar Blame
- Commit Search & Compare
The full feature list could honestly be an entire book. If you only install one extension from this list, let it be this one.
👉 Download
Visual Studio IntelliCode
by Microsoft • 6.6 million installs
This extension will move the most relevant completion suggestions to the top. It might sound like nothing but it’s actually really good. I can’t imagine living without it, and I’m certain you’ll love it too.
At the time of writing it works with JavaScript, TypeScript, Python and Java.
👉 Download
Remote Development
by Microsoft • ~6 million installs between all 3 extensions
This is actually a bundle of extensions, that allow you to open any folder in a container, on a remote machine/VM or in WSL.
I especially love using it with WSL and think it’s a must-have for any WSL coding workflow.
👉 Download the entire bundle containing all 3 extensions…
…or choose only the extensions you need
Debugger For Chrome
by Microsoft • 6.2 million installs
This extension allows you to debug your JavaScript code running in the Chrome browser, from inside of VS Code.
It also works with other browsers that support the Chrome DevTools Protocol, like Vivaldi.
Debuggers for other browsers are also available:
This extension will soon be replaced by the JavaScript Debugger, which is supposed to become VS Code’s new built-in debugger. But it’s still a good option at the moment.
👉 Download
Git Graph
by mhutchie • 605k installs
One of the only features missing from GitLens is a visual graph of your repository. But this extension fixes that.
You can view your entire commit history at a glance.
👉 Download
If you don’t like this one, you might find GitHistory to be a good alternative.
Bracket Pair Colorizer 2
by CoenraadS • 1.2 million installs
When you have a lot of brackets, braces & parentheses in your code, it can get difficult to find where each code block starts and ends.
It allows you to easily find what scope you’re in, by marking matching bracket pairs with the same color.
You can even customize the colors and which tokens to match.
There are two versions of this extension, and even though the 1st one still has more downloads, you should be using version 2. It’s faster and more accurate.
👉 Download
If you want to take the 🌈 rainbow powers to the next level, check out Indent Rainbow. It does the same thing but to the indentation in front of your code.
Colorize
by kamikillerto • 130k installs
Helps you visualize CSS colors. Works even with pre-processor variables & CSS custom properties.
If you use CSS-in-JS libraries like styled-components or emotion, you should add JavaScript to the languages array in settings.json
"colorize.languages": [
/* ... */
"javascript",
"javascriptreact",
/* if you use typescript */
"typescript",
"typescriptreact"
]If you want to add other languages as well, check out all language identifiers available.
👉 Download
Color Picker
by anseki • 580k installs
If you work with CSS a lot, this one is for you. It allows you to modify & convert any color, using any color space and notation.
Unlike the built-in color picker it works in any file so it’s perfect if you use CSS-in-JS.
There are multiple styles of the picker widget, from compact to extra large, with all of the fancy stuff.
👉 Download
Note: If the color picker doesn’t show correctly, try this (from official extension page):
- If the dialog box is not shown correctly, set
colorHelper.disableGputo1. - If that wasn’t solved yet, set
colorHelper.disableShadowtotrue. - If that wasn’t solved yet, set
colorHelper.disableTransparenttotrue. - If that wasn’t solved yet, please visit support page.
TODO Highlight
by Wayou Liu • 1.1 million installs
I love adding TODO comments in my code, but I often forget about them. If you're anything like me, this extension will be a lifesaver for you.
It highlights all of the TODO and FIXME and other annotations in a way that's impossible to miss.
On top of that, it’s completely customizable.
👉 Download
Code Spell Checker
by Street Side Software • 1.6 million installs
Why would I need a spellchecker for code? — Me, not that long ago
It’s actually really helpful. It helps you avoid embarrassing typos in variable names, comments, and most importantly: body text. If you hover the underlined word and click “Quick Fix” it will show you suggestions and allow you to add the word to your dictionary.
What surprised me the most was how good it deals with camelCase and other common ways we name variables and functions.
By default, the extension only supports English, but there are many add-on dictionaries available. Just search for “Spell Checker” on the extensions marketplace and you’ll find them.
👉 Download
If you’re installing many extensions your status bar might get pretty crowded. Here’s a tip on how to tame that mess 👇
Version Lens
by pflannery • 476k installs
I’m surprised that more people don’t know about this extension.
It shows you the latest versions of all NPM packages in your package.json. It even provides autocomplete for package versions so you can see exactly what versions are available without checking on NPM.
👉 Download
GitHub Pull Requests and Issues
by GitHub • 680k installs
If you work with GitHub pull requests and issues a lot, you should check out this official GitHub extension.
Among other things, it allows you to browse and interact with PRs directly from VS Code.
👉 Download
Svg Preview
by Simon Siefke • 40k installs
A great way to preview your custom SVG icons and illustrations. You can even edit the SVG code and see the changes live.
Use the mouse to move the image around and the mouse wheel to zoom in/out.
The extension provides two options: “Auto Open” & “Scale To Fit”. I recommend turning off “Auto Open” as it can get pretty annoying. You can open the preview by using the keyboard shortcut ctrl+alt+p or by using the button on the tabs bar (like you would with markdown).
You can also provide custom styles for the preview, instructions are on the extension page.
👉 Download
Toggle Quotes
by BriteSnow • 39k installs
The name says it all. It allows you to toggle through different quotes with a keyboard shortcut.
Especially useful when you want to quickly replace a normal string with a template literal.
👉 Download
change-case
by wmaurer • 328k installs
Next up in the simple but awesome category: change-case. It allows you to… You guessed it: change case 😛.
It allows you to quickly switch between camelCase, snake_case, CONSTANT_CASE and more.
You can change the case directly from the command palette. But the best way to use it in my optinion is to bind the extension.changeCase.commands command to a keyboard shortcut. It opens a dropdown with all possible conversion options, with previews.
And yes, it supports multiple cursors.
👉 Download
Windows Terminal Integration
by Daniel Imms • 2k installs
If you’re programming on windows, and you’re not using the new Windows Terminal, you’re missing out.
This simple extension allows you to open any folder from the VS Code sidebar in the Windows Terminal. And the best part? You can even choose the profile. CMD? PowerShell? Bash? The choice is yours.
👉 Download
Project Manager
by Alessandro Fragnani • 1.1 million installs
It’s a pretty straightforward extension that allows you to save and quickly change between your projects.
👉 Download
Import Cost
by Wix • 730k installs
This extension will remind you to slow down if you go import-crazy 🤪
It’s not something I keep enabled all the time, and it doesn’t give you an accurate view of how large your bundles will be, but I like turning it on from time to time,
👉 Download
Thanks for reading. If I missed your favorite extension, let me know in the comments, and I might add it to the list.
