16 Top VS Code Extensions for Web Developers

16 Top VS Code Extensions for Web Developers

Microsoft Visual Studio Code (VS Code) is one of the top code editors for software developers. Since its release, its popularity has surged not only because of the stable platform it provides but also because of the extensible nature that Microsoft built into it. The extensions marketplace is a cornucopia of add-ons and features that allows developers to customize the VS Code into the development environment of their dreams. We want to break down some of the top VS Code extensions available today so that you don’t miss any.

1. Sublime Text Keymap and Settings Importer

Topping our list is the aptly titled Sublime Text Keymap and Settings Importer. In case the title wasn’t descriptive enough, this extension lets you pull in your existing Sublime Text keymaps and settings so that you can seamlessly transition into using VS Code as your default. Since so many people love Sublime and have spent years at it, making VS Code keep the earned muscle memory from that editor makes a lot of sense.

2. JavaScript (ES6) Code Snippets

Typing JavaScript (or any code) can become cumbersome when you repeat the same snippets over and over again. This extension helps relieve that by letting you basically write shortcuts for often-used code snippets. When triggered, the snippet simply replaces the text and inserts it directly into the document.

3. Bracket Pair Colorizer 2

Regardless of the language you code, brackets are probably going to be a major part of it. And keeping them straight can be a headache. But with this VS Code extension, you can color code the matching pairs to help ease that pain point and work on making the code itself works — not the editor.

4. ESLint

In many ways, ESLint is the linter for JavaScript. Catching errors and giving you immediate feedback and warnings is essential to keeping your team’s code clean, and there’s really no better way to do that in JS than ESLint. We highly recommend installing this one as soon as possible.

5. Project Manager

An issue with the VS Code that arises pretty often is how to swap between different projects. By default, the flow is not exactly the most intuitive. So Project Manager works to fix that issue by giving you a menu in the sidebar that you can use to save different folders and Git projects to easily swap between. This isn’t so much an editor improvement as it is a quality-of-life bump.

6. Browser Preview

One of the more obnoxious elements of web development is loading and refreshing your content in different browsers for testing. Browser Preview helps limit the amount you need to do this by giving you a solid preview of your work inside VS Code itself in a new Chrome process.

7. Prettier

We all want prettier code. So we should probably all install Prettier to handle that for us. The description describes Prettier as an “opinionated code formatter, it enforces a consistent style by parsing your code and re-printing it with its own rules that take maximum line length into account, wrapping code when necessary.” You might not want to use it for every language or project, so there are plenty of configuration settings so you can customize it to your liking.

8. gitlink

We like gitlink because of its simplicity. While there are plenty of Git extensions out there, one of the things about gitlink is that it’s simple and does just one thing. And it does it well. Just highlight a snippet of code, and get a link will then take you to the online repo for that particular snippet. It is incredibly useful to quickly Go To your repo no matter where it’s hosted remotely.

9. Better Comments

Commenting on your code is one of the most important habits a developer can have. Even more than that, commenting your code well is a skill that should be taught in every computer science classroom and coding Bootcamp out there. That said, Better Comments is one of those VS Code Extensions that everyone needs because it will if you believe the name, let you leave better comments in your code. With shortcuts that let you differentiate between questions, exclamations, commented-out code, queries, alerts, highlights, and TODOs, this extension will not only make your life easier, but it will also make your team’s life easier. And any developer who comes after you on the project. We cannot recommend this enough.

10. VS Code Icons

A major part of customizing VS Code with extensions is actual customization. Not just functionality changes. With VS Code Icons, the editor becomes a bit more colorful and easier to navigate. The file system is skinned with icons representing various file types, and these show up in the explorer as well as the document tabs themselves. It makes working your way through complicated file systems much easier and less of a headache. Literally sometimes. The icons being so easy to read prevents eyestrain and thus headaches. So for your health, install VS Code Icons.

11. Auto Close Tag

Maybe it’s us, but typing in the closing tags for any language becomes such a chore. There’s just something about adding that / in on the end that makes the keystrokes just feel a little off. Never fear. Auto Close Tag has made our lives easier. So we want to make yours easier. It’s simple and easy and you can keep typing between them and simply keystroke your way to the next line or to the end of that one. Install this and give your fingers a break from the gymnastics of closing tags manually.

12. colorize

CSS is great. Choosing colors in CSS is not. When you’re dealing with hex codes and RGBA values, it’s sometimes hard to get a mental picture of just what palette you’ve set for a site. This extension helps alleviate that by providing a visual note for any color codes you use inside your files. You can see the colors that you’re using inside the text itself as a highlight so that you don’t have to constantly be swapping back and forth from swatches and color selectors and so on.

13. Polacode

Polacode is like a Polaroid camera for your code editor. Designed to make snapshotting your code cleaner and easier, this is a must for any tutorial writers who want their code to be just right.

14. GitLens

It’s hard to really fully explicate what makes GitLens so great. It works as though Git and VS Code were designed with each other in mind, and instead of working through command line hierarchies, you get visualizations and insights that take a lot of the confusion out of team Git work. You can view things via hover, see recent changes and annotations, comparison views within VS Code itself, heatmaps, line history, and so much more. It’s basically the perfect Git extension, and we think you should install it pronto.

15. Live Server

Have you ever wanted to launch a local dev server from within your IDE and work on it in real-time? No matter how you answered that question, you will want to give Live Server a shot. Because that’s precisely what you can do with it. While it might not completely remove the need for products like Local by Flywheel and MAMP, it certainly cuts down on their necessity in many situations.

16. Beautify

Beautify uses the popular js-beautify to keep your JavaScript looking nice and tidy. Don’t worry about broken lines and weird spacing and indents. Just click a button, and all your code will be ready for its close-up (maybe with Polacode from above).

Conclusion

This list could be thousands of items long. In fact, there are probably some of you who have hundreds of different extensions installed that you enable and disable at different times. But we feel like these are the VS Code extensions that you can install and then learn what else you want as you dig deeper into the marketplace.

What are your go-to VS Code extensions? Let us know in the comments!