ESLintで命名規則のチェックをする

背景

こちらのnaming-conventionというルールで命名規則のルールを設定できるということを知り、業務で導入しようと思い調査しました。

実現したいルール

カテゴリ	返り値	case	prefix	suffix
①型エイリアス	-	PascalCase	-	Type
②変数,関数,メソッド,引数	boolean	camelCase	is,need,has,should	-
③変数,関数,メソッド,引数	boolean以外	camelCase	-	-
④プロパティ	-	snake_case,camelCase	-	-
⑤定数	-	UPPER_SNAKE_CASE	-	-

完成したルール

ruleの適用順はこちらを参考にしてください

'@typescript-eslint/naming-convention': [
      'error',
       // ①型エイリアス
      {
        selector: 'typeAlias',
        format: ['PascalCase'],
        suffix: ['Type'],
      },
      // TODO メソッドでもbooleanを返す場合のルールを追加する
      // ②変数,関数,引数で返り値がboolean
      {
        selector: ['variable', 'function', 'parameter'],
        types: ['boolean'],
        format: ['PascalCase'],// prefixを除いたcaseです　例）isDev → prefixでisが取られ、Devが残る
        prefix: ['is', 'should', 'has', 'need'],
        //disabledとrequiredは例外的にprefixを必要としない
        filter: {
          regex: 'disabled|required',
          match: false,
        },
      },
      // ③変数、関数、引数、メソッド,引数
      {
        selector: ['variable', 'function', 'parameter', 'method'],
        format: ['camelCase'],
      },
      // ④プロパティ
      {
        selector: ['property'],
        format: ['camelCase', 'snake_case'],
      },
      // ⑤定数
      {
        selector: 'variable',
        format: ['camelCase', 'UPPER_CASE'],
        modifiers: ['const'],
      },
      // ついでに追加しました
      {
        selector: 'class',
        format: ['PascalCase'],
      },
]

methodは適切にチェックされませんでした

変数,関数,メソッド,引数で返り値がboolean

selector: ['variable', 'function', 'method', 'parametar'],
format: ['PascalCase'],
types: ['boolean'],
prefix: ['is', 'should', 'has', 'need'],

type CustomPaginationPropsType = {
  total: number;
  pageSize: number;
  pageChangeHandling: (page: number) => Promise<void>;
};

このpageChangeHandlingがエラーになってしまいました。

関数型コンポーネント名をPascalCaseに指定することの難しさ

'@typescript-eslint/naming-convention': [
      'error',
      {
        selector: ['variable'],
        format: ['camelCase'],
      },

このnaming-conventionに加えeslint-plugin-reactのjsx-pascal-caseも適用してしまうと以下の矛盾が起きてしまいます

• naming-convention→変数名はcamelCase
• eslint-plugin-react/jsx-pascal-case→コンポーネント名はPascalCase

私は全ての箇所にeslintのdisableコメントを追加することにしました

参考

• typescript-eslint/naming-conventionを導入してみた
• ESLintでTypeScriptの変数の名付け規則をチェックしよう！
• いい感じの typescript-eslint ルールを探してみた
• EsLintのルールを幾つ知っていますか？

最後に

• boolean型を返すルールがやや不完全ですが、ほとんど実現できました
• 小さな改善ではありますが少しずつ低レベルな議論をする必要がなくなり、より上流の議論に力を入れることができると思います

自動で修正してくれるのか調査したいと思います。
eslintの --fix的なものです。