# Las 15 mejores extensiones de Visual Studio Code (VSCode 2023) para el desarrollo web
Español | English
Uso con asiduidad Visual Studio Code (opens new window) tanto como editor de código fuente en proyectos web, como para la manipulación de ficheros de diferentes tipos. Creo sinceramente que es una gran herramienta que deberías probar pues tiene visos de convertirse (si no lo es ya) en el mejor editor de código fuente, especialmente para el Desarrollo Web.
Como buen editor cabe la posibilidad de enriquecerlo con la instalación de extensiones que están disponibles en su Marketplace (opens new window) y que nos permiten agregarle idiomas, temas y muchos servicios adicionales. Además de esto, cabe destacar que cada extensión se ejecuta en un proceso separado, lo que ayuda a no ralentizar el rendimiento del propio editor.
Aquí dejo una lista de las que considero las 15 mejores extensiones de Visual Studio Code para aumentar nuestra productividad con este maravilloso editor. Si por el contrario eres más de Visual Studio, te recomiendo Las 5 mejores extensiones gratuitas para Visual Studio.
# 1. Tailwind CSS IntelliSense (Brad Cornes)
Con esta extensión vamos a conseguir una experiencia de desarrollo más avanzada cuando en nuestro proyecto hayamos activado el uso de Tailwind CSS y creado el fichero de configuración tailwind.config.js.
Tailwind CSS IntelliSense (Brad Cornes) (opens new window)
Si te interesa saber qué es Tailwind CSS o cómo combinarlo con Angular e inclusive con Angular Material, echa un vistazo a estos otros artículos: ¿Qué es Tailwind CSS? e Integrar Tailwind CSS con Angular Material en una aplicación Angular.
# 2. Prettier - Code formatter (esbenp.prettier-vscode)
Prettier (opens new window) es un formateador de código ampliamente utilizado y que nos permite estandarizar la estructura de nuestro código. Esta extensión integra sus características con el sistema de formateo de documentos y bloques de código de Visual Studio Code.
Prettier - Code formatter (esbenp.prettier-vscode) (opens new window)
Si al formatear los ficheros de una aplicación Angular tienes problemas en que aplique la comilla simple, asegúrate de tener tu fichero .editorconfig correctamente configurado con la propiedad
quote_type = single.
# 3. ESLint (Dirk Baeumer)
ESLint (opens new window) es un analizador de código que nos permite escribir código de calidad. Con esta extensión y una configuración básica que deberás crear en tu proyecto, Visual Studio Code te permitirá analizar e identificar problemas en tu código JavaScript y Typescript antes de ejecutarlo.
ESLint (Dirk Baeumer) (opens new window)
# 4. JavaScript (ES6) code snippets (charalampos karypidis)
Esta extensión nos permite crear fácilmente fragmentos de código JavaScript con la sintáxis ES6 mediante el uso de pequeños atajos de teclado.
JavaScript (ES6) code snippets (charalampos karypidis) (opens new window)
# 5. Angular Essentials (johnpapa.angular-essentials)
Este es más bien un paquete de extensiones creado por John Papa para Visual Studio Code y que agrega las extensiones por él consideradas como más útiles para el desarrollo de aplicaciones Angular. Algunas efectivamente creo que son realmente imprencidibles para trabajar con dicho framework, pero otras igualmente pueden ser muy útiles para otros fines, así que también las encontrarás en esta lista.
Angular Essentials (johnpapa.angular-essentials) (opens new window)
# 6. Angular Schematics (Cyrille Tuzi)
Con esta extensión podemos interactuar desde el propio árbol de carpetas de nuestro proyecto Angular para con el botón derecho del ratón, empezar a crear módulos, componentes, servicios o cualquier otro tipo de entidad creable desde Angular CLI entre otras opciones.
Angular Schematics (Cyrille Tuzi) (opens new window)
# 7. C# (Microsoft)
El soporte para C# es opcional en Visual Studio Code por lo que si quieres usarlo para crear tus proyectos en dicho lenguaje, esta extensión te será de gran ayuda.
C# (Microsoft) (opens new window)
# 8. GitLens (Eric Amodio)
Si queremos potenciar la integración de Git con Visual Studio Code, ésta es nuestra extensión. Facilita el análisis, exploración y trabajo con repositorios Git (opens new window) entre otras funcionalidades. Es ya un imprescindible si trabajas con Git.
GitLens (Eric Amodio) (opens new window)
# 9. gitflow (vector-of-bool)
Si utilizas el flujo de trabajo gitflow (opens new window) para gestionar tus ramas en Git, no deberías dejar de lado esta extensión para agilizar tus procesos.
gitflow (vector-of-bool) (opens new window)
# 10. Live Server (Ritwick Dey)
Esta extensión ofrece de una manera muy rápida un servidor de desarrollo en vivo, fácil de usar y con recarga automática del navegador.
Live Server (Ritwick Dey) (opens new window)
Si además quieres conocer otras alternativas para servir archivos HTML estáticos desde Visual Studio Code, echa un vistazo a este otro artículo: Servir archivos HTML estáticos localmente con Node.js y http-server.
# 11. Todo Tree (Gruntfuggly)
Con esta extensión podremos localizar fácilmente y organizar visualmente las etiquetas TODO, FIXME y demás de nuestro entorno de trabajo. Te animo a que revises todas las posibilidades de configuración y extensión que ofrece.
Todo Tree (Gruntfuggly) (opens new window)
# 12. Thunder Client (Ranga Vadhineni)
Si eres usuario de Postman y buscas una alternativa ligera o simplemente necesitas un cliente API sencillo con el que hacer manualmente tus pruebas, deberías darle una oportunidad a esta extensión.
Thunder Client (Ranga Vadhineni) (opens new window)
# 13. Vetur (Pine Wu)
Podríamos considerar esta extensión como una caja de herramientas para Vue.js (opens new window) en Visual Studio Code. Con ella tendrás resaltado de código, fragmentos de código (snippets), soporte Emmet (opens new window) (más allá del soporte Emmet nativo de Visual Studio Code (opens new window)), validación de código, formateo y autocompletado.
Vetur (Pine Wu) (opens new window)
# 14. XML Tools (Josh Johnson)
A falta de soporte nativo en Visual Studio Code, esta extensión le añade herramientas de formato XML, XQuery y XPath.
XML Tools (Josh Johnson) (opens new window)
# 15. Material Icon Theme (Philipp Kief)
Si quieres dar un toque visual diferente al explorador de ficheros, esta extensión ofrece un paquete de iconos alternativos y personalizables que te podría interesar.
Material Icon Theme (Philipp Kief) (opens new window)
# 15+1. Spanish Language Pack for Visual Studio Code (Microsoft)
Me gusta hacer uso del inglés en mi día a día como desarrolador de software, así que personalmente prefiero programar en inglés y la versión también en inglés de mis aplicaciones como Visual Studio Code, pero si todavía no quieres dar ese paso, puedes instalarte esta extensión que te permitirá tenerlo completamente personalizado en español.
Spanish Language Pack for Visual Studio Code (Microsoft) (opens new window)