Share on social networks!

Best extensions for VSCode

Today, no one doubts that Visual Studio Code (VSCode) is one of the most used code editors today.

One of the best things we can do with our VSCode is customize it. With a large number of extensions depending on our main use, we can add new functions and features to the editor.

In this article, we are going to take a look at some of best VSCode extensions that you can add to your editor so that they can help you improve your code editing experience and improve your productivity.



It's a code formatteror which can be used for code in various languages, including JavaScript, TypeScript, CSS and HTML. It will format your code so that it is presented in a cleaner and more structured way

Auto Rename Tag

The Auto Rename Tag extension automates the process of renaming HTML tags. This can be useful when you rename a tag, as the extension will automatically update related tags, such as the "id" attribute and closing tags.


It is an extension that allows you to run your project on a local server and see the changes in your browser without having to reload the page. This is very useful for web development as it allows you to see the changes you make to your code in real time.

25001216 7040859

Code Spell Checker

It is a tool that will help you Identify and correct spelling errors in your code. The extension uses a dictionary to check the spelling of words in the code, and if it finds a misspelled word, it will highlight the word and suggest possible corrections.

Lens error

The extension displays errors and warnings in a bar to the right of the editor. The bar shows the number of errors and warnings, as well as their line and column.


The vscode-icons extension is a extension that provides a large number of icons for different types of files and folders to give a different touch to the VScode interface and thus be able to more easily identify the type of file.

Console Ninja

The Console Ninja extension for Visual Studio Code is a tool that improve your code debugging experience. It will provide you with a console view in the editor, allowing you to see the results of console functions and commands without having to switch to the browser or terminal console.

Image Preview

With Image Preview you will have a preview images in your editor and you will be able to view the image in the context of your website or application and you will also be able to verify the quality of the images.

Tailwind CSS IntelliSense

With this extension you will improve your development experience in Tailwind by providing features such as: autocompletion, syntax highlighting and linting among other advantages.



If you work with Git this is a great tool that improves visibility directly from your code editor. You will also be able to see the history of changes and who was responsible for making them.

Live Share

With Live Share you can Collaborate in real time with your colleagues and work team. This will allow your team to make any corrections to your code that are necessary at that precise moment.


A support of artificial intelligence, which will help us write certain lines of code in addition to offering suggestions.

Highlight Matching Tag

Designed especially for large projects, with this extension you can mark opening tag and with an underline you can see where the closing tag is located.

Image Optimizer

With this VScode extension you will be able to perform image compressions without loss of information or you can opt for compression with loss of information.

CSS Peek

CSS Peek is a Visual Studio Code extension that allows you view CSS rules applied to an HTML element when you hover over it. This can be useful for finding out what CSS rules are causing an element to look a certain way, or for making quick changes to the CSS without having to switch between files.

Discover at EIP our Full Stack Professional Master's Degree in Web Development.

Subscribe to our newsletter to stay up to date with all the news

EIP International Business School informs you that the data in this form will be processed by Mainjobs Internacional Educativa y Tecnológica, SA as the person responsible for this website. The purpose of collecting and processing personal data is to respond to the query made as well as to send information about the services of the data controller. Legitimation is the consent of the interested party.
You can exercise your rights of access, rectification, limitation and deletion of data in compliance@grupomainjobs.com as well as the right to file a claim with the supervisory authority. You can consult additional and detailed information on Data Protection in the Privacy Policy that you will find in our Web page
Web Development Fullstack Web Min

Leave a comment