LoginSignup
5
2
@yamatai12in株式会社iimon

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

Last updated at Posted at 2024-03-03

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

1. 背景

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

2. EsLint

Version v8.57.0

recommended

image.png
✅がついているルールがrecommendedです。

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

recommended以外

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

  • no-self-compare
    双方がまったく同じである比較を許可しない
    typoの可能性を考慮

  • no-template-curly-in-string
    通常の文字列でテンプレート・リテラル・プレースホルダーの構文を無効にする
    typoの可能性を考慮

    ❌
    "${str}"
    🟢
    `${str}`

  • no-useless-concat
    リテラルやテンプレート・リテラルの不要な連結を禁止する。

  • no-unused-expressions
    未使用の式を許可しない

  • no-underscore-dangle
    識別子の先頭にアンダースコアを使用しない

  • no-sequences
    カンマ演算子の使用禁止

  • no-restricted-globals
    指定したグローバル変数の使用を許可しない

  • no-nested-ternary
    ネストされた3項演算子を禁止する

    const foo = bar ? baz : qux === quxx ? bing : bam;

  • no-negated-condition
    否定条件の禁止

  • no-multi-assign
    連鎖した代入式の使用を禁止

  • no-magic-numbers
    マジックナンバーの使用禁止

  • no-continue
    continueステートメントの禁止

  • new-cap
    コンストラクタ名は大文字で始まる必要がある

  • max-statements
    ファンクション・ブロック内で許可されるステートメントの最大数の強制

  • max-params
    関数定義におけるパラメータの最大数の強制

  • max-nested-callbacks
    コールバックがネストできる最大の深さを強制する。

  • max-lines-per-function
    関数内のコード行数の上限を強制する

  • max-depth
    ブロックがネストできる最大深さを強制する

  • max-classes-per-file
    1ファイルあたりの最大クラス数を強制する

  • init-declarations
    変数宣言で初期化を要求するかしないか

  • id-match
    指定された正規表現にマッチする識別子を要求する

  • id-length
    識別子の長さの最小値と最大値を強制する

  • id-denylist
    指定された識別子を許可しない

  • func-style
    関数宣言または式の一貫した使用を強制する

  • eqeqeq
    === と !== の使用を強制する

  • default-param-last
    デフォルト・パラメーターの位置を最後にする

  • consistent-return
    returnステートメントで常に値を指定するか、指定しないかを指定する

  • complexity
    プログラムで許容される最大のサイクロマティック複雑度を強制する

  • accessor-pairs
    オブジェクトとクラスでゲッターとセッターのペアを強制する

3. typescript-eslint

v7.1.0

recommended

recommendedはこちら

recommended以外

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

  • array-type
    配列には一貫してT[]またはArrayを使用する

  • explicit-function-return-type
    関数とメソッドに明示的な戻り値の型を要求する

  • explicit-module-boundary-types
    エクスポートされた関数やクラスのパブリック・クラス・メソッドでは、戻り値と引数の型を明示する必要がある

  • no-confusing-non-null-assertion
    混乱を招くような場所での非NULLアサーションを禁止する

  • prefer-for-of
    可能な限り、標準的なforループよりもfor-ofループの使用を強制する

  • naming-convention

    • 型、クラス名はPascalCase、変数名はcamelCaseのように命名規則の細かい設定ができる
    • こちらで使ってみた記事書きましたので良かったらご覧ください！

  • no-unnecessary-boolean-literal-compare
    真偽値リテラルに対する不必要な等号比較を禁止する

  • no-unnecessary-condition
    型が常にtruthyまたは常にfalsyである条件式を許可しない

  • no-useless-template-literals
    不要なテンプレート・リテラルを禁止する

  • non-nullable-type-assertion-style
    明示的な型キャストに対して NULL 以外のアサーションを強制する

  • prefer-includes
    indexOfメソッドよりincludesメソッドを強制する

  • prefer-nullish-coalescing
    論理和代入、チェーンの代わりにNull合算演算子の使用を強制する

  • consistent-indexed-object-style
    Recordと{[key:string]:string}のスタイルをどちらに寄せるかです。

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

  • switch-exhaustiveness-check
    リテラルの和として型付けされた値、または列挙型として型付けされた値に対するswitch文のcase漏れ、またはdefault句がないことを防ぐ

4. eslint-plugin-unicorn

v 51.0.1

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

こちらの記事で紹介されていました
イチオシのルールも紹介してくださっています！
JavaScriptのコード品質をさらに高めるeslint-plugin-unicornのススメ

recommendedはこちら

最近追加されたルール

一部紹介します
どちらもrecommendedに入っています。

Disallow anonymous functions and classes as the default export
無名関数とクラスをdefaultのexportを許可しない

Disallow passing single-element arrays to Promise methods
単一要素の配列を Promise メソッドに渡すことを禁止する

5. eslint-plugin-import

no-cycle
循環 import の禁止

import/max-dependencies
モジュールに多くの依存関係（import文やrequire文）を持たせない

6. eslint-plugin-import-access

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

7. eslint-plugin-strict-dependencies

eslint-plugin-import-accessと内容が似ているのかなと思いました。
また、dependency-cruiserとの使い分けも交えたいです。
dependency-cruiserは以前ブログ書きましたのでこちら良ければご覧ください！

違いについて以下の記事で調査しました。

8. eslint-plugin-eslint-comments

ESLintディレクティブコメントの追加ルールをまとめたものです。
こちらの記事で紹介されていました！
ESLint プラグイン紹介: eslint-plugin-eslint-comments

9. eslint-plugin-security

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

10. eslint-plugin-promise

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

11. eslint-plugin-react

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

12. eslint-plugin-no-type-assertion

型アサーションの禁止

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

13. eslint-plugin-unused-imports

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

14. config系

14.1. eslint-config-standard

ruleはこちら

14.2. eslint-config-airbnb

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

Reactを使用している場合

eslint-config-airbnb

ruleはこちら

Reactを使用していない場合

eslint-config-airbnb-baseを使用
ruleはこちら(ES6版)

eslint-config-airbnb-typescript

eslint-config-airbnb,eslint-config-airbnb-baseをinstallした後にinstallするそうです。
詳細はこちら

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

16. 設定されていないルールを調べる

eslint-find-rulesを使いESlintの全ての項目を設定する

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

17. 参考

18.最後に

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

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

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
2