備忘録

備忘録

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

Ⅰ. はじめに

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

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

Ⅱ. やり方

1. 必要なパッケージをインストールする
npm install 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 --save-dev
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');

// 以下を追加
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');
4. npm run watchを実行する
npm run watch
実行結果

f:id:kagasu:20180506230229p:plain