To have ESLint play nice with Laravel a few things have to be taken care of. Packages have to be installed, configuration has to be done, Webpack Mix adjusted, .eslintignore added and so on

Basic Setup

The basics can be read at https://gist.github.com/EmadAdly/b356690a4cb3b9a79d6757d5ebd6c93c . What you need is the following. Run the command:

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

to install Eslint, Eslint loader and the Eslint Vue Plugin. The basic configuration can be generated with:

./node_modules/.bin/eslint --init

Display Errors, Warnings & Compile

But what I missed here and in other blog posts was the option to run npm run dev, display errors and warnings and compile without issues. That can be done with this webpack.mix.js setup (redacted some):

const mix = require('laravel-mix');


/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 */
if (mix.inProduction()) {
  mix.webpackConfig({
    output: {
      publicPath: '/',
      chunkFilename: 'js/components/[name].[hash].js',
    }
  })
} else {
  mix.webpackConfig({
    module: {
      rules: [
        {
          enforce: 'pre',
          exclude: /node_modules/,
          loader: 'eslint-loader',
          test: /\.(js|vue)?$/,
          options: {
            emitWarning: true,
          },
        },
      ],
    },
    output: {
      publicPath: '/',
        chunkFilename: 'js/components/[name].js',
      },
  });
}


mix.options({
    processCssUrls: false
});

mix.js('...')
    .js('...')
    .js('resources/js/...')
    ...
    .sass('resources/sass/xxxx.scss', 'public/css')
    .sass('resources/sass/login.scss', 'public/css')
    .....

if (mix.inProduction()) {
    mix.version();
}
    
// MediaManager
mix.sass('resources/vendor/MediaManager/sass/manager.scss', 'public/assets/vendor/MediaManager/style.css').version();

Emit Warnings

The magic is here in one single line:

emitWarning: true,

It is part of the block that is fired if production is not run. So it is run on

npm run dev

or

npm run watch

This line of code will make sure Eslint always emit warnings, not errors, thereby not causing ELIFECYCLE errors and failed compilations. This way you get the best of both worlds. You get the feedback to improve your code, but you can still test in development mode.

Bonus

Here the other needed parts for the setup:

• .eslintrc.json
• package.json addition

The Eslint RC file .eslintrc.json has the following:

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

Here the addition to package.json

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