Adding eslint to your Laravel application

Add-ESLint-to-Laravel-Mix.md

1. Add eslint and eslint-loader and eslint-plugin-vue to your projects package.json file

npm i eslint eslint-loader eslint-plugin-vue --save-dev

2. Create a base configuration by --init

./node_modules/.bin/eslint --init

it will ask you a number of questions for my laravel projects I use the following:

• Are you using ECMAScript 6 features? Yes
• Are you using ES6 modules? Yes
• Where will your code run? Browser
• Do you use CommonJS? Yes
• Do you use JSX? No
• What style of indentation do you use? Tabs
• What quotes do you use for strings? single
• What line endings do you use? Unix
• Do you require semicolons? No
• What format do you want your config file to be in? JSON

You’ll end up with a new file called .eslintr.json within your project root like so.

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

3. register the eslint-vue-plugin in your .eslint.json file by adding it to the extends block.

...
"extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
],
...

There are actually a number of different default config values for the eslint vue plugin that add increasingly stricter rule sets to be applied to the linter. They are as follows:

plugin:vue/base 
plugin:vue/essential
plugin:vue/strongly-recommended
plugin:vue/recommended

4. Adding a new build step by adding a new script to our package.json

{      
  "script": {
    ...
    "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue"
  },
}

5. Add ESLint to Laravel Mix

Add the following to the beginning of the Laravel Mix configuration file webpack.mix.js

const { mix } = require('laravel-mix')

// config eslint
mix.webpackConfig({
  module: {
    rules: [
      {
        enforce: 'pre',
        exclude: /node_modules/,
        loader: 'eslint-loader',
        test: /\.(js|vue)?$/ 
      },
    ]
  }
})

6. Finally test working

Then execute npm run watch to get a code specification check reminder:

npm run watch