Lint Your Vue Code with the Vue ESLint Plugin

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.


Filed in: News


Newsletter

Join the weekly newsletter and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

Senior Quality Assurance Engineer
Remote
Bisnow Media
Senior PHP/Laravel Developer: Your Dream Work Environment
Remote
iPhone Photography School
Senior Software Engineer
Remote or San Francisco
Curology
Laravel Developer
Las Vegas, NV
V Shred
R&D Developer
Denver, CO
booj
Full-Stack Developer
Paris, France
Wingly
Full Stack Developer
Remote US-Only
atlasMind