WordPress開発でESLintのextendsはrecommended-with-formattingを使う

結論

WordPress開発環境構築時、.eslintrc.*には@wordpress/eslint-plugin/recommended-with-formattingを書こう

.esrintrc.yml

extends:
  - plugin:@wordpress/eslint-plugin/recommended-with-formatting

JSONならこう

.eslintrc.json

{
    "extends": [ "plugin:@wordpress/eslint-plugin/recommended-with-formatting" ]
}

どうやってもWordPressコーディング規約が反映されない

ここからは過程の解説です。

WordPressの公式ハンドブックや解説ブログには以下のように指定しろとの記述があります。

.eslintrc.json

{
    "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ]
}

僕はyamlで書くほうが好きなので（コメント使えるし！）以下のように記述。

.esrintrc.yml

extends:
  - plugin:@wordpress/eslint-plugin/recommended

しかし何度試してもWordPressが推奨するフォーマットにならず、例えば以下のように引数の空白を詰めろと指摘されます。

WordPressが推奨するコーディング規約は本来引数や配列等の括弧はスペースを開けるルールが大半なのでこれはおかしい。

そこで@wordpress/gutenbergのGitHubリポジトリを調べました。

@wordpress/scriptsでインストールされる各種パッケージは全て@wordpress/gutenberg内に含まれています。
例えばeslint-pluginはpackages > eslint-pluginにあります。

そこで「eslint」を含むissueを検索して片っ端から見ていったところ以下のコメントを発見しました。

https://github.com/WordPress/gutenberg/issues/24160#issuecomment-716211969

@aduth the issue seems to be that prettier conflicts with other (default) options of eslint, which undoes fixes it applies, ending up with a mess.
Solution: use "plugin:@wordpress/eslint-plugin/recommended-with-formatting" instead of "plugin:@wordpress/eslint-plugin/recommended" to get rid of this "problem".

要約すると「plugin:@wordpress/eslint-plugin/recommendedではなく、plugin:@wordpress/eslint-plugin/recommended-with-formattingを使え」とのこと。

うっそだーと思いながら試してみました。

.esrintrc.yml

extends:
-  - plugin:@wordpress/eslint-plugin/recommended
+  - plugin:@wordpress/eslint-plugin/recommended-with-formatting

・・・エラーが消えた！

とのことでめでたしめでたし、これからは@wordpress/eslint-plugin/recommended-with-formattingを使うことにします。

@wordpress/eslint-plugin/recommended-with-formatting

ちょっとメモがてら。

WordPress公式ハンドブックにはrecommended-with-formattingについて次のようにちらっと書かれていました。

There is also recommended-with-formatting ruleset for projects that want to opt out from Prettier. It has the native ESLint code formatting rules enabled instead.

Prettierを使用しないプロジェクト用のルールセットで、こちらはESLintのフォーマッタが有効になっているそうです。

でも多くの解説サイトでは「Prettier不要、ESLintだけでいけるからrecommendedだけ指定しておけばOK」的なことが書いてあったんですが、どう考えても用途的にはこちらの方が適格そうです（実際僕もこれで目的が達せましたし）。

ともかくrecommended-with-formattingを使おうと言及しているのは海外サイトも含めて多分先述したissueコメントぐらいだったので、備忘録として残しておきます。