Las 16 mejores extensiones de código VS para desarrolladores web

Microsoft Visual Studio Code (VS Code) es uno de los principales editores de código para desarrolladores de software. Desde su lanzamiento, su popularidad ha aumentado no solo por la plataforma estable que ofrece, sino también por la naturaleza extensible que Microsoft incorporó. El mercado de extensiones es una gran cantidad de complementos y características que permite a los desarrolladores personalizar VS Code en el entorno de desarrollo de sus sueños. Queremos desglosar algunas de las principales extensiones de VS Code disponibles en la actualidad para que no se pierda ninguna.

1. Importador de configuración y mapa de teclas de texto sublime

Encabezando nuestra lista se encuentra el Importador de mapas de teclas y configuraciones de texto sublime. En caso de que el título no fuera lo suficientemente descriptivo, esta extensión le permite incorporar sus mapas de teclas y configuraciones de Sublime Text existentes para que pueda realizar la transición sin problemas al uso de VS Code como predeterminado. Dado que muchas personas aman Sublime y han pasado años en ello, hacer que VS Code mantenga la memoria muscular obtenida de ese editor tiene mucho sentido.

2. Fragmentos de código de JavaScript (ES6)

Escribir JavaScript (o cualquier código) puede resultar engorroso cuando repite los mismos fragmentos una y otra vez. Esta extensión ayuda a aliviar eso al permitirle básicamente escribir accesos directos para fragmentos de código de uso frecuente. Cuando se activa, el fragmento simplemente reemplaza el texto y se inserta directamente en el documento.

3. Colorizador de pares de soportes 2

Independientemente del idioma que codifique, los corchetes probablemente serán una parte importante. Y mantenerlos rectos puede ser un dolor de cabeza. Pero con esta extensión de VS Code, puede codificar con colores los pares coincidentes para ayudar a aliviar ese punto de dolor y trabajar para que el código en sí funcione, no el editor.

4. ESLint

En muchos sentidos, ESLint es el linter para JavaScript. Detectar errores y brindarle comentarios y advertencias inmediatas es esencial para mantener limpio el código de su equipo, y realmente no hay mejor manera de hacerlo en JS que ESLint. Recomendamos encarecidamente instalar este lo antes posible.

5. Director de proyectos

Un problema con VS Code que surge con bastante frecuencia es cómo intercambiar entre diferentes proyectos. Por defecto, el flujo no es exactamente el más intuitivo. Entonces, Project Manager trabaja para solucionar ese problema al brindarle un menú en la barra lateral que puede usar para guardar diferentes carpetas y proyectos de Git para intercambiar fácilmente entre ellos. Esto no es tanto una mejora del editor como un aumento en la calidad de vida.

6. Vista previa del navegador

Uno de los elementos más desagradables del desarrollo web es cargar y actualizar su contenido en diferentes navegadores para realizar pruebas. La vista previa del navegador ayuda a limitar la cantidad que necesita para hacer esto al brindarle una vista previa sólida de su trabajo dentro de VS Code en un nuevo proceso de Chrome.

7. Más bonita

Todos queremos un código más bonito. Así que probablemente todos deberíamos instalar Prettier para que se encargue de eso por nosotros. La descripción describe a Prettier como un "formateador de código obstinado, que aplica un estilo coherente al analizar su código y volver a imprimirlo con sus propias reglas que tienen en cuenta la longitud máxima de línea, ajustando el código cuando es necesario". Es posible que no desee utilizarlo para todos los idiomas o proyectos, por lo que hay muchas opciones de configuración para que pueda personalizarlo a su gusto.

8. gitlink

Nos gusta gitlink por su sencillez. Si bien hay muchas extensiones de Git, una de las cosas de gitlink es que es simple y solo hace una cosa. Y lo hace bien. Simplemente resalte un fragmento de código y gitlink lo llevará al repositorio en línea para ese fragmento en particular. Es increíblemente útil Ir rápidamente a su repositorio sin importar dónde esté alojado de forma remota.

9. Mejores comentarios

Comentar tu código es uno de los hábitos más importantes que puede tener un desarrollador. Incluso más que eso, comentando así su código es una habilidad que debe ser enseñado en todas las aulas de informática y codificación de campo de entrenamiento que hay. Dicho esto, Better Comments es una de esas extensiones de código VS que todos necesitan porque, si cree en el nombre, le permitirá dejar mejores comentarios en su código. Con accesos directos que le permiten diferenciar entre preguntas, exclamaciones, código comentado, consultas, alertas, aspectos destacados y tareas pendientes, esta extensión no solo le facilitará la vida, sino que también le facilitará la vida a su equipo. Y cualquier desarrollador que venga después de ti en el proyecto. No podemos recomendar esto lo suficiente.

10. Iconos de código VS

Una parte importante de la personalización de VS Code con extensiones es la personalización real. No solo cambios de funcionalidad. Con VS Code Icons, el editor se vuelve un poco más colorido y más fácil de navegar. El sistema de archivos tiene iconos que representan varios tipos de archivos, y estos se muestran en el explorador, así como en las pestañas del documento. Hace que trabajar en sistemas de archivos complicados sea mucho más fácil y menos dolor de cabeza. Literalmente a veces. La facilidad de lectura de los iconos evita la fatiga visual y, por tanto, los dolores de cabeza. Entonces, por su salud, instale VS Code Icons.

11. Etiqueta de cierre automático

Tal vez seamos nosotros, pero escribir las etiquetas de cierre de cualquier idioma se convierte en una tarea ardua. Hay algo en agregar ese / en al final que hace que las pulsaciones de teclas se sientan un poco fuera de lugar. Nunca temas. Auto Close Tag nos ha facilitado la vida. Por eso queremos hacer el tuyo más fácil. Es simple y fácil y puede seguir escribiendo entre ellos y simplemente presionar una tecla para llegar a la siguiente línea o al final de esa. Instale esto y déle a sus dedos un descanso de la gimnasia de cerrar etiquetas manualmente.

12. colorear

CSS es genial. Elegir colores en CSS no lo es. Cuando se trata de códigos hexadecimales y valores RGBA, a veces es difícil tener una idea mental de qué paleta ha configurado para un sitio. Esta extensión ayuda a aliviar eso al proporcionar una nota visual para cualquier código de color que use dentro de sus archivos. Puede ver los colores que está usando dentro del texto como un resaltado para que no tenga que cambiar constantemente de muestras y selectores de color, etc.

13. Polacode

Polacode es como una cámara Polaroid para su editor de código. Diseñado para hacer instantáneas de su código más limpio y más fácil, esto es imprescindible para cualquier escritor de tutoriales que quiera que su código sea el correcto.

14. GitLens

Es difícil explicar completamente qué hace que GitLens sea tan genial. Funciona como si Git y VS Code se hubieran diseñado pensando en el otro, y en lugar de trabajar a través de jerarquías de línea de comandos, obtienes visualizaciones y conocimientos que eliminan gran parte de la confusión del trabajo en equipo de Git. Puede ver cosas a través del desplazamiento, ver cambios y anotaciones recientes, vistas de comparación dentro del mismo VS Code, mapas de calor, historial de líneas y mucho más. Es básicamente la extensión de Git perfecta, y creemos que debería instalarla pronto.

15. Servidor en vivo

¿Alguna vez ha querido iniciar un servidor de desarrollo local desde su IDE y trabajar en él en tiempo real? No importa cómo haya respondido a esa pregunta, querrá darle una oportunidad a Live Server. Porque eso es precisamente lo que puedes hacer con él. Si bien es posible que no elimine por completo la necesidad de productos como Local by Flywheel y MAMP, ciertamente reduce su necesidad en muchas situaciones.

16. Embellecer

Beautify utiliza el popular js-beautify para mantener su JavaScript con un aspecto agradable y ordenado. No se preocupe por las líneas discontinuas y los espacios y sangrías extraños. Simplemente haga clic en un botón y todo su código estará listo para su primer plano (tal vez con Polacode desde arriba).

Conclusión

Esta lista puede tener miles de elementos. De hecho, probablemente algunos de ustedes tienen cientos de extensiones diferentes instaladas que habilita y deshabilita en diferentes momentos. Pero creemos que estas son las extensiones de VS Code que puede instalar y luego aprender qué más desea a medida que profundiza en el mercado.

¿Cuáles son sus extensiones de VS Code preferidas? ¡Háznoslo saber en los comentarios!

Imagen destacada del artículo por SVIATLANA SHEINA / shutterstock.com