31 Best VS Code Extensions for Web Development
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.
clg to add in a quick
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.
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.
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.
Live Preview puts a browser right inside of VS Code so that you don't have to switch between windows while coding.
A helpful extension to see how many bytes each of the package you have imported will cost your application and more importantly, your users.
- 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
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.
Quickly insert emojis into your code with this extension.
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.
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.
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.
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.
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.
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.
Make your comments stand out better by highlighting and colorizing them.
This extension helps to show where your brackets are. It will highlight open and closing brackets with the same color.
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.
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.
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.
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, edit container based applications with , and if you're on Windows, edit code on WSL machine with .
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 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.
A small utility extension that will show what changes have happened to your repo right in the VS Code status bar.
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.
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.
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.
For the Vim users out there, there are two major VS Code extensions to bring vim bindings into VS Code. The first iswhich is a vim plugin for VS Code. The second is 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.
A quick extension to generate random content right from your command palette.
Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.
What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)