Productive VS Code - Lesson #6

31 Best VS Code Extensions for Web Development

31 Best VS Code Extensions for Web Development

VS Code has been out a while now and has accumulated a massive amount of great extensions. Finding the best extensions can be tough so I've put together a list of the tried and true extensions. These best extensions are segmented into some important sections and they lean a little bit to JavaScript development since that's what I primarily code in.

I also made a video on my personal VS Code setup:

These best VS Code extensions are separated into:

  • Snippet Extensions
  • Tools Extensions
  • Linters and Formatters Extensions
  • Visual Extensions
  • IntelliSense Extensions
  • GitHub Extensions
  • Random Extensions

Let's explore the best VS Code extensions.

This extensions comes with a multitude of helpful JavaScript extensions. The one I use the most is clg to add in a quick console.log().

View on the VS Code Marketplace

I use console.log() a lot and this extension makes it a quick shortcut to add a console.log() to VS Code. Highlight the variable that you want to log and activate this extension through the command palette.

View on the VS Code Marketplace

2. Turbo Console Log

GitHub Copilot is the AI pair programmer that excels at providing hints at which code snippets you may want to use. It's like being able to search StackOverflow right inside of VS Code.

Some of the time, it gives some outrageous snippets. This is due to it being backed by AI. But when it works (and it often works well), it is magical.

View on the VS Code Marketplace

Live server is an extension that allows us to run a local server with live reload features to develop on our sites. Since I usually work in React or Next, those come with their own development servers. I will use Live Server usually when working with HTML sites.

View on the VS Code Marketplace

Live Server

Live Preview puts a browser right inside of VS Code so that you don't have to switch between windows while coding.

View on the VS Code Marketplace

Live Preview

A helpful extension to see how many bytes each of the package you have imported will cost your application and more importantly, your users.

View on the VS Code Marketplace

Import Cost

I use this extension to speed up my JavaScript development. It doesn't do much, but it does make it easier to refactor some code. It can do things like:

  • Replace a string with a template string
  • Convert a named function to an arrow function
  • Convert an arrow function to a named function
  • In React, wrap certain things with JSX brackets {}
  • More helpful utilities

View on the VS Code Marketplace

JavaScript Booster

In your VS Code sidebar, list all the TODOs in your code. This extension makes it easy to see all the things that are needed to do in your repo.

View on the VS Code Marketplace

TODO Tree

Quickly insert emojis into your code with this extension.

View on the VS Code Marketplace

EmojiSense

This extension is an absolutely required extension when working in VS Code. This extension catches so many errors that you can't even tell if you've made a mistake or not.

It's a great way to catch your own errors and it's also a great way to enforce certain code rules when working on a team.

View on the VS Code Marketplace

ESLint

Prettier is another extension that I believe is a must have for any developer. It is an opinionated formatter that will move your code around for ideal readability.

It's especially useful when you turn on "Autoformat on Save". You will never have to worry about formatting your code again. Admittedly, I hated using "Autoformat on Save" since I was a fan of formatting my own code a certain way. But after trying Prettier for a week, I just let go and let Prettier do its thing. It will save you time in the long run.

View on the VS Code Marketplace

Prettier

EditorConfig is an extension that helps to enforce similar rules across a repo. For instance, we can force our editor to always use 2 spaces instead of 4 spaces or tabs when working with JavaScript. This is especially helpful when working with a team and you want to enforce consistent code style across your team.

View on the VS Code Marketplace

editorconfig

Code Spell Checker is an extension that will check your code for any common spelling errors. This doesn't only mean code. It works well when checking your markup. If you write articles in markdown and inside of VS Code, this extension will help out your writing.

View on the VS Code Marketplace

Code Spell Checker

A good visual extension to add some color highlights to your code. If the extension sees anything that resembles a color, it will highlight it.

View on the VS Code Marketplace

Quickly see what your CSS classes are doing with this extension. You can peek at the class properties and you can also see them by hovering over the class name.

View on the VS Code Marketplace

CSS Peek

This extension helps us with readability. If you have a lot of closing </div> tags, this extension will add comments so that you can see which divs are closing what section.

View on the VS Code Marketplace

HTML End Tag Labels

Make your comments stand out better by highlighting and colorizing them.

View on the VS Code Marketplace

Better Comments

This extension helps to show where your brackets are. It will highlight open and closing brackets with the same color.

View on the VS Code Marketplace

Bracket Pair Colorizer

Peacock is an extension that lets you change the colors of your VS Code's menu bar, sidebar, and status bar. If you have multiple VS Code instances open, change the colors of all of them so you can identify the projects easier.

View on the VS Code Marketplace

Let VS Code autocomplete your path. When you go to import a file, VS Code will read your file system and provide IntelliSense for your files and folders.

View on the VS Code Marketplace

Path IntelliSense

Version Lens will look at your package.json file and show you the version of your dependencies. It will also show you the packages that have updates available. You can then update your packages with a single click.

View on the VS Code Marketplace

Version Lens

View on the VS Code Marketplace

GitHub Pull Requests

This extension pack reminds me of the days we had to upload our entire sites to our web servers through FTP. With these extensions, we can edit code that doesn't live on our own computers and file systems.

We can edit code on a remote VM using Remote - SSH, edit container based applications with Remote - Containers, and if you're on Windows, edit code on WSL machine with Remote - Windows.

View on the VS Code Marketplace

Remote Repo

A small utility extension that I use daily. Right click anywhere on a file and you can click through to the GitHub page for that file. It is often useful for when you need to open up the git repo.

View on the VS Code Marketplace

gitlink

View the history of your git repo including branches, commits, merges, and more. A good visual way to see what changes have been made to your code.

View on the VS Code Marketplace

Git History

A small utility extension that will show what changes have happened to your repo right in the VS Code status bar.

View on the VS Code Marketplace

Git Indicators

An extension that I use every day to switch between all my projects. It can even watch an entire folder for all the git repos in that folder. You can quickly switch between projects using your VS Code command palette.

View on the VS Code Marketplace

It's like POSTman but inside of VS Code and much faster. It will let you send HTTP requests to your servers and APIs and see the response.

View on the VS Code Marketplace

Thunder Client

MetaGo is a useful extension to jump around your code quickly. If you want to jump to a specific word, you can activate MetaGo and jump to that word.

It helps us be more productive since we don't have to grab our mouse as much. We can keep our hands on the home row of our keyboard.

View on the VS Code Marketplace

MetaGo

For the Vim users out there, there are two major VS Code extensions to bring vim bindings into VS Code. The first is amVim which is a vim plugin for VS Code. The second is Vim which is a vim plugin for VS Code.

I personally like the amVim extension since it is less intrusive than the main Vim extension. Try both and see which fits your workflow.

View on the VS Code Marketplace

amVim

A quick extension to generate random content right from your command palette.

View on the VS Code Marketplace

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.