Hey you! If you are a VS Code user and ever wondered what VS Code extensions other web developers use, you have come to the right place.

I have a few extensions recommendations that I personally use and let me tell you, I wouldn't be able to code without them. Ok, maybe without a couple of them only but they surely speed up my development process.

Customizing your IDE properly results in writing cleaner, reusable code without having to spend too much of your precious time on manual refactoring.

Before we dive into details, here's a quick list so you know what to expect:

• Visual Studio IntelliCode
• Bracket Pair Colorizer 2
• Better Comments
• Error Gutters
• ESLint
• Live Server
• Prettier - Code Formatter

Visual Studio IntelliCode

This extension right here is a God-sent. AI-assisted IntelliCode saves you time by putting what you’re most likely to use at the top of your completion list. IntelliCode recommendations are based on thousands of open source projects on GitHub each with over 100 stars. When combined with the context of your code, the completion list is tailored to promote common practices (source: Microsoft).

So, to put it plainly, if you start typing your syntax and you can't remember part of it, IntelliCode will fill in the blanks for you. I highly recommend installing this extension.

Bracket Pair Colorizer 2

If you've been nesting brackets and you've given yourself a migraine trying to find which is what and where is its match, well, this extension will be another time-saver. The only thing that it does is colorize matching brackets. How simple and cool is that? Not to mention pretty looking.

Better Comments

I like to add comments to my code, even if I'm doing it in my personal projects right now, for my future self. Commenting your code is good practice in general and this extension will help you create more human-friendly comments. Here's how it looks like in practice:

Error Gutters

The image above explains it very well. If your code has problems, it shows you where the problem is. It uses diagnostics API so it's language and extension agnostic - it's compatible with any extension which provides diagnostics (ESLint for example) and each line with issues will have its own gutter. There are 3 different types of gutters for each severity level - Error, Warning, and Info.

ESLint

Just like Error Gutters, this extension runs diagnostics in your code and fixes problems. I won't cover this too much because ESLint has extensive documentation which you can check here

Note that ESLint requires Node.js.

Live Server

Another must-have extension that opens a quick development live server with live browser reload so you can see any changes you make in your code taking effect in the browser, instantly.

Can be turned on/off from VS Code status bar tab 'Go Live'. You can also right-click on the HTML file in your project and select Open with Live Server.

Prettier - Code Formatter

If you struggle with having to format your code manually, this extension will simply do it for you automatically. Type your code, save, and boom! code is formatted into a consistent style. You can read more about it in their extensive documentation.

We're done! Let me know if there are any other must-have extensions you're using other than the ones I've mentioned above.