Extensiones VSCode para facilitar el desarrollo de JavaScript y Vue

Hasta la fecha, hay una cantidad suficiente de herramientas de desarrollo con soporte para el lenguaje JavaScript y los marcos basados ​​en él. La cuestión de elegir una herramienta específica está más allá del alcance de este artículo, trataré inmediatamente de describir mi experiencia de usuario con Visual Studio Code y las herramientas que están diseñadas para facilitar la vida de los desarrolladores de JS, en particular aquellos que usan Vue.

Hay muchos complementos en la tienda de extensiones VSCode, a continuación se enumeran los más convenientes para el desarrollo web.

HTML y CSS

Los estilos de diseño y escritura suelen ser una tarea monótona, por lo que las siguientes extensiones pueden facilitar y acelerar su trabajo:

• Etiqueta de cierre automático y etiqueta de cambio de nombre automático : las extensiones simples y convenientes, para simplificar el trabajo con el diseño, tienen soporte para componentes de archivo único Vue.
• CSS Peek es una extensión simple que agrega la capacidad de ver o navegar rápidamente una regla.
• Información de color : le permite ver información detallada sobre el color, tiene un buen margen de configuración.
• Color Highlight : agrega una pantalla de colores en forma de borde, si se detecta una codificación de color en el código.
• IntelliSense para nombres de clases CSS en HTML : analiza el entorno de trabajo para agregar la capacidad de completar automáticamente las clases CSS.

Javascript

• Debbugger para Chrome : una extensión para simplificar la depuración directamente desde el editor de código, funciona con todo lo que Chrome DevTools tiene.
• Fragmentos de código JavaScript (ES6) : un conjunto de fragmentos para JS que acelera enormemente el desarrollo.
• JSHint : extensión para consejos sobre el diseño y organización del código JS, tiene configuraciones flexibles.
• ESLint es un linter para JS con configuraciones flexibles.

Vue

No hay muchas extensiones adecuadas para trabajar con Vue, a continuación se detallan algunas de las más útiles:

• Vetur es un conjunto completo de los complementos más necesarios para trabajar con vue, como fragmentos, resaltado de sintaxis.
• Vue Peek : agrega una transición conveniente a los componentes vue.

Git

VSCode tiene soporte para trabajar con git fuera de la caja, pero aún así las funciones integradas no siempre son suficientes. Las siguientes son extensiones que harán que trabajar con git sea un poco más fácil:

• GitLens es probablemente la extensión más famosa para trabajar con git, que agrega muchas funciones para ver información de git.
• Historial de Git : agrega la capacidad de ver convenientemente el historial de cambios en git, tiene una interfaz bastante conveniente.
• Indicadores de Git : un indicador simple de la actividad de git en la bandeja inferior de VSCode.

Ambiente de trabajo y proceso de desarrollo.

Para un trabajo productivo, sería bueno tener ayudantes en forma de complementos que resalten errores simples, sugiriendo un estilo de escritura y otras sugerencias / acciones convenientes. Pruebe las siguientes extensiones:

• Colorizador de par de paréntesis : agrega una media luz a los paréntesis que rodean los bloques de código, facilita la percepción del código con anidamiento profundo, separando visualmente el código.
• Beautify es, en mi opinión, la extensión más conveniente para el estilo de código automático, se pueden encontrar más detalles en el enlace.
• Live Server es una extensión muy útil que le permite iniciar rápidamente su servidor en vivo, por ejemplo, para el diseño.
• Importar costo es una excelente extensión que muestra el tamaño del módulo importado, le permite seleccionar partes importadas del módulo con más detalle sin recurrir a analizadores de paquetes.
• NPM Intellisense : autocompletar para módulos npm.
• Abrir en el navegador es una extensión simple que agrega un punto de apertura en el navegador.
• Ruta Intellisense : autocompletar para nombres de archivos y su ubicación.
• Sincronización de configuración : después de completar la instalación de las herramientas necesarias y configurar el entorno, es conveniente guardar la configuración, esta extensión le permitirá sincronizar todo en git gist.
• Ordenar líneas : una forma fácil de organizar la clasificación de líneas en el código de acuerdo con las condiciones dadas.
• TODO Highlight es una extensión simple para resaltar palabras clave como TODO, FIXME.
• Espacios finales : resalta espacios adicionales.
• VS Live Share : muchos se enfrentaron a un problema cuando tuvieron que explicarle a un desarrollador remoto durante mucho tiempo dónde y qué estaba mal, esta extensión simplifica la vida en tales situaciones, lo que le permite hacer una demostración en vivo, respalda el trabajo de varios usuarios, arroja el entorno de ejecución a la máquina del cliente.
• Visual Studio IntelliCode : automatiza tareas rutinarias para desarrolladores en lenguajes como Python, TypeScript / JavaScript y Java.

Diseño de editor

• Darcula Theme : el diseño más exitoso en mi opinión, también puedo aconsejar a Monokai Pro .
• vscode-icons es el paquete de iconos más exitoso para VSCode.

También puede ser interesante.

• GraphQL para VSCode : un tipo de inteligencia para GraphQL, la extensión más conveniente, bajo el hollín, muy útil, más en el enlace.
• Markdown instantáneo : vista previa en vivo para el marcado de markdown.
• Pegar JSON como Código es una extensión conveniente que genera un modelo de tipo a partir de datos JSON. Admite TypeScript, Python, Go, Ruby, C #, Java, Swift, Rust, Kotlin, C ++, Flow, Objective-C, JavaScript, Elm y el esquema JSON.
• Rainbow CSV : luz de fondo para archivos CSV.
• Regex Previewer es una extensión muy útil para vistas previas regulares.
• SVG Viewer - Visor SVG.

Espero que esta lista te sea útil, estaré encantado de hacer adiciones.