Larvel 6 に入れた Vue.js 3 の環境で、 ESLint と Prettier を使う方法

本投稿は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きに当たります。

方針のまとめ

• .eslintrc.js の extends について
  • Vue.js に関するルールは plugin:vue/vue3-recommended に任せる。
  • 他のルールは eslint:recommended に任せる。
  • Prettier との競合を避けるために prettier を使う。
• ESLint と Prettiier は別々に実行する。

導入作業のまとめ

• 依存パッケージの追加 → npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue prettier
• .eslintrc.js

  module.exports = {
      root: true,
      env: {
        node: true,
      },
      extends: [
        "plugin:vue/vue3-recommended",
        "eslint:recommended",
        "prettier",
      ],
      rules: {},
  };
  

• .prettierrc

  {
    "tabWidth": 2,
  }
  

• package.json への追加内容

  $ git diff laravel/package.json
  diff --git a/laravel/package.json b/laravel/package.json
  index ce4fa08..0cc621e 100644
  --- a/laravel/package.json
  +++ b/laravel/package.json
  @@ -7,7 +7,9 @@
           "watch-poll": "npm run watch -- --watch-poll",
           "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js   --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
           "prod": "npm run production",
  -        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress   --config=node_modules/laravel-mix/setup/webpack.config.js"
  +        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress   --config=node_modules/laravel-mix/setup/webpack.config.js",
  +        "lint": "eslint --ext .js,.vue --fix --ignore-path .gitignore resources/",
  +        "format": "prettier --write --ignore-path .gitignore resources/**/*.{js,vue}"
       },
       "devDependencies": {
           "@vue/compiler-sfc": "^3.0.11",
  $
  

実際の作業

インストール

npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue prettier

確かめてみました。意図通りバージョンが出力されましたので OK です。

$ node_modules/.bin/eslint -v
v7.24.0
$
$ node_modules/.bin/prettier -v
2.2.1
$

設定

次のファイルを eslint 、 prettier を実行する場所に置きました。

.eslintrc.js

module.exports = {
    root: true,
    env: {
      node: true,
    },
    extends: [
      "plugin:vue/vue3-recommended",
      "eslint:recommended",
      "prettier",
    ],
    rules: {},
};

extends のそれぞれの内容です。

• plugin:vue/vue3-recommended: Vue.js 3 の推奨設定。 Available rules | eslint-plugin-vue
• eslint:recommended: 推奨設定。 List of available rules – ESLint – Pluggable JavaScript linter
• prettier: ESLint で Prettier と競合するルールを無視する。 prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

.prettierrc

{
  "tabWidth": 2,
}

ルールの一覧は Options · Prettier だと思います。

試して調整する

実際に実行してみたり、コマンドのヘルプを見たりして、 eslint, prettier のコマンドは次に落ち着きました。

node_modules/.bin/eslint --ext .js,.vue --fix --ignore-path .gitignore resources/

node_modules/.bin/prettier --write --ignore-path .gitignore resources/**/*.{js,vue}

eslint を実行したとき、もともとのコードの次の部分でエラーとなってしまいました。

$ node_modules/.bin/eslint --ext .js,.vue --fix --ignore-path .gitignore resources/

/var/www/html/laravel/resources/js/bootstrap.js
  14:13  error  Empty block statement  no-empty

✖ 1 problem (1 error, 0 warnings)

$

これから書いていくコードはこのようにエラーを出したいですけれども、もともと Laravel に存在していた部分に関しては、あえてこのようなコードになっているかと思いますのでエラー自体を抑制したいです。

そこで、 no-empty – Rules – ESLint – Pluggable JavaScript linter を見ると 2 通りほどやり方はあるようですが、次のようにして、エラーを抑制しました。

注意点としては、 /* eslint no-empty: ["error", { "allowEmptyCatch": true }] */ はどこに書いてもそのファイル全体に適用されるようなので、新たにファイルに手を加えたいときに同じエラーの出るような間違いを犯したとしても無視されてしまう、ということでしょう。

$ git diff
diff --git a/laravel/resources/js/bootstrap.js b/laravel/resources/js/bootstrap.js
index 8eaba1b..5236cfc 100644
--- a/laravel/resources/js/bootstrap.js
+++ b/laravel/resources/js/bootstrap.js
@@ -6,6 +6,7 @@ window._ = require('lodash');
  * code may be modified to fit the specific needs of your application.
  */

+/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
 try {
     window.Popper = require('popper.js').default;
     window.$ = window.jQuery = require('jquery');
$

package.json の scripts に登録する

これでいつでも eslint, prettier を実行できるようにはなりましたが、コマンドが長いですし、オプションもたくさんあります。毎回打ってられません。

そこで、 package.json の scripts に登録して、短いコマンドで実行できるようにしました。ポイントは node_modules/.bin/ のファイルを指定する場合は、 node_modules/.bin/ を省略できる、ということです。

$ git diff laravel/package.json
diff --git a/laravel/package.json b/laravel/package.json
index ce4fa08..0cc621e 100644
--- a/laravel/package.json
+++ b/laravel/package.json
@@ -7,7 +7,9 @@
         "watch-poll": "npm run watch -- --watch-poll",
         "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
         "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "lint": "eslint --ext .js,.vue --fix --ignore-path .gitignore resources/",
+        "format": "prettier --write --ignore-path .gitignore resources/**/*.{js,vue}"
     },
     "devDependencies": {
         "@vue/compiler-sfc": "^3.0.11",
$

以上で、 esling は npm run lint で、 prettier は npm run format でそれぞれを実行できるようになりました。

ただし、注意点も生まれました。 npm run lint でエラーとなった場合、次のようなエラーメッセージが表示されるため、ドキッとするのです。終了コードが 0 ではないのでしょうね。 eslint でエラーとならない場合は、終了コードが 0 となり、この現象は発生しません。ですので放っておくことにします。

$ npm run lint

> @ lint /var/www/html/laravel
> eslint --ext .js,.vue --fix --ignore-path .gitignore resources/


/var/www/html/laravel/resources/js/bootstrap.js
  14:13  error  Empty block statement  no-empty

✖ 1 problem (1 error, 0 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ lint: `eslint --ext .js,.vue --fix --ignore-path .gitignore resources/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/app/.npm/_logs/2021-04-25T21_25_25_505Z-debug.log
$

補足。本投稿を書いているときに知ったこと

コマンドは、 node_modules/.bin/prettier でも実行可能だということ。もちろん、インストールした場所の node_modules/prettier/bin-prettier.js や node_modules/eslint/bin/eslint.js を使っても良い。

おわりに

ESLint と Prettier は Vue Cli で Vue.js を触っているときにも使っておりました。ただ、このときは設定済みでした。

今回、初めてまともにこれらを扱ってみたこともあり、勉強することも迷うこともたくさんありました。その中で、次のページが役立ったと印象に残りましたのでリストアップします。

• Step by Stepで始めるESLint – Qiita
• ESLint 設定を作成する技術
• ESLintのルールを全部手動で設定するのは大変だからやめておけ – Qiita
• eslint-plugin-prettier を ESLint から 分離するサンプル – Intellij IDEA の設定変更も | DevelopersIO
• 【Laravel Mix】ESLintとPrettierを導入する方法
• LaravelにESLintとPrettierを導入する時にやったことの全て – Qiita
• 既存のLaravelプロジェクトに入ってたVueまわりの環境を整備した – GAミント至上主義

以上です。