Webpack

【Laravel Mix】ESLintとPrettierを導入する方法

2019/11/16

今の職場では「Laravel Mix」を使っているのですが、今回「ESLint」「Prettier」を導入することになりました。

今まで「Laravel Mix」の経験があまりなく戸惑ったのですが、調べてみると単純にWebpackのラッパーらしいです。

アセットのコンパイル(Mix) 6.x Laravelを読むと、webapckConfigメソッドを使えば、Webpackの設定をマージしてくれるとのこと。なので「Laravel Mix」であることを強く意識する必要はなさそうですね。

以上のことを踏まえた上で、Laravel Mixを使って「ESLint」と「Prettier」を導入した時のことをメモとして残しておきます。

やりたいこと

JSファイル・vueファイルの記述を綺麗に保つために、Laravel Mixを使って「ESLint」と「Prettier」を導入します。そして、JSファイルの保存時に自動整形が走るようにするまで設定していきたいと思います。

なお、ESLintとPrettierの基本については、以下の記事がとても分かりやすいです。

ESLint - Prettier連携のやり方と仕組み - Qiita Prettier 入門 ~ESLintとの違いを理解して併用する~ - Qiita

初めて使ってみるという方は、これらの記事を読んでおくと良いと思います。

必要なパッケージをインストール

まずは、npmで必要なパッケージをインストールしちゃいましょう。
npm install eslint-loader eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev

インストールができたら、あとは簡単な設定で使えるようになります。

(※) パッケージの内容についても、上述した記事で分かりやすく解説されてます。詳しく知りたい方は、そちらを参照してください。

「.eslintrc.json」ファイルを作成する

次に、ESLintの設定ファイルである「.eslintrc.json」ファイルを作成します。 作成する階層は「package.json」などがある階層でOKです。

// .eslintrc.json

{
    "env": {
        "browser": true, // グローバルオブジェクト「window」とかが書けるようになる。
        "commonjs": true, // 「reauire」とかが書けるようになる。
        "es6": true // ES6の構文が書けるようになる。
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/strongly-recommended",
        "plugin:prettier/recommended" // 記述位置が重要。一番最後に書く。
    ],
    "parserOptions": {
        "sourceType": "module" // 「import」構文とか書けるようになる。
    },
    "rules": {
        "prettier/prettier": "error"
    }
}

軽くアバウトなコメントも入れていますが、環境によって設定内容を調整してください。 僕は少しだけルールを上書きして使っています。(ルールの上書きについては、後述)

「webpack.mix.js」を編集する

次にLaravel Mixの設定を変更しましょう。 コンパイル(トランスパイル)時に、ESLintによるチェックをかけて、ルールに沿ってない記述を自動整形するように設定します。

以下の記述を追記します。

// 中略

mix.webpackConfig({
  module: {
    rules: [
      {
        enforce: 'pre', // preを指定することで、付いてないローダーより先に実行できる。
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        options: {
          fix: true // Lint実行時に自動整形を行うかどうか。(prettierのルールで自動整形してくれる)
        }
      }
    ]
  }
})

これで、ESLintとPrettierを使えるようになりました。 Webpackが走る時に、コード整形を実行してくれるようになります。

「自動整形させずに、ちゃんとエラーを確認したい」という場合には、オプションで渡している「fix」を削除すればOKです。

コマンドで実行する

npxコマンドを使って、Lintをコマンドで実行することも可能です。fixオプションをつけることで自動整形まで行います。
npx eslint 対象パス [--fix]

fixオプションを使う場合は、パスに誤りがないかチェックした上で使ってください。

なお、以下の記事で紹介されているやり方で、無視するファイル群を定義することも可能です。 あらかじめ設定しておく方が安全ですね。

eslintで任意のディレクトリ、ファイルをチェック対象から除外する方法 - Qiita

ちなみにですが、Nuxtでプリセットしてくれる設定ファイルを見ていると、以下のように「.gitignore」を参照するような形で設定していました。

eslint --ext .js,.vue --ignore-path .gitignore .

整形ルールを変更する

プロジェクトやチーム、個人の趣向によって

  • セミコロン無しにしたい
  • シングルクォートで統一したい

といった感じで、prettierのルールを調整したいことがあるかもしれません。そんな時は「.eslintrc.json」のrulesを編集することで対応できます。

上記のルールを適用する場合は、以下のように編集します。

// .eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/strongly-recommended",
        "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {  // ここを編集!
        "prettier/prettier": [
            "error",
            {
              "singleQuote": true,
              "semi": false
            }
        ]
    }
}

prettierの他のオプションについては、以下の公式を参考にしてみてください。

Options · Prettier

Laravel Mixを使って、「ESLint」と「Prettier」を導入する方法については以上です。