概要

AWS CDK TypeScriptで開発を行う際のベストプラクティスがAWS公式ドキュメントにて公開されています。
そのうちの一つにコード内の命名規則について以下のような記載があります。

命名規則を適用することでコードベースの整合性が保たれ、変数の命名方法を考える際のオーバーヘッドが軽減されます。次の構成を推奨します。

変数名と関数名には camelCase を使用します

クラス名とインターフェイス名には PascalCase を使用します

インターフェイスメンバーには camelCase を使用します

型名と列挙型名には PascalCase を使用します

camelCase を使用してファイルに名前 (例えば、ebsVolumes.tsx または storage.tsb) を付けます

確実に上記内容を満たす必要があるわけではないですが、ベストプラクティスであり、コード可読性向上のためにも意識すべき内容かと思います。
ただ、これを全て暗記してやろうと思っても個人的には難しいなと思います。
そのため今回は、ESLint(JavaScriptやTypeScriptなどの静的解析ツール)の機能を使ってこれらのベストプラクティスを満たしているかチェックする設定について記事にしていきます。

前提条件

VSCodeがインストールされていること
VSCode拡張機能にESLint/Prettierがインストールされていること
npm（Node.jsのパッケージ管理ツール）がインストールされていること
※Node.jsをインストールすることで一緒にインストールされます
TypeScriptがインストールされていること
AWS CDKがインストールされていること

環境設定

環境を設定していきましょう。
わかりやすいように作業フォルダをCDKのプロジェクトフォルダにした状態で準備していきます。
各モジュールのバージョンは以下の通りです。

モジュール	バージョン
TypeScript	5.7.2
Node.js	22.12.0
npm	10.9.0
aws cdk	2.174.0

ESLint&Prettierをローカルインストール

VSCodeの拡張機能としてESLintが入っていたとしても実は使えません。また、Prettierを併用する場合はPrettierもインストールする必要があります。そのため各パッケージをインストールしていきます。
Node.jsのパッケージマネージャー(npmやyarn)を使ったNode.jsのパッケージインストール方式には「グローバルインストール」と「ローカルインストール」がありますが今回は「ローカルインストール」をしていきます。

インストール方式	概要	インストールコマンド
グローバルインストール	PC上のどの場所からでも利用する場合	npm install -g <パッケージ名>
ローカルインストール	プロジェクト単位(フォルダ単位) で利用する場合	npm install -D <パッケージ名>

インストール方式は使用するパッケージによって使い分けるものですが、
基本的にはローカルインストールが推奨されます
プロジェクトごとにバージョンを柔軟に管理することができるためです

CDKのプロジェクトフォルダ内で以下のコマンドを実行しローカルインストールします。

$ npm install -D eslint prettier

added 60 packages, and audited 397 packages in 10s

52 packages are looking for funding
  run `npm fund` for details

1 low severity vulnerability

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.

インストールが完了すると、package.jsonのdevDependenciesに追加されます。

package.json

{
  "name": "work",
  "version": "0.1.0",
  "bin": {
    "work": "bin/work.js"
  },
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "test": "jest",
    "cdk": "cdk"
  },
  "devDependencies": {
    "@types/jest": "^29.5.14",
    "@types/node": "22.7.9",
    "aws-cdk": "2.174.0",
+    "eslint": "^9.22.0",
    "jest": "^29.7.0",
+    "prettier": "^3.5.3",
    "ts-jest": "^29.2.5",
    "ts-node": "^10.9.2",
    "typescript": "~5.6.3"
  },
  "dependencies": {
    "aws-cdk-lib": "2.174.0",
    "constructs": "^10.0.0"
  }
}

その他パッケージのローカルインストール

その他必要なパッケージをローカルインストールしていきます。
インストールが完了すると、同様にpackage.jsonのdevDependenciesに追加されます。

$ npm install -D @eslint/js @eslint/eslintrc @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-unicorn eslint-config-prettier eslint-plugin-prettier

added 64 packages, and audited 461 packages in 18s

81 packages are looking for funding
  run `npm fund` for details

1 low severity vulnerability

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.

ESLint設定ファイル

ESLint設定ファイルは以下の通りです。

eslint.config.mjs

/* eslint-disable */
import { defineConfig } from "eslint/config"; // eslintの設定ファイルを定義するための関数をインポート
import typescriptEslint from "@typescript-eslint/eslint-plugin"; // TypeScriptに関連するESLintルールを提供するプラグイン
import unicorn from "eslint-plugin-unicorn"; // 一貫性のあるコードスタイルのためのユニコーンプラグイン
import prettier from "eslint-plugin-prettier"; // PrettierによるコードフォーマットをESLintルールとして適用するプラグイン
import path from "node:path"; // ファイルパス操作のためのNode.jsのpathモジュール
import { fileURLToPath } from "node:url"; // ファイルURLをパスに変換するNode.jsの関数
import js from "@eslint/js"; // JavaScriptに関するESLintの設定を提供するパッケージ
import { FlatCompat } from "@eslint/eslintrc"; // 複数の設定ファイルを組み合わせるための互換性モジュール

const __filename = fileURLToPath(import.meta.url); // 現在のファイル名を取得
const __dirname = path.dirname(__filename); // 現在のディレクトリ名を取得
const compat = new FlatCompat({
    // 設定互換性を提供するオブジェクトを作成
    baseDirectory: __dirname, // 基本となるディレクトリを設定
    recommendedConfig: js.configs.recommended, // 推奨される設定を指定
    allConfig: js.configs.all, // すべての設定を指定
});

export default defineConfig([
    // ESLint設定の定義をエクスポート
    {
        extends: compat.extends(
            // 推奨設定と他の設定を統合
            "eslint:recommended", // ESLintの推奨設定を拡張
            "plugin:@typescript-eslint/recommended", // TypeScriptの推奨ルールを拡張
            "prettier", // Prettierの設定を統合。Prettierとの競合を避けるため
        ),

        plugins: {
            // 使用するプラグインの設定
            "@typescript-eslint": typescriptEslint, // TypeScript用ESLintプラグイン
            unicorn, // ユニコーンプラグイン
            prettier, // Prettierプラグイン
        },

        rules: {
            // 特定のESLintルールの設定
            "@typescript-eslint/naming-convention": [
                // TypeScriptの命名規則のルール
                "error", // ルール違反時にエラーを表示
                {
                    selector: "variable", // 変数名の規則
                    format: ["camelCase"], // camelCase形式で命名
                },
                {
                    selector: "function", // 関数名の規則
                    format: ["camelCase"], // camelCase形式で命名
                },
                {
                    selector: "class", // クラス名の規則
                    format: ["PascalCase"], // PascalCase形式で命名
                },
                {
                    selector: "interface", // インターフェース名の規則
                    format: ["PascalCase"], // PascalCase形式で命名
                    prefix: ["I"], // 接頭辞として"I"を追加
                },
                {
                    selector: "property", // プロパティ名の規則
                    format: ["camelCase"], // camelCase形式で命名
                },
                {
                    selector: "classProperty", // クラスプロパティ名の規則
                    format: ["camelCase"], // camelCase形式で命名
                },
                {
                    selector: "classMethod", // クラスメソッド名の規則
                    format: ["camelCase"], // camelCase形式で命名
                },
                {
                    selector: "typeAlias", // 型エイリアス名の規則
                    format: ["PascalCase"], // PascalCase形式で命名
                },
                {
                    selector: "enum", // 列挙型名の規則
                    format: ["PascalCase"], // PascalCase形式で命名
                },
                {
                    selector: "enumMember", // 列挙型メンバー名の規則
                    format: ["UPPER_CASE"], // UPPER_CASE形式で命名
                },
            ],
        },
    },
    {
        files: ["**/*.ts", "**/*.tsx"], // TypeScriptファイル（.ts, .tsx）に対する設定
        rules: {
            "unicorn/filename-case": [
                // ユニコーンプラグインによるファイル名の命名規則
                "error", // ルール違反時にエラーを表示
                {
                    case: "camelCase", // camelCase形式のファイル名を強制
                },
            ],
        },
    },
]);

上記コードをコピペすると、１行目の/* eslint-disable */が消える場合があるので、その場合は再度１行目に貼り付けてください

Prettier設定ファイル

Prettier設定ファイルは以下の通りです。

.prettierrc

{
    "$comment1": "文字列の引用符としてダブルクオートを使用",
    "doubleQuote": true,
    "$comment2": "配列やオブジェクトの最後の要素にもカンマを付ける",
    "trailingComma": "all",
    "$comment3": "インデントの幅を4スペースに設定",
    "tabWidth": 4
}

VSCodeのsettings.jsonの編集

VSCodeのsettings.jsonに以下内容を追記します。

settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.format.enable": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
}