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

Source

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

Source

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

Source

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

Source

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

• Remote — SSH
• Remote — Containers
• Remote — WSL

Debugger For Chrome

by Microsoft • 6.2 million installs

Source

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:

• Debugger For Firefox
• Debugger For Edge

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

Source

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

Source

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

Source

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

Source

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):

1. If the dialog box is not shown correctly, set colorHelper.disableGpu to 1.
2. If that wasn’t solved yet, set colorHelper.disableShadow to true.
3. If that wasn’t solved yet, set colorHelper.disableTransparent to true.
4. If that wasn’t solved yet, please visit support page.

TODO Highlight

by Wayou Liu • 1.1 million installs

Source

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

Source

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

Source

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

Source

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

Source

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

Source

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.

Other articles you might find interesting:

11 Best Free Programming Fonts 2020

Custom List Styles Using ::marker

20 CSS Selectors You Need to Know