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

Thanks for great guide! :)
there's just a typo in "You’ll end up with a new file called .eslintr.json within your project root like so."
file is named .eslintrc.json

eslint-loader is deprecated and we are recommended to use ESLint Webpack plugin. Was looking into tweaking settings to use the webpack plugin instead and bumped into this thread. Do think I need to adjust my .eslintrc.json as I use vue.common.js and added acceptance for esm6. Also guess amd can go on this setup with Vue 2.6.14:

{
    "env": {
        "browser": true,
        "es6": true,
        "amd": true,
        "jquery": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "Vue": true,
        "EventBus": true,
        "axios": true,
        "_": true,
        "tinymce": true,
        "Vuex": true,
        "preview": true
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

also may need to added the recommended eslint/plugin . Now only have

"eslint": "^8.1.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-vue": "^6.2.2",

So thanks for sharing this.. and if you did upgrade.. looking forward to feedback on that.

How I can set to not receive erros from eslint-vue when using Inertia tags like ? thanks

I don't want to configure the file in the package.json I want to configure the in .eslintrc.cjs any other way?