TypeScript プロジェクトに ESLint・Prettier・cspell を 1 つずつ入れて挙動を確かめてみた

• URL: https://dev.classmethod.jp/articles/shoma-setup-eslint-prettier-cspell-one-by-one-in-typescript-project
• 日付: 2026-06-22
• Tier: Tier 2
• 要旨: TypeScript プロジェクトで ESLint・Prettier・cspell を 1 つずつインストール・動作確認。Linter 棲み分け：ESLint（コード品質）・Prettier（見た目整形）・cspell（スペルチェック）・TypeScript Compiler（型検証）・Test Runner（動作検証）。ESLint v9 は Flat Config 標準・js.configs.recommended + tseslint.configs.recommended をベース・カスタムルール追加・files で対象ファイル絞込・ignores で除外。scripts に check:lint・fix:lint・check:type 登録。

詳細

TypeScript プロジェクトで ESLint・Prettier・cspell を 1 つずつインストール・動作確認。Linter 系ツール棲み分け：(1) ESLint ─ コードの「品質」「規約違反」検出（no-var、@typescript-eslint/no-explicit-any など）、(2) Prettier ─ コードの「見た目」自動整形（インデント・括弧配置など）、(3) cspell ─ スペルミス検出、(4) TypeScript Compiler ─ 型の整合性検証、(5) Test Runner ─ 実行して挙動検証。環境準備：Node.js v22・pnpm・macOS。TypeScript インストール tsc –init で tsconfig.json 生成・check:type スクリプト。intentional に bad code (var + any + typo)を埋め込む。ESLint 設定：v9 は Flat Config が標準（eslint.config.js の配列形式）。js.configs.recommended + tseslint.configs.recommended をベース。js.configs.recommended は no-var 等 JS 全般・tseslint.configs.recommended は @typescript-eslint/no-explicit-any 等 TS 向け。no-console はどちらにも含まれないため明示的に有効化。files で対象ファイル絞込（.ts のみなど）・ignores で dist/coverage 除外（node_modules はデフォルト除外）。package.json scripts：check:lint（eslint . –cache）・fix:lint（eslint . –cache –fix）。–cache で 2 回目以降高速化。.eslintcache は .gitignore 追加。動作確認でルール違反を引出し、fix で自動修復。