20 Essentisal VS Code Extensions In 2024

VS Code has been one of the most popular text editors or, I'd even say, the most popular for web development for the past few years. One of its biggest strengths is the amount of extensions that are available for it. In this article, I want to review some of the extensions that I use and think are essential for web development in 2024. This is not a ranked list and for the most part, these extensions are language agnostic, but a few of them do relate to front-end development.

I'm sure many of you already use some of these extensions, but I'm hoping you'll find at least one or two that you haven't heard of before. 

To watch the video version of this article, click here

Prettier

So we'll start with some of the big ones. Prettier is a code formatter that supports many languages. It's a great way to keep your code consistent and clean. It's also highly configurable, so you can set it up to format your code exactly how you like it.

Basically, Prettier will fix anything that is out of line or formatted in a way that you don't like. This includes adding or removing semicolons, single or double quotes, and more. You can have it so that it auto formats on save, or you can set up a keyboard shortcut to format your code.

Prettier also integrates well with ES Lint. If you're interested, I have a video showing you how to set those up.

GitHub CoPilot

Next up is GitHub CoPilot. Which I'm fairly sure all of you are familiar with. It's an AI pair programmer that helps you write code faster. It's powered by OpenAI's GPT-3, which is a language model that is trained on a wide range of internet text.

I would say that this extension has completely changed the way that I write code. It's not perfect, but it will offer suggestions for entire functions or even entire files. Again, it's not perfect, so you have to kind of go back and forth with it, so it's literally like having a pair programmer. It's not only great for productivity, but it's a great way to learn new things as well. Another thing that I use it for is generating sample data. So I can specify the type of data that I want, the fields that I want, and it will generate the data for me. You can also use it to generate tests, create documentation. There's and endless amount of things that you can do with CoPilot. Just be careful not to rely on it too much and to make sure that you understand the code that you're writing. Also, I have a full tutorial on CoPilot if you want to learn more about it.

Live Server

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 changes to your code. This is great for seeing your changes in real time without having to manually refresh your browser. You can start it up with a keyboard shortcut, by right-clicking on an HTML file and selecting "Open with Live Server" or by clicking the "Go Live" button at the bottom of the window.

Multiple Cursor Case Preserve

This is a small one, but it's one of my most used extensions. A lot of times, we need to select a bunch of text and change it, whether it's a function name, a variable name, or just some text within your content. You can do this with cmd+d or ctrl+d to select the next instance of the word or you can select all instances at once by pressing cmd+shift+l or ctrl+shift+l. The problem is that when you change the text, by default it will keep the case of the first instance that you selected. This extension will make it so that it preserves the case of the text that you're changing. It's a small thing, but it's a huge time saver.

Git History

Git History is a great way to view the history of a file. You can see all of the commits that have been made to a file, who made them, and when they were made. You can also see the changes that were made in each commit. 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.

Git Lens

While we're on Git, Git Lens is another great extension. There is some overlap with Git History, but Git Lens is more about seeing the history of a file as you're working on it than seeing the history of a file over time. It also has some cool features, like the commit-graph, which shows you the history of a file in a visual way. Another thing it does is when you click on any line of code, it will 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 by adding text directly to the code.

Code Runner

Code Runner is an easy way to run code in many different languages. You can run code in the terminal or in 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, Ruby and more. I actually used this quite a bit in my PHP course to run small snippets of PHP code.

Enhanced Markdown Preview

If you write a lot of markdown, this is a great extension. It will give you a live preview of your markdown as you write it. 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.

Console Ninja

Console Ninja is a great extension by Wallaby. There is a premium version with a ton of features but I really just use it to show the result of a console.log directly in the code. This is great for when you're working with JavaScript and you want to see the result of a console.log without having to run it and open the console.

Regex Snippets

If you work with regular expressions and can't remember them for the life of you, this is a great extension. It will give you snippets for common regular expressions.

Here are some examples:

• !valemail - Validates an email
• !valurl - Validates a URL
• !valalphnum - Validates alphanumeric characters
• !valjson - Validates JSON
• !valphone - Validates a phone number

There are tons more, but those are just a few examples.

Polacode

Polacode is used for taking screenshots of your code. The docs say to just run the Polacode command and then highlight the code that you want to screenshot. That didn't work for me, I had to copy the code I want and then paste it into the Polacode window. Then click the button to save the image. It's a great way to share code on social media or in a blog post.

Code Spell Checker

If you suck at spelling like I do, the Code Spell Checker is a great extension. It will highlight any spelling errors in your code. It's also highly configurable, so you can set it up to ignore certain words or to use a different dictionary. I tend to shut this off when I'm doing tutorials because it can be distracting to see all of the squiggly lines. They are blue by default, which is different than the typical red or yellow squiggly lines that you see for errors and warnings.

Document This

Document This is an extension for writing documentation. It will generate JSDoc comments for your JavaScript functions. You can use a keyboard shortcut to generate the comments or you can 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 it's a great way to learn how to write JSDoc comments if you're not familiar with them.

ChatGPT

ChatGPT also has it's own VS Code extension. Instead of going to the browser, it gives you this little chat icon and opens it up in the sidebar where you can ask your questions. That's not all you can do though. If you hit the cmd+shift+p or ctrl+shift+p 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 to generate code snippets. This, combined with GitHub CoPilot, just makes you unstoppable. Or stupider because you're having it do all the work. I'll let you decide.

Peacock

Peacock is helpful when you're working with multiple projects or multiple instances of the same project. It will change the color of the title bar, status bar, and activity bar for each project. A good use case for this is if you're working on a full-stack project and have the front and back end open simultaneously. You can, for example, set the front end to be blue and the back end to be green and keep track of which project you're working on.

Postman

When creating APIs, it's great to be able to test them out without having to set up a front end. Postman is my goto client and I've used the desktop version for years, but now you can use it right within VS Code. It's great for testing out your APIs and seeing the response that you get. It even puts an icon right in your sidebar for convenience As far as I know, you do need a Postman account and you have to login to use it, but it is free to use.

REST Client

An alternative to Postman would be REST Client, which works in a bit of a different way. You create files with the extension .http and you can write your requests in there. You can then run the requests and see the response in the output window. It's a great way to test out your APIs but also to document them. You can have a file for each endpoint and you can write comments in the file to explain what the request does.

Bookmarks

Bookmarks is a great extension for working with large files. You can set bookmarks in your files and then jump between them. You can create a label and then list your bookmarks via the command palette. You can also set a keyboard shortcut to jump between your bookmarks. You get an icon on the sidebar that shows you all of the files that you have bookmarks in.

Codium AI

Codium AI is an extension that will generate tests for your code. You do have to create an account, but it is free to use. After you create an account, you can go to the command palette and type Codium AI and then Get Started. Then you'll have an option to test functions, classes, or files. It will generate tests for you and then you can run them to see if your code is working as expected. It will also give you a full explanation of the code including a summary, example usage code analysis and more.

Quokka

Quokka is a great extension for working with JavaScript. It will show you the result of your code directly in the editor. You can run your code in the output window or you can run it inline. I find it really useful for testing and just learning. It lets you do things faster because you don't have to run your code in the console or in a browser. There are premium features that you can pay for, but there's a lot that you can do with the free version. I have a full tutorial on Quokka if you want to learn more about it.

That's it! To use any of these extensions, just click on the icon in the sidebar of VS Code, search for it and then install it.