The Only 20 VS Code Extensions Web Developers Will Need in 2025

Find the best 20 VS Code extensions for web developers. Make coding faster, easier, and more productive with these simple tools.

Hey what’s going on guys, Visual Studio Code is one of the most popular text editors, or I’d even say the most popular text editor for web developers, at least over the past few years. One of its biggest benefits is the amount of extensions and the quality of extensions that are available for it. In this list, I’m going to give you a list of VS Code extensions that I think are essential for 2025 for web developers.

For the most part, this is a language-agnostic list; some of them are geared towards the front end. But I’m going to leave out the ones like React Snippets and PHP Intelephense because those are geared towards specific languages and frameworks. I want all web developers to benefit from this list. I’m sure that a lot of you probably know a bunch of these and use a bunch of these. My hope is that you can find one or two that you maybe haven’t heard of before that you can start to use in your daily workflow and increase your productivity. All right, let’s jump in and take a look at some essential VS Code extensions for web developers.

Prettier

https://prettier.io/

We’ll start with Prettier, one of the bigger ones. Prettier is a code formatter extension for VS Code that supports almost all languages. It’s a great way to keep your code consistent and clean. It’s highly configurable, and you can basically set it up to format your code exactly how you’d like it. Anything that is out of line or formatted in a way that you don’t like, Prettier will fix them for you.

This includes adding and removing semicolons if you don’t want to use semicolons. Single or double quotes — so if you put a single quote, and you have it set to double quotes, it’ll automatically change to double quotes. You can set up a keyboard shortcut. Prettier also integrates well with ESLint.

GitHub Copilot

https://github.com/features/copilot

Next up is GitHub Copilot, which I’m fairly sure all of you are going to be familiar with. It’s an AI programmer that helps developer writes code faster. Powered by OpenAI GPT-3, which is a language model that’s trained on a wide range of internet text. I would say that this extension has completely changed the way of writing code. It’s not perfect, but it will offer suggestions for entire functions or even entire files. Again, it’s not perfect — you do have to go back and forth with it.

Just like if you have an actual person there with you, it’s not only great for productivity, but it’s a great way to learn new things as well. Another thing that you can use it for is generating sample data, so you can specify the type of data that you want, the fields that you want, and it will generate that data for you.

You can also use it for things like generating tests, creating documentation — there’s an endless amount of things that you can do with Copilot. Just be careful not to rely on it too much and make sure that you actually understand the code that you’re writing or that it’s writing for you.

Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Live Server is a must-have for web development, especially if you’re working with HTML, CSS, and JavaScript. It’s a local development server that will automatically refresh your browser when you make a change to your code. Whether it’s the HTML, CSS, or JavaScript, and this is great for seeing your changes in real time without having to manually refresh your browser. Just click the Go Live button at the bottom of the window.

Multiple Cursor Case Preserve

https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve

The next one is Multiple Cursor Case Preserve. This is a small extension, but it’s one of the most used. A lot of the time, you need to select a bunch of text and change it, whether it’s a function name, variable, or just some text within your content. You can select instances of text with Command or Control + D — that’ll select the next instance and the next one and so on, or you can select them all with Command or Control + Shift + L.

But the problem is that when you go to change that text, by default it’ll keep the casing of whatever the instance you’re changing, and in many cases there’s different casing. One might be camel case, one might be lowercase. This does exactly what it’s called — it preserves your case of all those instances of text. I use this all the time. It comes in handy, and I think that this is one that not a ton of people know about but is extremely useful.

Git History

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

Git History is a way to view the history of a file. You can see all the commits that have been made to a file, who made them, when they were made, and you can also see the changes that were made in each commit. So this is great for when you’re working on a project with a team and you want to see what changes have been made to a file over time.

GitLens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Now while we’re on the topic of Git, GitLens is another great extension. There is some overlap with Git History in terms of the functionality, but GitLens is more about seeing the history of a file as you’re working on it as opposed to seeing the history of a file over time. GitLens also has some pretty cool features like the commit graph, which shows you (a developer) the history of a file in visual way.

Another thing it does is when you click on any line of code, it’ll show you the commit as well as who made it and when. I don’t really use this in tutorials and courses because it can confuse people since it just adds text directly to the code, but it does come in handy and I use it in a lot of personal projects.

Code Runner

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

Code Runner is an easy way to run code in different languages. So if you want to run code in your terminal or the output window, it’s great for running small snippets of code without having to set up a whole project. It supports many languages, including JavaScript, Python, and Ruby. I actually use this quite a bit in my PHP course to run small snippets of PHP code.

Markdown Preview Enhanced

https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

If you write a lot of Markdown, Markdown Preview Enhanced is a great extension to use. It’ll give you a live preview of your Markdown as you write it. Now you can preview your Markdown in VS Code without any extensions, but this adds a few features like being able to see the table of contents, PDF export, syntax highlighting, preview customizations, and more. For the documentation that I add to my courses at TraversyMedia.com, I usually suggest using this to view all the documentation because it’s all in Markdown files.

Console Ninja

https://console-ninja.com/

Next up we have Console Ninja, which is a great extension by Wallaby.js. There’s a premium version with a ton of features, but I really just use this to show the result of a console log directly in the code. So if you’re running your application, whether it’s React or whatever it might be, it will show the logs directly in the editor as your page is loaded as your code runs. So it’s great when you’re working with JavaScript, and it works with frameworks like React. You know, you just want to see the console logs without having to go into the console at all.

Regex Snippets

https://marketplace.visualstudio.com/items?itemName=Nishikanta12.regex

The next one is called Regex Snippets. This will save you a lot of aggravation if you’re like me and you hate working with regular expressions and you just can’t remember them for the life of you. So it’ll give you a lot of snippets for common and not-so-common regular expressions. For instance, if you want one to validate an email, you can just do !valEmail. You can also validate URLs or alphanumeric characters, JSON, phone numbers — whatever the pattern might be. So it can really just save you a lot of headaches and save you from having to look that stuff up.

Polacode

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Polacode is an extension for taking nice-looking screenshots of your code. I used to use a site called carbon.now.sh, which is also great, but this allows you to do it right in your editor. One thing I want to mention is the docs say to just run the Polacode command and then highlight the code that you want to screenshot. Well, that didn’t work for me. I had to copy the code and then paste it into the Polacode window for it to work, and then click the button to save the image. It’s a great way to create a screenshot and share your code on social media or in a blog post or wherever you want to share it.

Code Spell Checker

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

If you suck at spelling like I do, then Code Spell Checker is a great extension. It’ll highlight any spelling errors in your code. Code Spell Checker also highly configurable, so you can set it up to ignore certain words or to use a different dictionary (US/UK). I tend to shut this off when I’m doing tutorials and courses because it can be distracting to see all the squiggly lines.

They are blue by default, which is different than the typical red or yellow squiggly lines you get for errors and warnings. You’d think it would come up with a lot of false positives since there are words in code that aren’t actual words, but it’s pretty good at distinguishing that from your actual content. Definitely something I’d recommend if you’re not a great speller like me.

Document This

https://marketplace.visualstudio.com/items?itemName=oouo-diogo-perdigao.docthis

Document This is an extension for writing documentation. It’ll generate JSDoc comments for your JavaScript functions. You can use a keyboard shortcut to generate the comments or set it up to generate the comments automatically when you type /** above a function. It’s a great way to keep your code documented and a great way to learn how to write JSDoc comments if you’re not familiar with them.

ChatGPT

https://marketplace.visualstudio.com/items?itemName=timkmecl.chatgpt

ChatGPT also has its own VS Code extension. Instead of going to the browser, it gives you this little chat icon, and it opens up on the sidebar where you can ask your questions. That’s not all it can do. If you hit Command + Shift + P and go to your command palette and type ChatGPT, you can do things like summarize text, generate code, translate text, and more. It’s a great way to get quick answers to questions or generate code snippets.

This, combined with GitHub Copilot, just makes you unstoppable — or stupider, because you’re having it do all the work for you, but I’ll let you decide.

Peacock

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Peacock is an extension you can use when working with multiple projects or multiple instances of the same project. It will change the color of the title bar, status bar, activity bar, and that stuff for each project. A good use case is if you’re working on a full-stack project with a completely decoupled front end and back end, and you have the back end open in one editor instance and the front end open in another. You can color-code those — maybe have the back end in blue and the front end in green. It just helps you keep track of your projects. If you’re doing courses like I am, it’s nice because you can let students know if you’re working in the front end or back end.

Postman

https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode

When you’re creating APIs, you need a way to test out your endpoints before you set up your front end if you’re doing the back end first or simultaneously. Postman has been my go-to client for years. I’ve used the desktop version, but now you can use it right within VS Code with their extension. You don’t have to leave your code editor at all. It’s great for testing out your APIs and seeing the responses you get. It even puts an icon right in the sidebar for convenience. You do need a Postman account, but the account is free.

REST Client

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

An alternative to Postman is REST Client, which I used to use. It works a bit differently. You create files with the .http extension, write your requests in there, and then run the requests to see the responses in the output window. It’s a great way to test APIs and also to document them. You can have a file for each endpoint and write comments in the file to explain what that request does.

Bookmarks

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

Bookmarks is a great extension for managing large files. It allows you to set bookmarks within your files, giving you the option to quickly jump between them. You can create a label and list your bookmarks via the command palette. You can also set a keyboard shortcut to jump between your bookmarks. There’s even an icon on the sidebar where it will show all the files you have bookmarks in.

Qodo Gen: AI Coding Assistant (Codium VS Code)

https://www.qodo.ai/

CodiumAI is an extension I’ve recently started using. It’ll generate tests for your code. You do need to create a free account to use it. After creating an account, go to the command palette, type Codium AI, and select “Get Started.” You’ll have options to test functions, classes, or files. It generates tests for you, and you can run them to see if your code works as expected. It also provides a full explanation of the code, including a summary, example usage, code analysis, and more.

Quokka.js

https://quokkajs.com/

Quokka is a great extension to work with JavaScript. It shows the result of your code directly in your editor. You can run the code in an output window or inline. It’s useful for testing and learning since it lets you do things faster without needing to run your code in the console or browser. There are premium features, but the free version is sufficient for many tasks. I also have a full tutorial on Quokka if you want to learn more.

Wrap-Up

That’s it for this list! I’m sure there are plenty of other extensions you use that you consider essential. I’d love to hear about those in the comments. As mentioned, I didn’t include extensions for specific frameworks or languages. Hopefully, you found something useful in this list.

Give this list many heart if you think I added value to your knowledge, and follow for more.

Don’t forget to follow me on following
LinkedIn | Medium | Bluesky