Microsoft Visual Studio Code (VS Code) es uno de los mejores editores de código para desarrolladores de software. Desde su lanzamiento, su popularidad ha aumentado no solo por la plataforma estable que proporciona, sino también por la naturaleza extensible que Microsoft incorporó. El mercado de extensiones es una cornucopia de complementos y funciones 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 hoy para que no se pierda ninguna.
Encabezando nuestra lista está el acertadamente titulado Sublime Text Keymap and Settings Importer . En caso de que el título no fuera lo suficientemente descriptivo, esta extensión le permite extraer sus mapas de teclas y configuraciones existentes de Sublime Text para que pueda pasar sin problemas a usar VS Code como predeterminado. Dado que a tanta gente le encanta Sublime y han pasado años haciéndolo, hacer que VS Code conserve la memoria muscular ganada de ese editor tiene mucho sentido.
2. Fragmentos de código JavaScript (ES6)
Escribir JavaScript (o cualquier código) puede volverse engorroso cuando repites 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. Par de corchetes Colorizer 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 hacer que el código en sí funcione, no el editor.
4. ESLint
En muchos sentidos, ESLint es el filtro para JavaScript. Detectar errores y brindarle comentarios y advertencias inmediatos 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. Gerente de Proyecto
Un problema con VS Code que surge con bastante frecuencia es cómo cambiar entre diferentes proyectos. Por defecto, el flujo no es precisamente de lo 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. Esto no es tanto una mejora del editor como un aumento de 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 probarlo. 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 bonito
Todos queremos un código más bonito. Entonces, probablemente todos deberíamos instalar Prettier para manejar eso por nosotros. La descripción describe a Prettier como un «formateador de código obstinado, impone un estilo consistente al analizar su código y volver a imprimirlo con sus propias reglas que tienen en cuenta la longitud máxima de la línea, ajustando el código cuando es necesario». Es posible que no desee usarlo para todos los idiomas o proyectos, por lo que hay muchos ajustes de configuración para que pueda personalizarlo a su gusto.
8. Gitlink
Nos gusta gitlink por su simplicidad. Si bien existen muchas extensiones de Git, una de las características 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. Aún más que eso, comentar bien su código es una habilidad que debe enseñarse en cada salón de clases de informática y campamento de programación . Dicho esto, Better Comments es una de esas VS Code Extensions que todos necesitan porque, si crees en el nombre, te permitirá dejar mejores comentarios en tu código. Con accesos directos que le permiten diferenciar entre preguntas, exclamaciones, código comentado, consultas, alertas, resaltados y TODO, esta extensión no solo le facilitará la vida, sino que también facilitará la vida de 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 los íconos de VS Code , el editor se vuelve un poco más colorido y más fácil de navegar. El sistema de archivos está diseñado con íconos que representan varios tipos de archivos, y estos aparecen 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 doloroso. Literalmente a veces. Los iconos, que son tan fáciles de leer, evitan la fatiga visual y, por lo tanto, los dolores de cabeza. Entonces, para su salud, instale VS Code Icons .
11. Etiqueta de cierre automático
Tal vez seamos nosotros, pero escribir las etiquetas de cierre para cualquier idioma se convierte en una tarea ardua. Hay algo acerca de agregar ese / al final que hace que las pulsaciones de teclas se sientan un poco fuera de lugar. Nunca temas. La etiqueta de cierre automático nos ha facilitado la vida. Por eso queremos facilitarte la tuya. Es simple y fácil, y puede seguir escribiendo entre ellos y simplemente presionar las teclas hasta llegar a la siguiente línea o al final de esa. Instale esto y dele 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 obtener una imagen 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 estar cambiando constantemente de muestras, selectores de color, etc.
13. Polacódigo
Polacode es como una cámara Polaroid para tu editor de código. Diseñado para hacer que las instantáneas de su código sean más limpias y fáciles, esto es imprescindible para cualquier escritor de tutoriales que quiera que su código sea perfecto.
14. GitLens
Es difícil explicar completamente qué hace que GitLens sea tan bueno. Funciona como si Git y VS Code se hubieran diseñado teniendo en cuenta el otro y, en lugar de trabajar a través de jerarquías de línea de comandos, obtiene visualizaciones e información que elimina gran parte de la confusión del trabajo en equipo de Git. Puede ver cosas al pasar el mouse, ver cambios y anotaciones recientes, vistas de comparación dentro de VS Code, mapas de calor, historial de líneas y mucho más. Es básicamente la extensión Git perfecta , y creemos que deberías instalarla pronto.
15. Servidor en vivo
¿Alguna vez ha querido lanzar un servidor de desarrollo local desde su IDE y trabajar en él en tiempo real? No importa cómo respondiste esa pregunta, querrás 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 limpio 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 podría tener miles de elementos. De hecho, probablemente haya algunos de ustedes que tengan cientos de extensiones diferentes instaladas que habilitan y deshabilitan en diferentes momentos. Pero creemos que estas son las extensiones de VS Code que puede instalar y luego aprender qué más quiere a medida que profundiza en el mercado.
¿Cuáles son sus extensiones preferidas de VS Code? ¡Cuéntanos en los comentarios!
Imagen destacada del artículo por SVIATLANA SHEINA / shutterstock.com