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

## Add-ESLint-to-Laravel-Mix.md

      
    Raw
  

              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