Visual Studio Code puede adaptarse a diferentes lenguajes y proyectos mediante extensiones.
No es necesario mantener todas las extensiones activadas al mismo tiempo. Lo más conveniente es instalar y habilitar únicamente las que resulten útiles para el proyecto en el que estás trabajando.
Extensiones para lenguajes y frameworks
Python
La extensión oficial de Python añade soporte para trabajar con este lenguaje dentro de Visual Studio Code.
Entre sus funciones se encuentran el resaltado de sintaxis, el autocompletado, la depuración y la selección de entornos de Python.
Angular Language Service
Angular Language Service mejora la experiencia al trabajar con proyectos de Angular.
Permite reconocer componentes, plantillas, propiedades y otras partes del código para ofrecer sugerencias y detectar errores.
Astro
La extensión oficial de Astro añade compatibilidad con la sintaxis de sus archivos y proporciona resaltado, autocompletado y otras ayudas de desarrollo.
Laravel
Las extensiones dedicadas a Laravel pueden ayudar a reconocer la estructura del framework, completar código y trabajar con archivos Blade.
Django
La extensión para Django añade resaltado de sintaxis, fragmentos de código y soporte para las plantillas utilizadas por este framework de Python.
Vue
La extensión oficial de Vue añade soporte para componentes, plantillas, propiedades y archivos utilizados en proyectos desarrollados con este framework.
Rust
Las extensiones para Rust permiten obtener autocompletado, análisis del código, detección de errores y navegación entre definiciones.
Sass
Una extensión para Sass facilita el resaltado de sintaxis, el autocompletado y el formateo de archivos utilizados con este preprocesador de CSS.
Auto Rename Tag
Auto Rename Tag permite cambiar simultáneamente las etiquetas de apertura y cierre de HTML.
Por ejemplo, al convertir una etiqueta p en un elemento div, la extensión modifica automáticamente ambas partes.
Esto reduce errores y evita tener que editar manualmente la etiqueta de cierre.
Bracket Pair Colorizer
Bracket Pair Colorizer coloreaba los pares de paréntesis, corchetes y llaves para distinguirlos con mayor facilidad.
Actualmente esta función está integrada en Visual Studio Code, por lo que ya no es necesario instalar la antigua extensión.
Puede activarse desde la configuración del editor mediante las opciones de coloreado de pares de corchetes.
CSS Navigation
CSS Navigation facilita el desplazamiento entre las clases utilizadas en los archivos HTML y sus definiciones dentro de las hojas de estilo.
Puede resultar útil para:
- Buscar definiciones de clases.
- Localizar referencias.
- Navegar entre HTML y CSS.
- Trabajar con proyectos que contienen muchas hojas de estilo.
HTML to CSS Completion
Esta extensión ayuda a completar nombres relacionados con las clases empleadas entre archivos HTML y CSS.
Puede acelerar la escritura de selectores y reducir errores al repetir nombres de clases.
IntelliSense for CSS Class Names in HTML
IntelliSense for CSS Class Names in HTML muestra sugerencias de las clases CSS disponibles mientras escribes el atributo class de un elemento HTML.
De esta forma, no es necesario recordar manualmente todos los nombres definidos en las hojas de estilo.
Live Server
Live Server permite iniciar un servidor de desarrollo local para visualizar páginas web.
Al guardar los cambios, el navegador puede actualizarse automáticamente, lo que agiliza las pruebas durante el desarrollo.
Es especialmente útil para proyectos sencillos creados con HTML, CSS y JavaScript.
Open in Browser
Open in Browser añade una opción para abrir rápidamente un archivo HTML en el navegador seleccionado.
Es un atajo práctico para comprobar páginas sin tener que buscar manualmente el archivo dentro del equipo.
Angular Snippets
Angular Snippets incorpora abreviaturas para generar fragmentos de código utilizados con frecuencia en Angular.
Puede ayudar a crear componentes, directivas, servicios y otras estructuras repetitivas.
Better Comments
Better Comments permite organizar los comentarios del código mediante colores diferentes.
Puede utilizarse para distinguir:
- Advertencias.
- Errores.
- Tareas pendientes.
- Notas importantes.
- Preguntas.
Esto facilita la lectura de archivos extensos y permite localizar información importante más rápidamente.
Bookmarks
Bookmarks permite marcar líneas o fragmentos importantes dentro del código.
Después puedes desplazarte rápidamente entre esos marcadores sin tener que buscar nuevamente el contenido.
Resulta útil en proyectos grandes o cuando necesitas volver constantemente a varias partes de un archivo.
Color Highlight
Color Highlight muestra visualmente los colores escritos dentro del código.
Por ejemplo, puede representar directamente valores hexadecimales como:
#3498dbEsto ayuda a identificar los colores sin tener que abrir una herramienta externa.
CSS Peek
CSS Peek permite localizar y visualizar la definición de una clase CSS desde el archivo HTML.
También facilita saltar directamente hasta la hoja de estilos donde se encuentra declarada.
CSS Autoprefixer
CSS Autoprefixer puede añadir prefijos de navegador a determinadas propiedades CSS.
Estos prefijos se utilizan para mejorar la compatibilidad con navegadores que requieren versiones específicas de algunas propiedades.
Extensiones para bases de datos
Visual Studio Code también dispone de clientes para conectarse a bases de datos sin abandonar el editor.
Algunas alternativas mencionadas son:
- Database Client.
- Database Client JDBC.
- Extensiones para MySQL.
- SQLTools.
Estas herramientas pueden permitir:
- Crear conexiones.
- Consultar tablas.
- Ejecutar instrucciones SQL.
- Revisar registros.
- Administrar diferentes bases de datos.
Debugger for Java
Debugger for Java proporciona herramientas para ejecutar y depurar aplicaciones desarrolladas en Java.
Permite utilizar puntos de interrupción, inspeccionar variables y seguir la ejecución del programa.
Snippets para React
Las extensiones de fragmentos para React permiten generar rápidamente estructuras utilizadas con frecuencia.
Pueden incluir atajos para componentes, importaciones, funciones y otras partes repetitivas del código.
GitHub Copilot
GitHub Copilot es un asistente de programación integrado en Visual Studio Code.
Puede ofrecer sugerencias, completar código, explicar fragmentos y responder preguntas relacionadas con el proyecto.
También puede incorporar funciones de chat y diferentes modos de trabajo con los archivos del proyecto.
Su disponibilidad, sus límites gratuitos y sus planes pueden cambiar, por lo que es recomendable revisar las condiciones actuales del servicio.
GitLens
GitLens amplía las herramientas de Git integradas en Visual Studio Code.
Permite consultar información como:
- Quién modificó una línea.
- Cuándo se realizó un cambio.
- Historial de archivos.
- Comparaciones entre versiones.
- Información de ramas y repositorios.
HTML Tag Wrapper
HTML Tag Wrapper permite envolver un contenido seleccionado dentro de una etiqueta HTML.
Esto evita tener que escribir manualmente la etiqueta de apertura y cierre alrededor de cada fragmento.
Import Cost
Import Cost muestra el tamaño aproximado de las dependencias importadas en proyectos JavaScript o TypeScript.
Esta información puede ayudar a detectar librerías demasiado pesadas que afecten el tamaño final de la aplicación.
JavaScript Code Snippets
Las extensiones de snippets para JavaScript incorporan abreviaturas que generan estructuras utilizadas frecuentemente.
Esto puede acelerar la creación de funciones, clases, importaciones y otros bloques repetitivos.
JSON Crack
JSON Crack permite visualizar un archivo JSON mediante una estructura gráfica similar a un árbol.
Puede facilitar la comprensión de objetos complejos y relaciones entre diferentes niveles de información.
Live Preview
Live Preview permite visualizar una página web dentro de Visual Studio Code.
De esta manera puedes comprobar el resultado del proyecto sin cambiar constantemente entre el editor y un navegador externo.
Prettier
Prettier es una extensión utilizada para formatear código automáticamente.
Puede organizar archivos de diferentes tecnologías, entre ellas:
- HTML.
- CSS.
- JavaScript.
- TypeScript.
- JSON.
También puede configurarse para aplicar el formato automáticamente cada vez que se guarda un archivo.
Settings Sync
La sincronización de configuración permite conservar ajustes, extensiones y preferencias de Visual Studio Code.
Esto facilita recuperar el mismo entorno al instalar el editor en otro equipo.
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense ofrece autocompletado, resaltado y ayuda contextual para las clases de Tailwind CSS.
Es una extensión especialmente útil cuando se trabaja con una gran cantidad de clases utilitarias.
Thunder Client
Thunder Client es un cliente para probar API directamente desde Visual Studio Code.
Permite enviar solicitudes HTTP y comprobar sus respuestas de forma similar a otras herramientas especializadas.
Puede utilizarse para probar métodos como:
- GET.
- POST.
- PUT.
- PATCH.
- DELETE.
Todo Tree
Todo Tree localiza comentarios como TODO y FIXME dentro del proyecto.
Después los muestra organizados en un panel para facilitar el seguimiento de tareas pendientes.
Temas visuales
Los temas cambian los colores de la interfaz y del código.
Entre los mencionados se encuentran:
- Atom Material Theme.
- Nord.
- Tokyo Night.
- Solarized Dark.
Solarized Dark utiliza tonos oscuros menos intensos que pueden resultar cómodos durante sesiones prolongadas de programación.
No mantengas todas las extensiones activadas
Instalar demasiadas extensiones puede aumentar el consumo de recursos, ralentizar el inicio del editor o generar conflictos.
Una buena práctica es desactivar las herramientas que no necesites para el proyecto actual.
Por ejemplo, no es necesario mantener activadas simultáneamente extensiones de Angular, Django, React, Java y Vue cuando solamente trabajas en un proyecto HTML.
Configuración recomendada según el proyecto
Desarrollo web básico
- Live Server.
- Auto Rename Tag.
- CSS Peek.
- Color Highlight.
- Prettier.
Proyectos con JavaScript
- JavaScript Code Snippets.
- Import Cost.
- GitLens.
- Prettier.
Proyectos con Tailwind CSS
- Tailwind CSS IntelliSense.
- Prettier.
- Live Preview o Live Server.
Desarrollo de API
- Thunder Client.
- Database Client o SQLTools.
- GitLens.
- Prettier.
Conclusión
Las extensiones permiten adaptar Visual Studio Code a diferentes lenguajes, frameworks y formas de trabajo.
Live Server, Prettier, GitLens, Auto Rename Tag y Thunder Client pueden resultar útiles en numerosos proyectos.
Otras herramientas, como Angular Language Service, Django, Tailwind CSS IntelliSense o las extensiones de Python, deben activarse según la tecnología utilizada.
Lo más importante es mantener un entorno organizado y evitar instalar extensiones innecesarias que puedan consumir recursos o interferir con el desarrollo.
