![article hero](https://react-japan.dev/assets/blog/eslint-opinionated-rules-640.webp)
![Steven Sacks](https://react-japan.dev/authors/steven.webp)
ESLint - 意見の分かれるルール
これらは Foundation に含めなかったルールで、より主観的なものです。なぜこれらを使用するのかについて説明します。使用するかどうかは自由に決めてください。
TypeScriptでenumを禁止する
typescript-enumプラグインは、あなたがenumを使用することを防ぎます。enumを使用しないのには理由があります。READMEにその理由が書かれています。
{
plugins: ["typescript-enum"],
extends: ["plugin:typescript-enum/recommended"],
}
命名規則の徹底
このプラグインは、プロジェクトで使用する命名規則の自動強制を提供します。README にその使用方法が説明されています。ルールは主観的で、あなたの会社が名前を付ける方法に基づいています。
自動的に命名規則を強制するルールを持つことは、プロジェクトに新しく参加する人々にとって特に時間を節約し、コードレビューで命名規則を取り上げる必要がなくなります。
アロー関数のみを使用
React は関数型プログラミング原則に基づいて構築されています。関数型コードは、アロー関数を使用して最もよく書かれます。すべて関数にアロー関数を使用することで、コードに一貫性が生まれます。
ルールセットにprefer-arrowプラグインを追加することで、これを強制することができます。
私がアロー関数のみを使用する他の理由:
- 既に多くの場所で使用されており、クロージャーや map、filter、reduce などの関数内の無名関数パラメーターで使用されています。
- 関数型プログラミングや React では
this
を使用すべきではありません。 - ホイスティングが起こりません。ホイスティングは「魔法」です。関数の順序について明示的であることは、コードに明確さをもたらします。アロー関数が呼び出されている場合、その行の上にあることがわかります。
- より短く、読み書きしやすいです。
- 暗黙の戻り値があります。
私が使用している設定は次のとおりです:
'prefer-arrow/prefer-arrow-functions': [
'error',
{
classPropertiesAllowed: false,
disallowPrototype: true,
singleReturnOnly: false,
},
],
ESLint の設定 overrides
で *.d.ts
ファイルに対してこのルールを無効にする必要があります。
{
files: ['**/*.d.ts'],
rules: {
'prefer-arrow/prefer-arrow-functions': 'off',
},
},
no-switch-statements
switch
を使用することは if else
よりも望ましくないという多くの記事が書かれており、おそらく全く使用すべきではありません。このプラグインは、コードベースで switch
の使用を防止します。ただし、このプラグインは「修正」をサポートしていませんが、一部の IDE には変換する機能があります。このルールを有効にしたら、すべての switch 文を置き換えるのに長い時間はかかりません。
前の記事: ESLint - 状況に応じたルール