These are the best extensions for Visual Studio Code that you must have

Apr 18, 2022 · 7 min read

There are some extensions for VS Code that are indispensable for any developer.

One of the main features that Visual Studio Code (VS Code) has is that you can install extensions and customize it however you like. Of course, there are some extensions that are better than others and that make your job much easier.

Today we are going to be talking about which are the best extensions for VS Code. These are not mandatory, but it is recommended that you have them, since they will be very useful.

1.Prettier

Prettier is a really important and necessary extension today.

Prettier is a simple, but very useful extension that will allow you to format the code in a simple way. In other words, with this extension it allows you to achieve a much more homogeneous code.

This is a vital tool when you work together with other people, since Prettier takes care of generating standardized code that everyone can easily read. The extension supports a large number of languages, which makes it quite a versatile tool.

Prettier is completely free and you can download it from the VS Code Extension Store. It's one of those many extensions that you can't help but have if you work with this editor.

2.Auto Close Tag

This is a vital tool if you work with HTML frequently.

If you work on the front-end, this is one of those extensions that will make your job much easier. What this tool does is that it helps you close the tags automatically, this helps you save time and avoid errors.

Despite the fact that this tool is mainly designed for HTML, the truth is that you will be able to use it in others. It is compatible with XML, PHP, VUE, JavaScript, TypeScript, JSX, TSX, among others.

Its use is completely free, so it is recommended that you have it installed.

3. Bracket Pair Colorizer 2

Bracket Pair Colorizerr 2 is very important to make the code easier to read.

Bracket Pair Colorizer is a pretty useful extension that you can get for free from the VS Code store. The function it has is quite simple, it is responsible for placing a color to each pair of keys, parentheses and brackets.

With this you will be able to identify where each block of code begins and ends in a fairly simple way. If you want to save time writing and reading code, this is one of those applications that you should have in your VS Code.

4. Material Icon Theme

With this extension you will be able to replace the default icons of VS Code.

This is an extension that, more than a utility, serves to better identify. With this tool you will be able to have a simpler, cleaner and more functional work environment.

With Material Icon Theme you will be able to replace the traditional VS Code icons with more beautiful and easy to read ones. This extension includes all the icons of each of the different programming languages.

In this way, you will be able to easily identify the files you work with by their icon. It is a free tool that you can download from the VS Code store. Although it is not mandatory, it is recommended, since it will make your job easier.

5. Quokka

Quokka is an extension that will make working with JavaScript easier.

This is a vital tool for developing JavaScript code, it will allow you to debug your code in real time without leaving VS Code. Similarly, this extension can show you some function results and other useful values as you type.

Although this tool is quite useful, there is something that you should keep in mind and that is that it is a quite heavy plugin. In other words, it is necessary to have a computer with good resources to be able to run Quokka without problems.

You can download this extension from the VS Code store, it's free and very easy to install, so you won't have any problems.

6. LiveServer

Live Server is another tool that is extremely necessary for web development.

Live Server is another of the best plugins that you will be able to find in VS Code and that you should not stop having. Many times when you are developing, it is necessary to have a server to be able to see your work.

With Live Server you will be able to set up a web server quite easily. All the changes you make in the editor will be reflected on the server in real time, which greatly facilitates your work.

It works quite well with various types of programming languages, which makes it a really useful tool. Best of all, it's free, so you don't have to worry about money.

7. Path Inlellisense

With Path Intellisense you will have greater control of the directories in your project.

Directory management can become complex for many people and can end up being somewhat frustrating. Fortunately, there is an extension that will help you to stop this from being a problem and it is Path Intellisense.

With this simple extension you will be able to easily find any directory you need. This will greatly facilitate your work, especially if you are one of those who have problems finding a directory.

Like all the other extensions we've talked about above, this one is free to use and can be downloaded directly from Visual Studio Code.

8. Better Comments

Better Comments will allow you to change the color of the comments.

This is a simple tool with which you will be able to put aside the boring default comments of Visual Studio Code. With this you will be able to change their color to make it much easier to identify.

Of course, it is a tool that should be used with discretion, since if you use many colors you can turn the code into something insufferable. So even though it's a really important tool, you need to not abuse it.

You can install this tool quite easily from the VS Code store. At first it can be somewhat complex, but you will get used to it very quickly.

9. Can I Use

This tool will allow you to know if your code is compatible with browsers.

One of the main challenges that developers often face is the incompatibility between different browsers. These are updated from time to time and some are outdated over time.

With this simple plugin you will be able to know if your code is compatible with all browser versions. Many people often use this tool, but in its web version. With this extension you will be able to have it integrated with your VS Code installation.

In this way you will be able to make sure that your code will work perfectly regardless of the browser in which it is used.

10.HTML/CSS Support

This is a vital tool for HTML and CSS development.

This is one of those tools that you should keep in mind when developing for front-end. HTML and CSS are practically the most used languages on the web, since they allow the design of the entire website.

That is why it is extremely important to have a tool that can help you write code. It is very important that you consider this plugin for your development environment.

Among what this tool does, it is capable of completing class and id attributes. In this way you will be able to link the codes with the CSS in a much simpler way. With this, web layout will be much easier than you think.