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型を返すルールがやや不完全ですが、ほとんど実現できました
• これを導入すればRvで命名規則に指摘されることもなくなりますし、命名規則を覚えなくても済むので便利だなと思いました