Lint Your Vue Code with the Vue ESLint Plugin

The official ESLint plugin for Vue.js (eslint-plugin-vue) released v5.0 at the beginning of the month, so I thought it would be a good time to talk about this excellent tool for linting your Laravel/Vue projects.

Vue ESLint v5.0 covers even more rules from the official style guide then before and makes it easy to start linting Vue code without heavy configuration. This NPM package also makes it trivial to start linting your .vue files and following the style guide best practices.

You can install it with NPM, Yarn (my favorite), or the preferred Vue CLI:

# Recommended
vue add @vue/cli-plugin-eslint
 
npm install --save-dev eslint eslint-plugin-vue
 
yarn add -D eslint eslint-plugin-vue

If you install it with the Vue CLI tool, it automatically adds the lint to your package.json scripts configuration. If you install it for a Laravel project, you can use something like this:

"scripts": {
  "lint": "eslint --ext .js,.vue resources/js/"
}

Now, when you run yarn lint you will start seeing the linting output:

resources/js/components/ExampleComponent.vue
2:1  warning  Expected indentation of 2 spaces but found 4 spaces    vue/html-indent
3:1  warning  Expected indentation of 4 spaces but found 8 spaces    vue/html-indent
...

Your .eslintrc.js file could be as simple as this:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/recommended'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

Be sure to check out the official documentation for installation, setup, and a complete reference for using eslint-plugin-vue. To tweak your setup and preferences, you can use the handy reference of all the available rules in the documentation.