Integrar ESLINT con Vue.js

Por Darío Rivera

Publicado el 2020-10-19 en Vue.js

Para configurar ESLINT en un proyecto con Vue.js debes haber instalado primero ESLINT. Por lo general ESLINT viene integrado en proyectos creados con vue-cli, te invito a revisar nuestro artículo Cómo crear un scaffolding de aplicación en Vue.js si es el caso y vas a crear una aplicación desde cero.

Si creaste una aplicación en Vue.js sin haber seleccionado en los presets a ESLINT, lo más conveniente es agregarlo mediante vue-cli con el siguiente comando:

vue add @vue/cli-plugin-eslint

Por otro lado, si deseas instalar ESLINT de manera manual deberás realizar el procedimiento que describo a continuación.

Instalación

Lo primero que debes hacer es instalar la configuración de eslint necesaria para Vue.

npm i --save-dev eslint @vue/cli-plugin-eslint @vue/eslint-config-standard

También necesitarás instalar otros plugins de eslint para que la coniguración de Vue funcione correctamente.

npm i --save-dev \
eslint-plugin-import \
eslint-plugin-node \
eslint-plugin-promise \
eslint-plugin-standard \
eslint-plugin-vue \
babel-eslint

Esto, permitirá que puedas agregar en el archivo .eslintrc.js la siguiente configuración.

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Uso

Para ver a eslint en funcionamiento primero hagamos un cambio que requiera un fix. podemos por ejemplo agregar una coma después del seteo de la propiedad render en el archivo src/main.js.

new Vue({
  render: h => h(App), // <-- comma
}).$mount('#app')

Una vez hecho esto podemos ejecutar el siguiente comando:

npx vue-cli-service lint --no-fix

Obtendremos una salida como la siguiente:

error: Unexpected trailing comma (comma-dangle) at src/main.js:7:22:
  5 | 
  6 | new Vue({
> 7 |   render: h => h(App), // <-- comma
    |                      ^
  8 | }).$mount('#app')
  9 |

Suele ser una buena práctica agregar un script para que eslint arreglé automáticamente los archivos con errores. Podrías agregar por ejemplo el siguiente script:

..
  "scripts": {
    ..
    "lint": "vue-cli-service lint"
  },
...

Con esto bastaría correr el siguiente comando para arreglar los issues de eslint:

npm run lint

Instalación

Uso

Categorías