Mejor editor de código para Vue.js

Con un número creciente de editores de código de calidad para elegir, es posible que se pregunte cuál es el mejor editor de código para Vue.js. Algunos desarrolladores están tan comprometidos con sus editores como con sus creencias políticas, por lo que obtendrás diferentes respuestas dependiendo de a quién le preguntes.

Pero cuando se trata de codificar en Vue, una de las mejores personas para preguntar es Evan You, el creador de Vue. Entonces, ¿qué usa él? Visual Studio Code.

En una entrevista, se le preguntó sobre el tema, y ​​él respondió:

... Cambié de un lado a otro hasta hace poco comencé a usar TypeScript y, dado que VS Code TypeScript es tan bueno, cambié (permanentemente) a VS Code.

Si bien Vue no requiere que use TypeScript, su código fuente pronto se escribirá en él, como cubrimos en esta publicación en Vue 3.0.

Puede que esté pensando ... Pero no estoy trabajando en el código fuente, y no codifico Vue con TypeScript, ¿VS Code sigue siendo relevante para mí?

Eso me lleva al tema de Vetur, que es una extensión rica en funciones que le brinda elementos como resaltado de sintaxis en archivos .vue, fragmentos, linting, verificación de errores y formateo, así como autocompletado y depuración. En este punto, es la mejor extensión de Vue para un editor de código. Y debería serlo, porque fue desarrollado por Pine Wu, quien es miembro del equipo central de Vue.

Entonces, si está interesado en usar VS Code para el desarrollo de Vue (o ya lo está), puede seguir a continuación mientras le muestro cómo optimizar VS Code.

¿Qué vamos a aprender?

Vamos a aprender cómo:

  • Obtenga resaltado de sintaxis en nuestros archivos .vue
  • Utilice fragmentos de código para un flujo de trabajo más rápido
  • Configure nuestro editor para formatear automáticamente nuestro código
  • Y explore otras extensiones útiles que mejorarán nuestra experiencia de desarrollo

Instalando Vetur

Hay varias características que hacen de VS Code un excelente entorno para el desarrollo de Vue, incluido Vetur, un complemento diseñado por Pine Wu, un miembro central del equipo de Vue.js.

Aquí en VS Code, si abrimos un archivo .vue, como este archivo About.vue, vemos todo este código gris. Esto se debe a que VS Code no resaltará automáticamente la sintaxis en los archivos .vue.

Vetur puede solucionar esto por nosotros y brindarnos otras características diseñadas para mejorar la experiencia del desarrollador.

Así que vamos a instalarlo ahora. Abre la tienda de extensiones.

Luego busque “Vetur”, selecciónelo en los resultados de búsqueda y haga clic en Instalar. Luego haga clic en Recargar.

Características de Vetur

Ahora que Vetur está instalado, echemos un vistazo a sus características.

Resaltado de sintaxis Al escribir el comando + P y al escribir el nombre de un archivo .vue, podemos abrir el archivo About.vue. Como puede ver, ahora nuestro código está recibiendo el resaltado de sintaxis adecuado. Impresionante: no más código gris.

Al revisar el archivo Home.vue, podemos ver que nuestro JavaScript también se resalta correctamente.

Fragmentos Otra característica que Vetur viene empaquetada con sus fragmentos de código. Estos son "fragmentos" de código que le permiten ahorrar tiempo y le permiten crear rápidamente fragmentos de código de uso común.

Vamos a crear un nuevo componente para ver esto en acción. Nos llamaremos EventCard.vue. Ahora, si escribimos la palabra "scaffold" en un archivo .vue y presionamos ENTER, esto llenará automáticamente ese archivo con el esqueleto, o scaffold, de un solo componente de archivo .vue.

Emmet Vetur también viene empaquetado con Emmet. Esta es una herramienta popular que le permite usar accesos directos para construir su código.

Por ejemplo, podemos escribir h1 y presionar enter, y esto creará un elemento h1 de apertura y cierre.

Cuando escribimos algo más complejo, como div> ul> li, producirá:

        
                
  •         
    

Si Emmet no parece estar funcionando para usted, puede agregar esto a su Configuración de usuario:

"emmet.includeLanguages": {
          "vue": "html"
      },

Para obtener más información sobre cómo Emmet puede acelerar su desarrollo, vaya aquí.

Instalación de ESLint y Prettier

Ahora, debemos asegurarnos de tener ESLint y Prettier instalados. En la tienda de extensiones, buscaremos ESLint, luego lo instalaremos. Y haremos lo mismo para Prettier. Una vez que esté instalado, presionaremos reload para recargar VS Code.

Configurar ESLint

Ahora que están instalados, necesitamos agregarles un poco de configuración adicional.

Cuando creamos nuestro proyecto desde la terminal, elegimos crearlo con archivos de configuración dedicados, lo que nos dio este archivo .eslintrc.js, donde podemos configurar ESLint para este proyecto. Si no hubiéramos elegido archivos dedicados, encontraríamos las configuraciones de ESLint dentro de nuestro package.json.

Entonces, en nuestro archivo .eslintrc.js, agregaremos:

'plugin: más bonito / recomendado'

Esto habilitará el soporte Prettier en ESLint con la configuración predeterminada.

Entonces nuestro archivo ahora se ve así:

module.exports = {
      raíz: verdadero
      env: {
        nodo: verdadero
      },
      'extiende': [
        'plugin: vue / essential',
        'plugin: más bonito / recomendado', // agregamos esta línea
        '@ vue / prettier'
      ],
      reglas: {
        'no-console': process.env.NODE_ENV === 'producción'? 'error': 'apagado',
        'no-debugger': process.env.NODE_ENV === 'producción'? 'error': 'apagado'
      },
      parserOptions: {
        analizador: 'babel-eslint'
      }
    }

Configurar Prettier

También tenemos la opción de crear un archivo de configuración más bonito, para agregar algunas configuraciones especiales de acuerdo con nuestro estilo personal o las preferencias de nuestro equipo.

Lo crearemos aquí y lo llamaremos .prettierrc.js.

Y adentro, escribiremos:

module.exports = {
        singleQuote: verdadero,
        semi: falso
    }

Esto convertirá comillas dobles en comillas simples y se asegurará de que los puntos y comas no se inserten automáticamente.

Ajustes de usuario

Para optimizar aún más el Código VS para una gran experiencia de desarrollo, agregaremos algunas configuraciones a nuestra Configuración de usuario. Para acceder a la Configuración del usuario, haga clic en Código en la barra de navegación superior, luego en Preferencias y luego en Configuración. Esto abrirá una ventana de Configuración de usuario donde puede agregar configuraciones en json.

Primero, queremos agregar:

"vetur.validation.template": falso

Esto desactivará la función de enlace de Vetur. En su lugar, confiaremos en ESLint + Prettier.

Ahora queremos decirle a ESLint qué idiomas queremos que valide (vue, html y javascript) y establecer autoFix en verdadero en cada uno:

"eslint.validate": [
        {
            "idioma": "vue",
            "autoFix": verdadero
        },
        {
            "idioma": "html",
            "autoFix": verdadero
        },
        {
            "idioma": "javascript",
            "autoFix": verdadero
        }
    ],

Luego, por si acaso, le diremos a ESLint que autoFixOnSave.

"eslint.autoFixOnSave": verdadero,

Y dígale a nuestro editor que formatee OnSave.

"editor.formatOnSave": verdadero,

Probándolo

Para probar que esto está funcionando, agregaremos una propiedad de datos a nuestro componente EventCard aquí, y agregaremos una cita: "Quiero ser soltero" y luego agregaremos un punto y coma aquí también. Cuando presionamos guardar, nuestras comillas se convierten en comillas simples y se elimina el punto y coma. Impresionante, está funcionando.

Herramientas adicionales

Ahora echemos un vistazo a algunas herramientas adicionales que pueden ayudar a acelerar su desarrollo.

Copiar ruta relativa Copiar ruta relativa es una extensión que le permite copiar la ubicación donde vive un archivo, en función de su relación con el directorio al que se está vinculando.

Vamos a buscarlo, instalarlo y luego verlo en acción.

En nuestro archivo Home.vue, vemos que ya hay una ruta relativa aquí, donde estamos importando el componente HelloWorld.

Para obtener la ruta relativa de un archivo que queremos importar, hacemos clic derecho en el archivo y luego seleccionamos Copiar ruta relativa. Ahora, cuando pegamos lo que se copió, vemos que tenemos la ruta relativa precisa. Observe este src. El comentario aquí nos permite saber que, debido a la forma en que está configurado nuestro proyecto, podemos usar @ en su lugar.

Terminal integrado Una característica incorporada conveniente del editor VS Code es su terminal integrado, que puede usar en lugar de cambiar a su terminal separado. Puede abrirlo con el método abreviado de teclado: `ctrl +` `

Más fragmentos Si está interesado en instalar algunos fragmentos de código convenientes adicionales, puede descargar un conjunto completo de fragmentos de código Vue VSCode, creado por la miembro del equipo Core Vue Sarah Drasner.

Busquemos la extensión con su nombre, sarah.drasner. Allí están. Ahora podemos instalar y recargar.

Echemos un vistazo a ellos en acción.

Si escribimos vif en un elemento de nuestra plantilla, eso nos dará una declaración v-if, y al escribir von nos dará un controlador de eventos completo. En lugar de escribir manualmente una propiedad de datos, simplemente podemos escribir vdata que creará una para nosotros. Podemos hacer lo mismo para agregar accesorios con vprops. Incluso podemos usarlo para crear el código para importar rápidamente una biblioteca, con vimport-lib. Como puede ver, estos son fragmentos muy útiles y que ahorran tiempo.

Tenga en cuenta que si está utilizando esta extensión de Fragmentos, se recomienda agregar una línea a su Configuración de usuario:

vetur.completion.useScaffoldSnippets debe ser falso

Esto asegurará que estos fragmentos no entren en conflicto con los de Vetur.

Temas de color Finalmente, si se pregunta cómo cambiar su tema en VS Code, o si se pregunta cuál estoy usando aquí, puede ir a Código> Preferencias> Tema de color.

Como puede ver, estoy usando FlatUI Dark. Puede cambiar el color de su tema a cualquiera de estas opciones aquí, o puede buscar otros temas en la tienda de extensiones.

Si no ve uno que desee, también puede dirigirse al Mercado de Visual Studio en línea. Aquí, puede obtener una vista previa de toneladas de complementos y temas diferentes, como Night Owl de nuestra amiga Sarah Drasner. Puede instalarlo directamente desde el navegador y luego encontrarlo en sus Preferencias de tema de color.

Continuar aprendiendo

Para seguir aprendiendo conmigo, puede tomar el curso completo de Real World Vue en VueMastery.com.