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

Mid / Sen. Software Engineer
Clearwater, FL
ShineOn
Full Stack or Back-End Developer
Alexandria, VA; Tallahassee, FL; Orlando, FL
Marketing for Change
Full Stack Software Engineer
Atlanta, GA or Remote
Voxie
Laravel/PHP Developer
Chicago, IL
Neon One
Software Engineer, Web Applications
Vaughan, ON, Canada
Blast Motion
Contract Services Software Engineer (Laravel | Vue | Tailwind)
Remote
Riverbed Technology
Senior Laravel Developer
Wilmington, NC
GE Software Inc.