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
It will use the Prettier configuration files in your project directory, and VS Code settings as a fallback.
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.
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.
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.
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
It also works with other browsers that support the Chrome DevTools Protocol, like Vivaldi.
Debuggers for other browsers are also available:
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.
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.
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.
by kamikillerto • 130k installs
Helps you visualize CSS colors. Works even with pre-processor variables & CSS custom properties.
/* ... */
/* if you use typescript */
If you want to add other languages as well, check out all language identifiers available.
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.
Note: If the color picker doesn’t show correctly, try this (from official extension page):
- If the dialog box is not shown correctly, set
- If that wasn’t solved yet, set
- If that wasn’t solved yet, set
- If that wasn’t solved yet, please visit support page.
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
FIXME and other annotations in a way that's impossible to miss.
On top of that, it’s completely customizable.
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.
If you’re installing many extensions your status bar might get pretty crowded. Here’s a tip on how to tame that mess 👇
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.
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.
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.
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.
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
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.
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.
by Alessandro Fragnani • 1.1 million installs
It’s a pretty straightforward extension that allows you to save and quickly change between your projects.
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,
Thanks for reading. If I missed your favorite extension, let me know in the comments, and I might add it to the list.
Other articles you might find interesting:
11 Best Free Programming Fonts 2020
Find your new favorite programming font, with coding ligatures & open source.
Custom List Styles Using ::marker
Make your lists stand out with just a few lines of modern CSS