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 鈥嬧媏n 茅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:



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



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.

Source: https://habr.com/ru/post/440066/


All Articles