https://github.com/patrickcurl/laravel-mix-eslint-config

A more configurable plugin for laravel-mix and eslint
https://github.com/patrickcurl/laravel-mix-eslint-config

Last synced: about 1 month ago
JSON representation

A more configurable plugin for laravel-mix and eslint

• Host: GitHub
• URL: https://github.com/patrickcurl/laravel-mix-eslint-config
• Owner: patrickcurl
• Created: 2018-12-22T17:26:58.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-02-15T01:59:19.000Z (over 4 years ago)
• Last Synced: 2024-10-14T11:47:15.974Z (8 months ago)
• Language: JavaScript
• Size: 23.4 KB
• Stars: 1
• Watchers: 3
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        










# 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:

```js

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

require('laravel-mix-eslint-config');

mix

    .js('resources/assets/js/app.js', 'public/js').eslint({

        enforce: 'pre',

        test: ['js', 'vue'], // will convert to /\.(js|vue)$/ or you can use /\.(js|vue)$/ by itself. 

        exclude: ['node_modules', 'some/other/dir'], // will convert to regexp and work. or you can use a regular expression like /node_modules/,

        loader: 'eslint-loader',

        options: {

            fix: true,

            cache: false,

            //...

        }

    })

    .less('resources/assets/less/app.less', 'public/css');

```

You can pass an object with options for the [eslint-loader](https://github.com/webpack-contrib/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: 

```js

  {  

    enforce: 'pre',

    test: /\.(js|vue)$/,

    exclude: /node_modules/,

    loader: 'eslint-loader',

    options: {}

  }

```

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