【ESLint / Flat Config】naming-convention を使って命名規則をチェックする

はじめに

この記事では、ESLint の Flat Config で命名規則をチェックする方法を記載します。
命名規則のチェックには、typescript-eslint の naming-convention というルールを使用します。

開発環境

開発環境は以下の通りです。

• Windows 11
• VSCode
• TypeScript 5.7.3
• React 18.3.1
• ESLint 9.18.0
• @typescript-eslint/eslint-plugin 18.20.0

ESLint のバージョンが 9.18.0 なので、Flat Config を利用します。

事前準備

React / TypeScript のプロジェクトファイルで ESLint と typescript-eslint が利用できるようにしておきます。
ESLint の Flat Config の設定手順については以下の記事に記載しています。

naming-convention の有効化

まず、eslint.config.mjs の rules に "@typescript-eslint/naming-convention": ["error"] を追加します。

eslint.config.mjs

export default [
  rules: {
    "@typescript-eslint/naming-convention": ["error"]
  }
];

次に "@typescript-eslint/naming-convention" の配列に命名規則を追加します。
以下の例では、type 定義の命名に以下の規則を追加しています。

• パスカルケース（アッパーキャメルケース）
• サフィックスに Type をつける

eslint.config.mjs

export default [
  rules: {
    "@typescript-eslint/naming-convention": [
      "error",
      {
        selector: "typeAlias",
        format: ["PascalCase"],
        suffix: ["Type"],
      },
    ]
  }
];

動作確認をします。

• パスカルケースではない場合、エラーになる

• サフィックスに Type がついていない場合、エラーになる

• パスカルケースかつサフィックスに Type がついている場合、エラーにならない

参考

• naming-convention