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

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

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

```sh
./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.

```json
{
    "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.

```json
...
"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:

```json
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

```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

```json
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:

```sh
npm run watch
```