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

# 背景

https://typescript-eslint.io/rules/naming-convention/

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

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

# 完成したルール

ruleの適用順は[こちら]((https://typescript-eslint.io/rules/naming-convention/#how-does-the-rule-automatically-order-selectors))を参考にしてください

```ts
'@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は適切にチェックされませんでした

```js:変数,関数,メソッド,引数で返り値がboolean
selector: ['variable', 'function', 'method', 'parametar'],
format: ['PascalCase'],
types: ['boolean'],
prefix: ['is', 'should', 'has', 'need'],
```

```ts
type CustomPaginationPropsType = {
  total: number;
  pageSize: number;
  pageChangeHandling: (page: number) => Promise<void>;
};
```
このpageChangeHandlingがエラーになってしまいました。

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

https://github.com/typescript-eslint/typescript-eslint/issues/7108

```js
'@typescript-eslint/naming-convention': [
      'error',
      {
        selector: ['variable'],
        format: ['camelCase'],
      },
```
このnaming-conventionに加え[eslint-plugin-reactのjsx-pascal-case](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)も適用してしまうと以下の矛盾が起きてしまいます
- naming-convention→変数名はcamelCase
- eslint-plugin-react/jsx-pascal-case→コンポーネント名はPascalCase

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

# 参考
- [typescript-eslint/naming-conventionを導入してみた](https://note.com/sanehisa_rakus/n/n5f007c0a5124)
- [ESLintでTypeScriptの変数の名付け規則をチェックしよう！](https://dev.classmethod.jp/articles/shuntaka9576-check-eslint/)
- [いい感じの typescript-eslint ルールを探してみた](https://tech.techtouch.jp/entry/just-the-right-typescript-eslint-rule)
- [EsLintのルールを幾つ知っていますか？](https://qiita.com/yamatai12/items/ebde3b4e92c870227712)

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

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