Las 10 principales extensiones de VS Code para aumentar la productividad

Una de las claves de la popularidad de VS Code es su inigualable ecosistema de extensiones que brindan funcionalidad adicional y mejoran la experiencia general de codificación.

En este artículo, voy a compartir una lista seleccionada de mis diez principales extensiones de VS Code que impulsarán su productividad y lo harán más efectivo como desarrollador. Nos sumergiremos en lo que hacen estas extensiones, cómo funcionan y por qué facilitan la codificación.

GitLens

GitLens es una extensión muy popular, pero siempre vale la pena mencionarla debido a su conveniencia para el flujo de trabajo de cualquier desarrollador. A menudo, como desarrolladores, queremos saber quién escribió una línea de código o los autores de un archivo, y GitLens le permite visualizar el contexto de git directamente en sus archivos de VS Code. Mi caso de uso favorito para la extensión es cuando necesito encontrar a las personas adecuadas para etiquetar en un PR. Con GitLens, obtengo una vista previa de todos los autores de cada archivo y utilizo esta información para etiquetar a los compañeros. Los autores de archivos son especialmente buenos para las revisiones de relaciones públicas, ya que tienen el contexto necesario para brindar comentarios valiosos.

Además de las funcionalidades básicas, como ver el contexto de Git en torno a líneas y archivos, GitLens también le brinda la capacidad de realizar varias operaciones de Git en su editor en lugar de usar su terminal. Con GitLens, tiene acceso a revertir, fusionar e incluso reorganizar confirmaciones. Si está interesado en conocer todas las características que tiene GitLens, la documentación es extensa y cubre cada una.

Piezas

Pieces es un asistente de inteligencia artificial que le brinda la capacidad de guardar fragmentos de código clasificados automáticamente, convertir capturas de pantalla del código en texto y guardar automáticamente el código de uso frecuente en función de los patrones de codificación. La extensión VS Code de Pieces le permite administrar e importar todos sus fragmentos de código almacenados directamente en su editor. Sin embargo, el verdadero poder de Pieces viene cuando integras otras aplicaciones de Pieces, como su extensión de Chrome. Con solo VS Code y la extensión de Chrome, puede guardar un bloque de código en cualquier página web como Stack Overflow e importarlo directamente a un archivo de VS Code o importarlo usando la funcionalidad de autocompletar de Pieces.

Para comenzar con Pieces, descargue el motor de Pieces, Pieces OS, que impulsa todas sus integraciones, y la extensión VS Code que también puede encontrar en el enlace del sitio web anterior.

mejores comentarios

Better Comments brinda a los desarrolladores la capacidad de documentar mejor su código utilizando un sistema de etiquetas totalmente personalizable. Con la extensión, obtienes contexto semántico a través del estilo personalizado de diferentes tipos de comentarios. Por ejemplo, con Mejores comentarios, puede hacer que todos los comentarios de todo aparezcan en color azul si lo desea en su configuración, e inmediatamente, después de mirar un archivo con cualquier tarea pendiente, aparecerá en azul. Uso Mejores comentarios para comentarios comunes como bug , todo , query y question .

Registro de la consola Turbo

Al escribir JavaScript, a la mayoría de las personas les encantaría decir que usan un depurador todo el tiempo, pero ciertamente no siempre es así. A veces, el registro de la consola es solo una parte necesaria del proceso de desarrollo, y Turbo Console Log lo hace increíblemente fácil. Con Turbo Console Log, puede resaltar variables, usar métodos abreviados de teclado para insertar varios registros de consola y eliminarlos todos con un solo comando. Realmente es fundamental para acelerar el desarrollo y la depuración de JavaScript.

VivirCompartir

Con el tiempo, el trabajo remoto e híbrido se ha vuelto cada vez más común, pero esto no ha mitigado la importancia de la colaboración y la programación en pareja. LiveShare nos permite simular la programación en pareja en persona a través de sesiones de VS Code. Con LiveShare, puedes invitar hasta 30 personas a tus sesiones de programación en pareja. Otros también pueden seguirlo mientras trabaja con archivos, edita o escribe código según los permisos que otorgue, y hablar con usted a través de audio si tiene el paquete de extensión LiveShare.

Corredor de código

La optimización y refactorización del código es una parte importante del proceso de desarrollo, y Code Runner puede ser una herramienta indispensable en ese proceso. Siempre que desee probar un fragmento de código, Code Runner le brinda la posibilidad de resaltar su código y ejecutarlo para verificar si funciona o no. Atrás quedaron los días de escribir muchas líneas de código sin saber si su código está funcionando.

más bonita

Prettier es un formateador de código muy obstinado que aplica las mejores prácticas de JavaScript durante el desarrollo. Aunque Prettier también es un paquete de JavaScript independiente, el poder de la extensión es que se puede personalizar para reformatear su código de acuerdo con su configuración más bonita al guardar. La única advertencia con Prettier es que es muy obstinado y reformateará y estructurará el código a la fuerza. Si este no es el comportamiento deseado para usted, puede que no sea una buena opción, pero creo firmemente que ayuda a aplicar las mejores prácticas para los desarrolladores principiantes.

Estibador

La extensión de Docker ayuda a realizar operaciones de Docker sin salir de VS Code. La mayoría de los desarrolladores que trabajan en aplicaciones modernas han utilizado Docker para contener sus aplicaciones y, con la extensión, cualquier desarrollador puede interactuar con sus contenedores, volúmenes, redes, etc. de Docker. Además de realizar todas las operaciones locales relacionadas con Docker, los desarrolladores también pueden enviar imágenes a su registro de contenedores. Esta extensión realmente es compatible con cualquier nivel de desarrollo de Docker, desde principiante hasta avanzado.

Costo de importación

Al escribir aplicaciones web, siempre hay discusiones sobre el tamaño y el rendimiento del paquete de una aplicación. Si bien estas discusiones están garantizadas y son importantes, el mejor momento para tomar algunas medidas básicas en torno a estas inquietudes es cuando está escribiendo código. Import Cost nos ayuda a hacer exactamente eso con facilidad al mostrarnos el tamaño de las importaciones en línea junto a una declaración de importación. Debajo del capó, el costo de importación está utilizando el paquete web y brinda comentarios inmediatos a medida que cambia sus declaraciones de importación. Es sencillo y obligatorio, si es un desarrollador front-end que trabaja en aplicaciones web, ya que el rendimiento de la aplicación puede afectar la experiencia del usuario, la clasificación SEO y las tasas de conversión.

ESLint

Al igual que Prettier, ESLint también es un paquete de JavaScript independiente con una extensión de VS Code que lo acompaña. ESLint, el paquete, es a la vez un formateador de código y de linter que a menudo se inicia con muchos proyectos de JavaScript. El uso de la extensión ofrecerá sugerencias sobre formas de mejorar su código en tiempo real según las reglas de configuración que haya configurado. Nuevamente, esto ayuda a reforzar la práctica de escribir código bien escrito con las mejores prácticas mientras trabaja en su proyecto en lugar de pensar en estas cosas más adelante.

Si tiene alguna extensión que encuentre útil fuera de las descritas aquí, coméntelas a continuación y comparta este artículo o haga clic en Me gusta si aprendió sobre alguna nueva o útil.