Laravel MixにESLintをインストールする方法

Ⅰ. はじめに

タイトルの通り「Laravel MixにESLintをインストールする方法」です。

この記事は、以下の記事の通り作成した環境にESLintを導入する事を想定して書かれています。
Laravel 7.x で Vue.js を使う方法 - 備忘録

Ⅱ. やり方

1. 必要なパッケージをインストールする

npm install -D eslint eslint-config-airbnb eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react laravel-mix-eslint eslint-plugin-vue eslint-config-standard eslint-plugin-node eslint-plugin-promise eslint-plugin-standard babel-eslint

2. 新規ファイルを作成する

.eslintrc.js

// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  globals: {
    '_': true, // lodash
    'Enumerable': true // linq
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    'standard', // https://github.com/standard/standard/blob/master/docs/RULES-en.md,
    'plugin:vue/essential'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off'
  }
}

3. webpack.mix.js を編集する

let mix = require('laravel-mix')

// 以下を追加
if (!mix.inProduction()) {
  mix.webpackConfig({
    module: {
      rules: [
        {
          enforce: 'pre',
          exclude: /node_modules/,
          loader: 'eslint-loader',
          test: /\.(js|vue)?$/
        }
      ]
    }
  })
}
// ここまで

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css').version()

4. npm run watchを実行する

npm run watch

実行結果

参考

https://tiicle.com/items/127/add-eslint-laravel-mix