EsLintのルールを幾つ知っていますか？

:::note
EsLintのRule、Configのライブラリについてまとめました
リンクも多用してるのでハブとして使って頂けると嬉しいです！
:::

# 1. 背景
コーディングルールのチェックを極力リンターに任せたいなと思い、この度便利なルールを調査しました！

:::note
ESLint,typescript-eslintの設定はこちらで紹介していますのでご覧ください！
[Eslintとtypescript-eslintを手動で設定してみる](https://qiita.com/yamatai12/items/d48fa55bddbfb3c1dc7d)
:::

# 2. EsLint

:::note
Version v8.57.0
:::

## recommended
https://eslint.org/docs/latest/rules

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/a932706e-20cc-715a-f995-2b573fccf312.png)
✅がついているルールがrecommendedです。

抜粋します、便利なものばかりです✨

- [no-cond-assign](https://eslint.org/docs/latest/rules/no-cond-assign)
条件式で代入演算子を使用しない

- [no-constant-condition](https://eslint.org/docs/latest/rules/no-constant-condition)
typoによって条件文が必ず通る、または通らなくなるということを防ぐ

- [no-debugger](https://eslint.org/docs/latest/rules/no-debugger)
debuggerを書かないようにする

- [no-dupe-else-if](https://eslint.org/docs/latest/rules/no-dupe-else-if)
if-else-ifチェーンの重複条件の禁止

- [no-duplicate-case](https://eslint.org/docs/latest/rules/no-duplicate-case)
ケースラベルの重複を禁止する

- [no-empty-character-class](https://eslint.org/docs/latest/rules/no-empty-character-class)
正規表現で空の文字クラスを許可しない

## recommended以外

以下はrecommended以外で便利なルールを抜粋して紹介します。

- [no-self-compare](https://eslint.org/docs/latest/rules/no-self-compare)
双方がまったく同じである比較を許可しない
typoの可能性を考慮

- [no-template-curly-in-string]()
    通常の文字列でテンプレート・リテラル・プレースホルダーの構文を無効にする
    typoの可能性を考慮
    ```ts:❌
    "${str}"
    ```
    ```ts:🟢
    `${str}`
    ```
- [no-useless-concat](https://eslint.org/docs/latest/rules/no-useless-concat)
リテラルやテンプレート・リテラルの不要な連結を禁止する。

- [no-unused-expressions](https://eslint.org/docs/latest/rules/no-unused-expressions)
未使用の式を許可しない

- [no-underscore-dangle](https://eslint.org/docs/latest/rules/no-underscore-dangle)
識別子の先頭にアンダースコアを使用しない

- [no-sequences](https://eslint.org/docs/latest/rules/no-sequences)
カンマ演算子の使用禁止


- [no-restricted-globals](https://eslint.org/docs/latest/rules/no-restricted-globals)
指定したグローバル変数の使用を許可しない

- [no-nested-ternary](https://eslint.org/docs/latest/rules/no-nested-ternary)
    ネストされた3項演算子を禁止する
    ```ts
    const foo = bar ? baz : qux === quxx ? bing : bam;
    ```

- [no-negated-condition](https://eslint.org/docs/latest/rules/no-negated-condition)
否定条件の禁止

- [no-multi-assign](https://eslint.org/docs/latest/rules/no-multi-assign)
連鎖した代入式の使用を禁止

- [no-magic-numbers](https://eslint.org/docs/latest/rules/no-magic-numbers)
マジックナンバーの使用禁止

- [no-continue](https://eslint.org/docs/latest/rules/no-continue)
continueステートメントの禁止

- [new-cap](https://eslint.org/docs/latest/rules/new-cap)
コンストラクタ名は大文字で始まる必要がある

- [max-statements](https://eslint.org/docs/latest/rules/max-statements)
ファンクション・ブロック内で許可されるステートメントの最大数の強制

- [max-params](https://eslint.org/docs/latest/rules/max-params)
関数定義におけるパラメータの最大数の強制

- [max-nested-callbacks](https://eslint.org/docs/latest/rules/max-nested-callbacks)
コールバックがネストできる最大の深さを強制する。

- [max-lines-per-function](https://eslint.org/docs/latest/rules/max-lines-per-function)
関数内のコード行数の上限を強制する

- [max-depth](https://eslint.org/docs/latest/rules/max-depth)
ブロックがネストできる最大深さを強制する

- [max-classes-per-file](https://eslint.org/docs/latest/rules/max-classes-per-file)
1ファイルあたりの最大クラス数を強制する

- [init-declarations](https://eslint.org/docs/latest/rules/init-declarations)
変数宣言で初期化を要求するかしないか

- [id-match](https://eslint.org/docs/latest/rules/id-match)
指定された正規表現にマッチする識別子を要求する

- [id-length](https://eslint.org/docs/latest/rules/id-length)
識別子の長さの最小値と最大値を強制する

- [id-denylist](https://eslint.org/docs/latest/rules/id-denylist)
指定された識別子を許可しない

- [func-style](https://eslint.org/docs/latest/rules/func-style)
関数宣言または式の一貫した使用を強制する

- [eqeqeq](https://eslint.org/docs/latest/rules/eqeqeq)
=== と !== の使用を強制する

- [default-param-last](https://eslint.org/docs/latest/rules/default-param-last)
デフォルト・パラメーターの位置を最後にする

- [consistent-return](https://eslint.org/docs/latest/rules/consistent-return)
returnステートメントで常に値を指定するか、指定しないかを指定する

- [complexity](https://eslint.org/docs/latest/rules/complexity)
プログラムで許容される最大のサイクロマティック複雑度を強制する

- [accessor-pairs](https://eslint.org/docs/latest/rules/accessor-pairs)
オブジェクトとクラスでゲッターとセッターのペアを強制する

- [curly](https://eslint.org/docs/latest/rules/curly)
    すべての制御文に一貫したブレース・スタイル（中括弧）を強制する
    [こちら](https://qiita.com/yamatai12/items/b41eecbb5ad6a44d892e)で記事書きましたので良かったらご覧ください！
# 3. typescript-eslint

:::note
v7.1.0
:::

https://typescript-eslint.io/rules/

## recommended

recommendedは[こちら](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/recommended.ts
)

## recommended以外

以下はrecommended以外で便利なルールを抜粋して紹介します。

- [array-type](https://typescript-eslint.io/rules/array-type)
配列には一貫してT[]またはArray<T>を使用する

- [explicit-function-return-type](https://typescript-eslint.io/rules/explicit-function-return-type)
関数とメソッドに明示的な戻り値の型を要求する

- [explicit-module-boundary-types](https://typescript-eslint.io/rules/explicit-module-boundary-types)
エクスポートされた関数やクラスのパブリック・クラス・メソッドでは、戻り値と引数の型を明示する必要がある

- [no-confusing-non-null-assertion](https://typescript-eslint.io/rules/no-confusing-non-null-assertion)
混乱を招くような場所での非NULLアサーションを禁止する

- [prefer-for-of](https://typescript-eslint.io/rules/prefer-for-of)
可能な限り、標準的なforループよりもfor-ofループの使用を強制する

- [naming-convention](https://typescript-eslint.io/rules/naming-convention)
    - 型、クラス名はPascalCase、変数名はcamelCaseのように命名規則の細かい設定ができる
    - [こちら](https://qiita.com/yamatai12/items/8d229f318a1a57b7af5e)で使ってみた記事書きましたので良かったらご覧ください！

- [no-unnecessary-boolean-literal-compare](https://typescript-eslint.io/rules/no-unnecessary-boolean-literal-compare)
真偽値リテラルに対する不必要な等号比較を禁止する

- [no-unnecessary-condition](https://typescript-eslint.io/rules/no-unnecessary-condition)
型が常にtruthyまたは常にfalsyである条件式を許可しない

- [no-useless-template-literals](https://typescript-eslint.io/rules/no-useless-template-literals)
不要なテンプレート・リテラルを禁止する

- [non-nullable-type-assertion-style](https://typescript-eslint.io/rules/non-nullable-type-assertion-style)
明示的な型キャストに対して NULL 以外のアサーションを強制する

- [prefer-includes](https://typescript-eslint.io/rules/prefer-includes)
indexOfメソッドよりincludesメソッドを強制する

- [prefer-nullish-coalescing](https://typescript-eslint.io/rules/prefer-nullish-coalescing)
論理和代入、チェーンの代わりにNull合算演算子の使用を強制する

- [consistent-indexed-object-style](https://typescript-eslint.io/rules/consistent-indexed-object-style)
```Record```と```{[key:string]:string}```のスタイルをどちらに寄せるかです。

- [prefer-find](https://typescript-eslint.io/rules/prefer-find)
単一の結果を検索する場合、Array.prototype.filter()の後に[0]を続けるよりも、Array.prototype.find()の使用を強制する

- [switch-exhaustiveness-check](https://typescript-eslint.io/rules/switch-exhaustiveness-check/)
    リテラルの和として型付けされた値、または列挙型として型付けされた値に対するswitch文のcase漏れ、またはdefault句がないことを防ぐ

# 4. eslint-plugin-unicorn

:::note
v 51.0.1
:::

100以上の強力なESLintルールがあるとのことです。

こちらの記事で紹介されていました
イチオシのルールも紹介してくださっています！
[JavaScriptのコード品質をさらに高めるeslint-plugin-unicornのススメ](https://qiita.com/munieru_jp/items/7e3a31cbb98c501eb30d)

https://github.com/sindresorhus/eslint-plugin-unicorn?tab=readme-ov-file#rules

recommendedは[こちら](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/configs/recommended.js)

## 最近追加されたルール
一部紹介します
どちらもrecommendedに入っています。

[Disallow anonymous functions and classes as the default export](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/no-anonymous-default-export.md)
無名関数とクラスをdefaultのexportを許可しない

[Disallow passing single-element arrays to Promise methods](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/no-single-promise-in-promise-methods.md)
単一要素の配列を Promise メソッドに渡すことを禁止する

# 5. eslint-plugin-import

https://github.com/import-js/eslint-plugin-import?tab=readme-ov-file#eslint-plugin-import

[no-cycle](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md)
循環 import の禁止

[import/max-dependencies](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/max-dependencies.md)
モジュールに多くの依存関係（import文やrequire文）を持たせない

# 6. eslint-plugin-import-access

https://www.npmjs.com/package/eslint-plugin-import-access

- `@package`とマークされた変数を同一ディレクトリ外のファイルからインポートすることを制限する
- TypeScript Language Service Pluginとして機能し、このようなインポートの自動補完を防ぐ

こちらで解説してますので良かったらご覧ください！

https://qiita.com/yamatai12/items/b91f785ecd3091833c01

# 7. eslint-plugin-strict-dependencies

https://github.com/knowledge-work/eslint-plugin-strict-dependencies?tab=readme-ov-file#eslint-plugin-strict-dependencies

使い方についてはこちらで調査しました。

https://qiita.com/yamatai12/items/90d61e36ee0013556937

eslint-plugin-import-access、dependency-cruiserとの使い分けを以下で調査しました。

https://qiita.com/yamatai12/items/f954e7282444b2b4273b

# 8. eslint-plugin-eslint-comments

https://www.npmjs.com/package/eslint-plugin-eslint-comments

ESLintディレクティブコメントの追加ルールをまとめたものです。
こちらの記事で紹介されていました！
[ESLint プラグイン紹介: eslint-plugin-eslint-comments](https://qiita.com/mysticatea/items/a2c2deab39d2bea3ca2e)

# 9. eslint-plugin-security

https://github.com/eslint-community/eslint-plugin-security/tree/main?tab=readme-ov-file#eslint-plugin-security

Nodeの脆弱性を診断するためのESLintルールです。

# 10. eslint-plugin-promise

https://github.com/eslint-community/eslint-plugin-promise?tab=readme-ov-file#eslint-plugin-promise

JavaScriptのPromiseに関するベストプラクティスのルールです。

# 11. eslint-plugin-react

https://github.com/jsx-eslint/eslint-plugin-react?tab=readme-ov-file#eslint-plugin-react-

React固有のLintルールに特化しているそうです。

# 12. eslint-plugin-no-type-assertion

https://www.npmjs.com/package/eslint-plugin-no-type-assertion

型アサーションの禁止

以前こちらで記事書きましたので良ければご覧下さい！

https://qiita.com/yamatai12/items/754fd3e4f736c809821e

# 13. eslint-plugin-unused-imports

https://www.npmjs.com/package/eslint-plugin-unused-imports

未使用のimport文を自動で削除します

こちらで紹介してますので良ければご覧ください！

https://qiita.com/yamatai12/items/80fcea6c53991f9d7b3f

# 14. config系
## 14.1. eslint-config-standard

https://github.com/standard/eslint-config-standard?tab=readme-ov-file#eslint-config-standard----

ruleは[こちら](https://standardjs.com/rules)

## 14.2. eslint-config-airbnb

airbnbのコーディング規則を基にしているものです。

https://www.npmjs.com/package/eslint-config-airbnb-typescript

### Reactを使用している場合
[eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb)

ruleは[こちら](https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react.js)

### Reactを使用していない場合
[eslint-config-airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base)を使用
ruleは[こちら(ES6版)](https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/es6.js)

### [eslint-config-airbnb-typescript](https://www.npmjs.com/package/eslint-config-airbnb-typescript)

eslint-config-airbnb,eslint-config-airbnb-baseをinstallした後にinstallするそうです。
詳細は[こちら](https://github.com/iamturns/eslint-config-airbnb-typescript?tab=readme-ov-file#setup)

# 15. configファイルの設定方法

https://eslint.org/docs/latest/use/configure/

# 16. 設定されていないルールを調べる
[eslint-find-rulesを使いESlintの全ての項目を設定する](https://qiita.com/akameco/items/87d8436c73514c39e69d)

eslint-find-rulesを使うと設定されていないルールを教えてくれるそうです

https://github.com/sarbbottam/eslint-find-rules?tab=readme-ov-file#eslint-find-rules

# 17. 参考
- [JavaScriptのコード品質をさらに高めるeslint-plugin-unicornのススメ](https://qiita.com/munieru_jp/items/7e3a31cbb98c501eb30d)
- [ESLintのルールを全部手動で設定するのは大変だからやめておけ](https://qiita.com/khsk/items/0f200fc3a4a3542efa90)
- [ESLintなんもわからんから調べた](https://zenn.dev/renoa/articles/what-is-eslint)
- [うわっ...私の.eslintrc、無駄が多すぎ...？](https://zenn.dev/kimromi/articles/b7cf98005f3193)
- [React × TypeScriptにおけるESLintとPrettierの設定](https://zenn.dev/takiko/articles/ae094582c8cbbf)
- [TypeScriptプロジェクトでディレクトリ単位のカプセル化をする](https://tech.iimon.co.jp/entry/2023/12/07/140000)
- [React+TSプロジェクトで便利だったLint/Format設定紹介](https://zenn.dev/knowledgework/articles/0994f518015c04#%E4%BE%9D%E5%AD%98%E9%96%A2%E4%BF%82%E3%81%AE%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%EF%BC%88strict-dependencies%EF%BC%89)
- [8 ESlint plugins for your NodeJs app](https://www.darraghoriordan.com/2021/06/23/best-eight-8-eslint-plugins-nestjs-node-application)
- [ESLint プラグイン紹介: eslint-plugin-eslint-comments](https://qiita.com/mysticatea/items/a2c2deab39d2bea3ca2e)
- [awesomejs.dev eslint](https://awesomejs.dev/for/eslint/)
- [ESLint を使い倒す（おすすめルール紹介）](https://zenn.dev/noshiro_piko/articles/take-full-advantage-of-typescript-eslint#%E5%BE%AA%E7%92%B0-import-%E3%81%AE%E6%A4%9C%E5%87%BA)
- [型アサーションをLintで禁止にしたい](https://qiita.com/yamatai12/items/754fd3e4f736c809821e)
- [eslint発火時に不要なimportを削除する](https://zenn.dev/taizo_pro/articles/d849b0da8e9b53)

# 18.最後に
弊社のコーディングルールも既にlintのルールに落とし込められているのが多くあったので使いたいと思いました！

他にもおすすめのものがありましたらぜひ教えて頂けるとありがたいです！🙏
今後も随時更新していきます