Laravel Mix Eslint Config

This is a modified/extended version of laravel-mix-eslint -- which allows for more customization, or you can just use the defaults configuration settings.

The original extension could only customize config.options but all other config options were not editable, e.g.: 'compiler', 'enforce', 'exclude', 'include', 'issuer', 'loader', 'loaders', 'oneOf', 'options', 'parser', 'query', 'resolve', 'resource', 'resourceQuery', 'rules', 'sideEffects', 'test', 'type', 'use'.

This extension provides instant Eslint support to your Mix (v2.1 and up) builds, and is configurable for both react and vue.

Usage

First, install the extension.

npm install laravel-mix-eslint-config --save-dev

or

yarn add laravel-mix-eslint-config -D 

Then, require it within your webpack.mix.js file, like so:

1let mix = require('laravel-mix');
2
3require('laravel-mix-eslint-config');
4
5mix
6    .js('resources/assets/js/app.js', 'public/js').eslint({
7        enforce: 'pre',
8        test: ['js', 'vue'], // will convert to /\.(js|vue)$/ or you can use /\.(js|vue)$/ by itself. 
9        exclude: ['node_modules', 'some/other/dir'], // will convert to regexp and work. or you can use a regular expression like /node_modules/,
10        loader: 'eslint-loader',
11        options: {
12            fix: true,
13            cache: false,
14            //...
15        }
16    })
17    .less('resources/assets/less/app.less', 'public/css');

You can pass an object with options for the eslint-loader to the mix.eslint() function.

Passing in a config object is optional, if you choose not to go that route, you can just use mix.eslint(), which will use the defaults:

1  {  
2    enforce: 'pre',
3    test: /\.(js|vue)$/,
4    exclude: /node_modules/,
5    loader: 'eslint-loader',
6    options: {}
7  }

And you're done! Compile everything down with npm run dev.