React Japan light logo
article hero
Steven Sacks
スティーブン・サックス

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 - 状況に応じたルール

主な記事: ESLintの保存時の修正でワークフローを次のレベルに上げる方法