# The 15 best extensions for Visual Studio Code (VSCode 2023) for web development
Español | English
I regularly use Visual Studio Code (opens new window) both as a source code editor for web projects and for handling files of various types. I genuinely believe it's a great tool that you should try because it has the potential to become (if it isn't already) the best source code editor, especially for web development.
As a powerful editor, it allows us to enhance its functionality by installing extensions available in its Marketplace (opens new window). These extensions enable us to add languages, themes, and many additional services. It's worth noting that each extension runs in a separate process, which helps maintain the editor's performance without slowing it down.
Here's a list of what I consider the 15 best extensions for Visual Studio Code to increase our productivity with this marvelous editor. However, if you prefer Visual Studio, I recommend checking out The 5 best free extensions for Visual Studio.
# 1. Tailwind CSS IntelliSense (Brad Cornes)
With this extension, we will achieve a more advanced development experience when we have activated the use of Tailwind CSS in our project and created the configuration file tailwind.config.js.
Tailwind CSS IntelliSense (Brad Cornes) (opens new window)
If you're interested in learning what Tailwind CSS is or how to combine it with Angular, including Angular Material, take a look at these other articles: What is Tailwind CSS? and Integrate Tailwind CSS with Angular Material in an Angular application.
# 2. Prettier - Code formatter (esbenp.prettier-vscode)
Prettier (opens new window) is a widely used code formatter that allows us to standardize the structure of our code. This extension integrates its features with Visual Studio Code's document and code block formatting system.
Prettier - Code formatter (esbenp.prettier-vscode) (opens new window)
If you encounter issues with single quotes not being applied when formatting files in an Angular application, make sure your .editorconfig file is correctly configured with the property
quote_type = single.
# 3. ESLint (Dirk Baeumer)
ESLint (opens new window) is a code analyzer that enables us to write quality code. With this extension and a basic configuration that you'll need to set up in your project, Visual Studio Code will allow you to analyze and identify issues in your JavaScript and TypeScript code before running it.
ESLint (Dirk Baeumer) (opens new window)
# 4. JavaScript (ES6) code snippets (charalampos karypidis)
This extension allows us to easily create JavaScript code snippets with ES6 syntax using small keyboard shortcuts.
JavaScript (ES6) code snippets (charalampos karypidis) (opens new window)
# 5. Angular Essentials (johnpapa.angular-essentials)
This is more of an extension package created by John Papa for Visual Studio Code, which adds the extensions he considers most useful for Angular application development. Some of them are indeed essential for working with the Angular framework, but others can also be helpful for other purposes, so you'll find them in this list as well.
Angular Essentials (johnpapa.angular-essentials) (opens new window)
# 6. Angular Schematics (Cyrille Tuzi)
With this extension, we can interact directly from the project's folder tree in our Angular project. By right-clicking, we can easily create modules, components, services, or any other type of entity that can be generated using Angular CLI, among other options.
Angular Schematics (Cyrille Tuzi) (opens new window)
# 7. C# (Microsoft)
The support for C# is optional in Visual Studio Code, so if you want to use it for creating projects in this language, this extension will be of great help.
C# (Microsoft) (opens new window)
# 8. GitLens (Eric Amodio)
If you want to enhance the integration of Git with Visual Studio Code, this is the extension for you. It facilitates analysis, exploration, and work with Git (opens new window) repositories, among other functionalities. It has become an essential tool if you work with Git.
GitLens (Eric Amodio) (opens new window)
# 9. gitflow (vector-of-bool)
If you use the gitflow (opens new window) workflow to manage your branches in Git, you shouldn't overlook this extension to streamline your processes.
gitflow (vector-of-bool) (opens new window)
# 10. Live Server (Ritwick Dey)
This extension provides a quick and easy-to-use live development server with automatic browser reloading.
Live Server (Ritwick Dey) (opens new window)
If you're interested in exploring other alternatives for serving static HTML files from Visual Studio Code, take a look at this article: Serve Static HTML Files Locally with Node.js and http-server.
# 11. Todo Tree (Gruntfuggly)
With this extension, you can easily locate and visually organize TODO, FIXME, and other tags within your working environment. I encourage you to explore all the configuration and extension possibilities it offers.
Todo Tree (Gruntfuggly) (opens new window)
# 12. Thunder Client (Ranga Vadhineni)
If you're a Postman user and looking for a lightweight alternative or simply need a simple API client for manual testing, you should give this extension a try.
Thunder Client (Ranga Vadhineni) (opens new window)
# 13. Vetur (Pine Wu)
We can consider this extension as a toolbox for Vue.js (opens new window) in Visual Studio Code. With it, you'll have code highlighting, code snippets, Emmet (opens new window) support (beyond the native Emmet support in Visual Studio Code (opens new window)), code validation, formatting, and autocompletion.
Vetur (Pine Wu) (opens new window)
# 14. XML Tools (Josh Johnson)
In the absence of native support in Visual Studio Code, this extension adds XML, XQuery, and XPath formatting tools.
XML Tools (Josh Johnson) (opens new window)
# 15. Material Icon Theme (Philipp Kief)
If you want to give a different visual touch to your file explorer, this extension offers an alternative and customizable icon pack that you might find interesting.
Material Icon Theme (Philipp Kief) (opens new window)
# 15+1. Spanish Language Pack for Visual Studio Code (Microsoft)
I like using English in my daily life as a software developer, so personally, I prefer programming in English and having the English version of applications like Visual Studio Code. However, if you're not ready to take that step yet, you can install this extension that allows you to fully customize it in Spanish.
Spanish Language Pack for Visual Studio Code (Microsoft) (opens new window)