Hoy en día, nadie pone en duda que Visual Studio Code (VSCode) es de los editores de código más usados en la actualidad.
Una de las mejores cosas que podemos hacer con nuestro VSCode es personalizarlo. Con una gran cantidad de extensiones dependiendo de nuestro uso principal podremos agregar nuevas funciones y características al editor.
En este artículo, vamos a echar un vistazo a algunas de las mejores extensiones de VSCode que puedes añadir a tu editor para que puedan ayudarte a mejorar tu experiencia en la edición de código y a mejorar tu productividad.
Prettier
Es un formateador de código que puede ser utilizado para código en varios lenguajes, incluyendo JavaScript, TypeScript, CSS y HTML.Formateará tu código para que se presente de una forma más limpia y estructurada
Auto Rename Tag
La extensión Auto Rename Tag automatiza el proceso de renombrar etiquetas HTML. Esto puede ser útil cuando cambias el nombre de una etiqueta, ya que la extensión automáticamente actualizará las etiquetas relacionadas, como el atributo «id» y las etiquetas de cierre.
Live Server
Es una extensión que te permite ejecutar tu proyecto en servidor local y ver los cambios en tu navegador sin tener que recargar la página. Esto es muy útil para el desarrollo web, ya que te permite ver los cambios que haces en tu código en tiempo real.
Code Spell Checker
Es una herramienta que te ayudará a identificar y corregir errores ortográficos en tu código. La extensión utiliza un diccionario para verificar la ortografía de las palabras en el código y, si encuentra una palabra mal escrita, resaltará la palabra y sugerirá posibles correcciones.
Error Lens
La extensión muestra los errores y avisos en una barra a la derecha del editor. La barra muestra el número de errores y avisos, así como su línea y columna.
Vscode-icons
La extensión vscode-icons es una extensión que proporciona una gran cantidad de iconos para diferentes tipos de archivos y carpetas para darle un toque diferente a la interfaz de VScode y así poder identificar con más facilidad el tipo de archivo.
Console Ninja
La extensión Console Ninja para Visual Studio Code es una herramienta que mejora la experiencia de depuración de tu código. Te proporcionará una vista de la consola en el editor, lo que te permite ver los resultados de las funciones y los comandos de la consola sin tener que cambiar a la consola del navegador o del terminal.
Image Preview
Con Image Preview tendrás una vista previa de las imágenes en tu editor y podrás visualizar la imagen en el contexto de tu página web o aplicación y además podrás verificar la calidad de las imágenes.
Tailwind CSS IntelliSense
Con esta extensión mejorarás tu experiencia de desarrollo en Tailwind al proporcionar características como: autocompletado, resaltado de sintaxis y linting entre otras ventajas.
GitLens
Si trabajas con Git está es una gran herramienta que mejora la visibilidad directamente desde tu editor de código. También podrás ver el historial de cambios y quien fue el encargado de hacerlos.
Live Share
Con Live Share podrás colaborar en tiempo real con tus compañeros y equipo de trabajo. Esto permitirá a tu equipo hacer las correcciones de tu código que sean necesarios en ese preciso momento.
Intellicode
Un apoyo de inteligencia artificial, que nos ayudará a escribir ciertas líneas de código además de ofrecer sugerencias.
Highlight Matching Tag
Pensada especialmente para grandes proyectos, con esta extensión podrás marcar la etiqueta de apertura y con un subrayado podrás ver donde se encuentra la etiqueta de cierre.
Image Optimizer
Con esta extensión de VScode podrás realizar compresiones de imágenes sin pérdida de información o podrás optar por una compresión con pérdida de información.
CSS Peek
CSS Peek es una extensión de Visual Studio Code que te permite ver las reglas CSS aplicadas a un elemento HTML al pasar el cursor sobre él. Esto puede ser útil para averiguar qué reglas CSS están causando que un elemento se vea de cierta manera, o para hacer cambios rápidos en el CSS sin tener que cambiar entre archivos.
Descubre en EIP nuestro Máster Profesional de Desarrollo Web Full Stack.
