Lint Your Vue Code with the Vue ESLint Plugin


December 12th, 2018


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:

1# Recommended
2vue add @vue/cli-plugin-eslint
4npm install --save-dev eslint eslint-plugin-vue
6yarn 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:

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

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

22:1 warning Expected indentation of 2 spaces but found 4 spaces vue/html-indent
33:1 warning Expected indentation of 4 spaces but found 8 spaces vue/html-indent

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

1module.exports = {
2 extends: [
3 // add more generic rulesets here, such as:
4 // 'eslint:recommended',
5 'plugin:vue/recommended'
6 ],
7 rules: {
8 // override/add rules settings here, such as:
9 // 'vue/no-unused-vars': 'error'
10 }

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:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.

Laravel News Partners