Adding eslint to your Laravel application

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

tupywebteam/Add-ESLint-to-Laravel-Mix.md

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

2. Create a base configuration by --init

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

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

5. Add ESLint to Laravel Mix

6. Finally test working

2. Create a base configuration by `--init`