Linting Vue.js Components with eslint-plugin-vue

First off, install eslint and of eslint-plugin-vue.

# Yarn
$ yarn add eslint eslint-plugin-vue --save-dev
# NPM
$ npm install eslint eslint-plugin-vue --save-dev

Now, update (or create) your .eslintrc.json file. Make sure you extend one of the available linting levels for eslint-plugin-vue.

The available levels are:

• plugin:vue/base - Just the basic rules to make the parsing work. Doesn’t lint anything yet.
• plugin:vue/essential - The above, plus rules that exist solely to prevent errors or unexpected behavior in Vue.
• plugin:vue/strongly-recommended - The above, plus rules that are generally considered best practice.
• plugin:vue/recommended - The above, plus a few often-suggested style rules.

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
}

Many of the issues detected by those rules can be automatically fixed with eslint’s --fix option.

Now, if you open up a Vue file in your editor with some sort of eslint integration you might see… nothing. That’s because you need to associate the vue file type with the linter. This wasn’t previously a problem when using Vue files like HTML, as most integrations already supported HTML files.

Here’s how you’d fix the issue with Atom and VSCode. We’re still waiting on support in Sublime Text 3. Track this PR: https://github.com/roadhump/SublimeLinter-eslint/pull/169

For Atom + linter-eslint:

Go into Settings -> Packages -> linter-eslint and add text.html.vue to the “List of scopes to run eslint on” option. You may need to restart Atom.

Result:

For VSCode + Eslint:

Open your User Settings file and add

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
],

If you’ve already modified the eslint.validate property, just add the last item of the list above to it.

Result:

Now eslint should now run as expected and produce nice little warnings and errors to all of your Vue components. Hooray!