5 essential VS Code extensions for web development

So, a while ago I’ve written a post, where I’ve compared, in my opinion, some of the best VS Code themes available. It received pretty positive feedback, and so today, we’ll be doing something in a similar vibe. To be a bit more specific, we’ll look into what I consider 5 of the most essential VS Code extensions for web development. To be honest, this list is based solely on what I use almost every day in my workflow, so your preferences might still be a little different. However, I hope that you’ll find all (or at least some) of these extensions worth-installing or already installed in your favorite code editor. Without further ado, let’s get on to the list!

Polacode

To organize this list a little, let’s start with extensions that usefulness heavily depends on the way one uses his code editor. Polacode is one of them. It’s a simple extension that allows to quickly make beautiful images of your code.

You might know Carbon - an online web app that does a similar thing. You simply drop your code, configure syntax highlighting and other settings, and you’ve got your shot! Polacode is inspired by it, with a difference being that instead of manual configuration, Polacode stylizes your images based on the very VS Code theme that you’re using! You don’t have to configure anything - you just set your theme-of-choice (or use the already-set one), select the file or piece of code that you want, and run the Polacode command. Given the number of VS Code themes available (you can read about some of them here), you shouldn’t have any problems with choosing one for your shot. Apart from that, you still have some options to configure it if you want.

So, how can that be useful? Well, if you’re like me and you often need to showcase some pieces of your code, Polacode provides you with an easy way to do that. You don’t even have to leave your code editor! Especially when the inability to copy code is not an issue (e.g. in videos or presentations) tools like Polacode or Carbon can be used to get the job done. The window and shadow effects that they apply to your snippets look great and can help you make a positive impact on your audience.

Code Spell Checker

I know, I know - not everybody has to care about grammar. But trust me, reading a well-written code should feel like a poem, and to achieve this perfection, you have to use meaningful variable names - together with correct grammar (and a few other things).

Code Spell Checker (let’s call it CSC for short) is the most popular and arguably the best spell checking extension for VS Code. Out of the box, it comes with an English dictionary and support for quite a few programming languages (all web-dev included). About 90% of the time, it should be more than enough. If you want to use a language other than English, you can install additional language packs that have a form of VS Code extensions (there’s more than 15 of them).

So, how the extension feels in day-to-day use? Well, it’s pretty good actually. Surely all the red highlighting can drive you mad sometimes, but it’s not that bad. Any words that aren’t already defined in the dictionary, can be added with only 2 clicks. The extension also does well, when working with different “casing styles” (like camelCase or snake_case). You might take it for granted, but some extensions don’t provide such a functionality.

To wrap it up, if you care about grammar in your code, you should use CSC.

Prettier

Alright, so now we’re getting into the “obvious” territory. If you’ve done some serious web development before, there’s a high chance that you’ve heard of/used Prettier - “an opinionated code formatter”. It’s extremely popular within the open-source community, and it’s capable of formatting a lot of different web-dev-related languages.

Before getting into the extension itself, let’s talk about the formatter. Prettier’s unique property is that it’s biased. Instead of extending user customizability, it limits it. You still can configure only some options, but you don’t any control over a great many things. You can only accept the reality as it is.

At first glance, it doesn’t sound too pleasing, does it? But, trust me - it’s a good tool. The default, forced options aren’t bad, and they help keep consistency throughout your code. That’s why Prettier has seen wide adoption in the OSS community - because of being consistent. Large (especially open-source) codebases require proper treatment to keep them “usable”. That’s where Prettier shines.

The extension itself is OK. It’s the tool underneath that matters, but the outer “shell” does its job well. It works just like the default VS Code formatter - you simply have to choose it from the list. Then you can use it through the Format... command or make it run on file save by adjusting certain VS Code options. The extension respects all forms of Prettier configuration and // prettier-ignore comments

Whether you’ll use Prettier or not depends entirely on your preferences. If you like its “opinionated” style then you’ll most likely enjoy it. Personally, I use it almost everywhere, excepts in parts where I write long template literal expressions. Prettier just doesn’t work well with them, so keep that in mind.

ESLint

While Prettier can only format your code, ESLint can do the same… and a lot more! It’s a tool that validates (and sometimes even fixes) your code according to a given set of rules. To keep it short - it’s a linter. Without a doubt, it’s the best and most popular JS linter available. Its pluggable and versatile nature makes it suitable for a variety of use-cases.

You can make your own ESLint config by selecting rules from the “official” rules set. You can also create and use custom rules through ESLint plugins, or build upon numerous sharable configs available on NPM. Either way, you can learn more about the whole process of creating an ESLint config in one of my previous posts.

ESLint extensions (the one with >6M of downloads) keeps things simple. It can be configured through the VS Code settings menu, to enable fix on save and other interesting features. The extension focuses mostly on highlighting and informing you about all the errors. If you have too much red in your code, a nice functionality is that you can disable or enable the linter with a simple command. There’s also a command to fix all “fixable” issues, but it doesn’t always work as intended.

To summarize, if you’re already using ESLint and VS Code, just install the extension. If you haven’t used a linter before, maybe it’s a good time to start using one, which brings us back to ESLint and closes the circle.

GitLens

If you’re one of those who don’t care about fancy-looking code images, grammar or even code style, for that matter, then this is probably the only extension that you may find useful. GitLens is an extension that “supercharges” Git capabilities of VS Code. While some might consider the built-in functionalities of VS Code or the sheer terminal enough for their use-cases, GitLens integrates with the code editor in a surprisingly pleasing way that I think would benefit every one of its users.

GitLens comes with a lot of features. The most noticeable ones are probably the dedicated tab in the VS Code activity bar and all the controls in the top section of any opened and Git-integrated file. In the tab, you have control over your Git repos, commits, history, and all that stuff. The top bar, on the other hand, gives you access to all the changes, revisions, and blame messages specific to the opened file.

Nowadays, Git is a must-have. Not only it makes your work easier and more reliable, but it also ensures that every change you’ve done to your project is remembered and can be reversed when needed. You can use a different Version Control System (VCS), but Git is arguably the best choice. So, if you use Git (which you should), then you’ll certainly find GitLens… appealing, to say the least.

Suggestions

So, that’s my list! I didn’t want to make it too long, because you know - the more extension the merrier, but only to a certain point. If you won’t keep in within rational limits (depending on your hardware), your editor might turn into a resource-hungry monster. Either way, let me know in the comments section below if there’s any other “essential” extension worth mentioning. I skipped all themes and other “meta” extensions, such as intellisense on purpose. I think there’s no use in talking about themes that were discussed in a previous article or to focus on stuff like paths or NPM intellisense. Most of VS Code users have stuff like that already installed and don’t notice it much anyway.

I hope you like this post, and if so, consider sharing it and following me on Twitter, Facebook, Reddit or through the weekly newsletter, to stay up-to-date with the latest content. If you want, you can also check out my newly-created YouTube channel. As always, thanks for reading this piece and stay tuned for more content to come!