¿Cuál es la configuración de visual Studio code que utilizamos? nos han preguntado en un par de ocasiones.
El enfoque de este post está orientado directamente a tema de productividad, estoy utilizando el tema que se llama One d Pro este que puedes observar en el video que te dejo a continuación.
Sincronización de ajustes (Settings Sync)
Esta extensión le permite sincronizar la configuración de VS Code en varios dispositivos. Esto puede ahorrarte mucho tiempo si trabajas en varios ordenadores o compartes tu configuración con otras personas.
Servidor en vivo (Live Server)
Esta extensión inicia un servidor web local cada vez que abres un archivo HTML, CSS o JavaScript en VS Code. Esto te permite previsualizar tus cambios en tiempo real sin tener que abrir manualmente un navegador web.
Más bonito (Prettier)
Esta extensión formatea automáticamente su código de acuerdo con un conjunto de reglas. Esto puede ayudarte a mantener tu código consistente y legible.
GitHub Copilot
Esta extensión es una potente herramienta basada en IA que puede ayudarte a escribir código. Puede sugerir complementos, generar código e incluso corregir errores.
Auto Rename Tag
Esta extensión renombra automáticamente las etiquetas HTML cuando cambia su contenido. Esto puede ayudarle a evitar cometer errores al editar archivos HTML.
Git History
Esta extensión muestra una representación visual de tu historial Git. Esto puede ayudarte a entender cómo ha evolucionado tu código.
CSS Peek
Esta extensión te permite echar un vistazo a los estilos CSS de un elemento HTML sin abrir el archivo CSS. Esto puede ser útil cuando intentas depurar problemas de CSS.
JavaScript Code Snippets
Esta extensión proporciona una colección de fragmentos de código JavaScript que puede utilizar para escribir código de forma rápida y sencilla.
Swimm
Swimm es una herramienta de documentación que integra un editor de texto enriquecido con código. Permite crear documentación exhaustiva que se sincroniza con el código base, automatizando las actualizaciones y proporcionando documentación específica para cada contexto.
GitLens
GitLens ofrece información valiosa sobre el historial, la autoría y los cambios de tu base de código. Proporciona visualizaciones avanzadas, anotaciones de autoría en línea, detalles de commit y una interfaz intuitiva para explorar repositorios Git.
Thunder Client
Thunder Client es una API REST ligera con una interfaz de usuario fácil de usar. Admite colecciones, variables de entorno, consultas GraphQL y pruebas sin secuencias de comandos basadas en GUI, lo que facilita enormemente el desarrollo y las pruebas de API.
Tabnine
Tabnine es un asistente de completado de código basado en IA que acelera tu flujo de trabajo de desarrollo. Ofrece completado de código en tiempo real basado en modelos de aprendizaje automático entrenados específicamente para la codificación en varios lenguajes.
Remote — SSH
La extensión Remote - SSH le permite utilizar una máquina remota con un servidor SSH como entorno de desarrollo. Permite una colaboración sin fisuras y le permite trabajar en archivos ubicados en máquinas remotas directamente desde VS Code.
Docker
La extensión Docker simplifica la gestión y el despliegue de aplicaciones en contenedores desde VS Code. Proporciona depuración con un solo clic para aplicaciones Node.js, Python y .NET que se ejecutan dentro de contenedores.
Git History
Git History te permite navegar por el historial de confirmaciones, inspeccionar los cambios en los archivos y comparar versiones de código. Presenta una línea de tiempo GUI con detalles de commits, nombres de ramas y asociaciones de etiquetas.
Markdown All in One
Markdown All in One mejora su productividad al trabajar con documentos Markdown. Ofrece resaltado de sintaxis, formato de bloques de código, generación de índices, modo de vista previa, atajos de teclado y mucho más.
Regex Previewer
Regex Previewer le permite previsualizar las coincidencias de expresiones regulares en un documento paralelo. Es una herramienta muy útil para evaluar y ajustar las expresiones regulares en el código.
Better Comments
Better Comments le ayuda a organizar y categorizar sus anotaciones de código, como TODOs, consultas, destacados, etc. También le permite dar estilo al código comentado para diferenciarlo del código activo.
Bookmarks
Los marcadores facilitan la navegación por el código base al permitir marcar posiciones importantes. Puedes desplazarte rápidamente entre los marcadores y seleccionar líneas o regiones específicas para un análisis eficaz del archivo de registro.
Project Manager
Project Manager proporciona una forma cómoda de acceder a sus proyectos, independientemente de su ubicación. Puedes definir tus proyectos, detectar automáticamente repositorios Git, Mercurial o SVN, organizar proyectos con etiquetas y cambiar rápidamente entre ellos.
Code Spell Checker
El corrector ortográfico de código es útil para detectar errores ortográficos comunes en su código y documentos. Su objetivo es mantener bajos los falsos positivos, ayudándole a mantener un código de alta calidad.
Image Optimizer
Optimizador de imágenes añade un menú del botón derecho para optimizar las imágenes PNG, GIF y JPEG de su proyecto. Con un simple clic, puedes optimizar automáticamente todas las imágenes de una carpeta, mejorando el rendimiento y reduciendo el tamaño de los archivos.
CSS Peek
CSS Peek mejora el desarrollo de CSS proporcionando un seguimiento de la definición de símbolos para clases, ID y etiquetas HTML. Permite navegar rápidamente hasta el archivo CSS, realizar ediciones en línea o ver las definiciones en una ventana que se pasa por encima.
Placeholder Images
Placeholder Images te permite generar e insertar imágenes de marcador de posición en tu HTML utilizando servicios como Unsplash o LoremFlickr. Puede personalizar las dimensiones de la imagen, el texto, los colores e insertar fácilmente la etiqueta IMG generada en su HTML.
Live Server
Live Server proporciona un servidor de desarrollo rápido con recarga en directo del navegador. Con un solo clic, puede iniciar o detener el servidor y ver al instante los cambios en su aplicación web.
Peacock
Peacock permite personalizar el color del espacio de trabajo de VS Code, lo que facilita la diferenciación de varias instancias, la colaboración con otras personas o la identificación del editor cuando se utilizan las funciones VS Live Share o Remote.
Polacode
Polacode te permite capturar hermosas pantallas de tu código con el mismo estilo y tema que tu editor. Es una extensión muy útil para compartir fragmentos de código o capturar imágenes para documentación o presentaciones.
Conclusión
Las extensiones de código son potentes herramientas que pueden aumentar significativamente tu productividad como desarrollador. Ya sea mejorando la colaboración, automatizando tareas, mejorando la calidad del código o agilizando tu flujo de trabajo, estas extensiones te ayudarán a construir y resolver problemas complejos.
Éstas son sólo algunas de las muchas y fantásticas extensiones de VS Code disponibles. Con tantas opciones, seguro que encuentras extensiones que te ayuden a mejorar tu productividad y flujo de trabajo.