15 Super extensiones:
- 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)
#2. 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 creando 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.
#3. Prettier - Code formatter (esbenp.prettier-vscode)
Prettier (opens new window)es un formateador de código ampliamente utilizado y que nos permite estandarizar la estructurar 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.
#4. 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)
#5. 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)
#6. 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)
#7. 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)
#8. 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.
#9. 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)
#10. 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)
#11. i18n Ally (Lokalise)
Puedes considerar esta extensión como un todo en uno para la internalización de ficheros desde Visual Studio Code, ya que te ayudará a trabajar con tus ficheros de traducción desde múltiples frameworks.
i18n Ally (Lokalise)(opens new window)
#12. Bracket Pair Colorizer 2 (CoenraadS)
Esta extensión usa distintos juegos de colores para facilitar la identificación visual de los diferentes corchetes, llaves o paréntesis presentes en nuestro código.
Bracket Pair Colorizer (CoenraadS)(opens new window)
Desde la versión 1.60 ya contamos con esta funcionalidad de manera nativa en Visual Studio Code y dado que no está implementada de manera completamente idéntica a lo que ofrece la extensión, te sugiero que pruebes ambas opciones y elijas la que más te interese. Ten además en cuenta que Bracket Pair Colorizer 2 ya no se mantiene, así que es posible que en algún momento debas activarte la funcionalidad nativa. Para habilitar la nueva funcionalidad debemos configurar "editor.bracketPairColorization.enabled": true, así que pulsamos Ctrl+,, escribimos bracketPairColorization en la caja de búsqueda y marcamos el check de la opción encontrada (Editor > Bracket Pair Colorization: Enabled).
#13. 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)
#14. language-stylus (sysoev)
A falta de soporte nativo en Visual Studio Code para ficheros Stylus, esta extensión añade el resaltado de sintaxis y finalización de código en dichos tipos de archivos.
language-stylus (sysoev)(opens new window)
#15. 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)
#15+1. 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)