Zenn
👯‍♀️

typescript-eslintのrecommendedって2種類あんねん

2023/10/05に公開
TypeScript
ESLint
tech

結論

eslint:recommended や plugin:@typescript-eslint/recommended を使用するだけでは no-floating-promises や restrict-plus-operands などの重要[1]なルールが有効になりません。

plugin:@typescript-eslint/recommended-type-checked を使用すると、これらのルールをまとめて有効にできます。

recommended?

TypeScript のプロジェクトではともに導入されることが多い ESLint と typescript-eslint 。公式ドキュメントの Getting Started に則って進めると、以下のようなconfigになっていることが多いのではないでしょうか。

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  // ...
};

実は、この設定だけではawait忘れを検知する no-floating-promises や、不自然な加算を検知する restrict-plus-operands が有効になりません。recommendedだからこれを使用しておけば安心、というわけではなかったのです...。

生き別れの兄弟、recommended-type-checked

typescript-eslintが提供するconfig の中には plugin:@typescript-eslint/recommended の他にもう1つ recommended と名のつくconfigがあります。それが plugin:@typescript-eslint/recommended-type-checked です。これは recommended の中でも型情報が必要なルールをまとめたものになります。

設定の詳細は packages/eslint-plugin/src/configs/recommended-type-checked.ts から確認できます。plugin:@typescript-eslint/recommended と比較すると 20行近く有効なルールが増えていますね。

この中に、await忘れを検知する no-floating-promises や 不自然な加算を検知する restrict-plus-operands を有効にする設定が含まれています。

繰り返しになりますが、これらのルールは、 eslint:recommended や plugin:@typescript-eslint/recommended では有効になりません。個別に有効にするか、 recommended-type-checked を使用する必要があります。

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended-type-checked',
  ],
  // ...
};

別れた経緯

リリースノートによると、これらのルールはもともと recommended に入っていましたが、 v2.0.0 にて分離されたようです。 導入を容易にするため、デフォルトのルールを速くするため、とのこと。

This is a slightly expanded set of rules, intended to be used in conjunction with plugin:@typescript-eslint/recommended. These rules specifically require type information. We separated these rules into a separate config to ease adoption and to make the base recommended "fast-by-default".

おわりに

みなさんは知っていましたか？自分は知らなかったのでびっくりしました...。より厳しいルール集の strict-type-checked もあるので、厳しさを求める場合はそちらもおすすめです。

参考

脚注

  1. 個人の感想です ↩︎

GitHubで編集を提案

Discussion