Automatizaciones VSCode para desarrolladores frontend
@programacion
La programación es complicada. Hay muchas mejores prácticas para recordar, pautas a seguir y problemas conocidos que deben evitarse mientras se mantiene la productividad y la calidad del código.
El proceso de desarrollo moderno es inimaginable sin automatización. Si algo se puede automatizar y cambiar a herramientas, vale la pena hacerlo.
En este artículo, discutiré varios consejos de automatización de VS Code que los desarrolladores de frontend deben seguir. ¡Demole!
Live Server
Por lo general, cuando realiza un cambio en su código, necesita actualizar su navegador manualmente para ver los cambios, ¿verdad? En otras palabras, si realiza 100 cambios en su código, debe actualizar su navegador 100 veces ( ¡cansado y lento! 😫 ).
Live Server , la interesante extensión disponible en VSCode, automatiza esto para usted.
Le quita el estrés de guardar y actualizar el navegador cada vez que desea ver cómo se ven los cambios.
Live Reload, una característica brillante que viene con Live Server, garantiza que sus cambios se procesen inmediatamente tan pronto como guarde su trabajo. Esto se vuelve aún más emocionante si tiene habilitada la función de guardado automático de VSCode. Bastante impresionante, ¿verdad? 😋
Turbo Console Log
¿Alguna vez sintió la necesidad de automatizar el proceso de escribir mensajes de registro significativos? Turbo Console Log es la elección perfecta para eso. 🎉 Con la ayuda de Turbo Console Log, puede:
- Inserte mensajes de registro significativos automáticamente.
- Comente y descomente todos los mensajes de registro en el documento actual, insertado por la extensión.
- Elimina todos los mensajes de registro insertados por la extensión del documento actual.
Consejo: cree y comparta componentes independientes con Bit
Bit es una herramienta ultra extensible que le permite crear aplicaciones verdaderamente modulares con componentes creados, versionados y mantenidos de forma independiente .
Úselo para crear aplicaciones modulares y sistemas de diseño, crear y entregar micro interfaces o simplemente compartir componentes entre aplicaciones.
Live SASS Compiler
Ahora es posible compilar automáticamente sus archivos SASS o SCSS en CSS fácilmente y dentro del propio editor de código en tiempo real con el compilador Live SASS y automáticamente le brinda una vista previa en vivo de la aplicación o los estilos compilados en su navegador, al igual que esto.
Live SASS Compiler es una práctica extensión disponible en VSCode con muchas características interesantes que incluyen:
- Recopilación en vivo de SASS y SCSS.
- Control rápido de la barra de estado.
- Nombre de extensión personalizable (.css o .min.css).
- Estilo CSS exportado personalizable (expandido, compacto, comprimido, anidado).
- La ubicación del archivo personalizable de CSS exportado.
Etiqueta de cambio de nombre automático
¿Alguna vez cambió el nombre de una etiqueta HTML y olvidó o renombró incorrectamente la otra etiqueta? 😣 En una aplicación que tiene cientos de líneas de código, este tipo de actualización manual es difícil y tedioso.
Déjame darte dos opciones.
Puede gastar su valioso tiempo de codificación e intentar averiguar dónde salió mal o simplemente instalar una extensión y dejar que cambie el nombre de la segunda etiqueta por usted.
Auto Rename Tag es una extensión VSCode muy útil para desarrolladores; como sugiere el nombre, cambia automáticamente el nombre de la segunda etiqueta a medida que se actualiza la primera y viceversa.
ESLint
La vinculación de código es un análisis estático que se utiliza para verificar errores de programación o código que no se adhiere a pautas de estilo específicas.
"Las herramientas de linting como ESLint permiten a los desarrolladores descubrir problemas con su código JavaScript sin ejecutarlo". - Sitio de ESLint.
ESLint , una de las extensiones más descargadas en VSCode, con casi 13 millones de descargas para asegurarse de cumplir con las prácticas estándar como posicionamiento, sangría y muchas más. Esta extensión requiere que instale ESLint en su computadora, ya sea local o globalmente, y puede hacerlo simplemente ejecutandonpm install eslint.
Puede visitar la página del mercado de extensiones de Visual Studio Code para obtener instrucciones de instalación y configuración más detalladas.
¿Quiere ver un ejemplo sencillo de cómo puede ayudarle ESLint?
Este error es evidente cuando tiene una pequeña cantidad de código. Pero imagina que tu código contiene cientos de líneas. Al ejecutar ESLint, puede identificar rápidamente problemas en su código para aumentar la integridad y la calidad del código.
Prettier
Los desarrolladores dedican mucho tiempo y energía mental a formatear su código.
Después de todo, ya no necesita preocuparse por el estilo si Prettier le da formato a todo, ¿verdad?
Prettier , una extensión de VSCode de moda entre los desarrolladores de frontend, con 11 millones de descargas y contando, le quita el estrés. Puedes simplemente presionar esa tecla mágica, y poof 💨, el código está formateado. He aquí por qué Prettier es increíble:
- Cuando cambia la guía de estilo, Prettier puede aplicarla automáticamente en todo el código base.
- Sin esfuerzo para corregir el formato.
- No pierda el tiempo discutiendo el estilo en las solicitudes de extracción.
- No es necesario buscar reglas en una guía de estilo.
Prettier no solo admite JavaScript, sino que también admite una gran cantidad de sintaxis diferentes listas para usar, incluidos TypeScript, CSS, JSON, JSX, GraphQL y muchos más.
Hay otras extensiones similares, y una de las más populares es Beautify! Con algunas configuraciones y configuraciones, nunca tendrá que preocuparse por escribir códigos desagradables. Beautify convierte su código en uno hermoso y consistente.
Pre-Commit Hooks
Hasta ahora, he discutido diferentes extensiones en VSCode que puede usar para mejorar su productividad. Como consejo final para este artículo, voy a discutir los Pre-commit hooks. Entonces, ¿qué son los Pre Commit Hooks? Algunos pueden haber oído hablar de él antes y otros no.
Los Pre Commit Hooks son una de las características más subestimadas de git y pueden mejorar su productividad como desarrollador.
¿Alguna vez quisiste ejecutar un comando cada vez que confirmas o presionas? ¡Entonces los git hooks son exactamente lo que estabas buscando! 😎
Los Git Hooks son scripts personalizados que se ejecutan antes o después de un comando de git para automatizar las tareas manuales. Hay varios Git Hooks disponibles, y el Pre Commit Hooks es uno de mis favoritos.
Algunas de las características interesantes de los Pre Commit Hooks son:
- Se ejecutan primero, incluso antes de escribir un mensaje de confirmación
- Salir con cualquier cosa que no sea cero aborta la confirmación.
- Se utiliza un Pre Commit Hooks para inspeccionar la instantánea que está a punto de confirmarse.
asegúrese de que no ha olvidado nada, asegúrese de que se ejecuten las pruebas o examine lo que necesite para verificar en el código.
Con el uso de un enlace previo a la confirmación, puede verificar el estilo del código, los espacios en blanco finales, las importaciones no deseadas o verificar la documentación adecuada sobre nuevos métodos.
Conclusión
Las excelentes herramientas ayudan a los desarrolladores a escribir código más rápido, más limpio y más consistente. Desde el comienzo de su lanzamiento, Visual Studio Code (VS Code) introducido por Microsoft se ha ganado gradualmente muchos corazones.
En este artículo, he discutido diferentes extensiones y métodos que puede usar en VSCode, que aumentarán su productividad y automatizarán el proceso de desarrollo.
Hay muchas más extensiones de VS Code que puede explorar para todo tipo de casos de uso. Si encuentra alguna extensión que valga la pena compartir, menciónela en los comentarios a continuación.