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.
Prettier
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.
LiveServer
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.
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.
Vscode-icons
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.
GitLens
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.
Intellicode
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.
