Integrate ESLINT with Vue.js

By Darío Rivera

Posted On in Vue.js

To configure ESLINT in a project with Vue.js you must first have installed ESLINT. Generally, ESLINT comes integrated in projects created with vue-cli, I invite you to check our article How to create an application scaffolding in Vue.js if that's the case and you're going to create an application from scratch.

If you created a Vue.js application without selecting ESLINT in the presets, the most convenient thing is to add it through vue-cli with the following command:

vue add @vue/cli-plugin-eslint

On the other hand, if you want to install ESLINT manually, you will have to perform the procedure described below.

Installation

The first thing you need to do is install the necessary eslint configuration for Vue.

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

You will also need to install other eslint plugins so that the Vue configuration works correctly.

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

This will allow you to add the following configuration to the .eslintrc.js file.

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'
  }
}

Usage

To see eslint in action, let's make a change that requires a fix. We can, for example, add a comma after setting the render property in the src/main.js file.

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

Once this is done we can run the following command:

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

We will get an output like the following:

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 |

It is usually a good practice to add a script so that eslint automatically fixes files with errors. You could add, for example, the following script:

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

With this, running the following command would be enough to fix eslint issues:

npm run lint

Installation

Usage

Categories