TypeScriptの「神」は細部に宿る：VSCodeとtsconfig.jsonを完璧にシンクロさせる技術
現場でコードを書いていて、こんなストレスを感じたことはないだろうか？
「`tsconfig.json`には設定したはずなのに、VSCode上の型チェックが効かない」
「チームで開発しているのに、自分だけ謎の赤波線（エラー表示）が出る」
これ、実はTypeScriptそのものの問題ではなく、VSCodeの裏側で動く「TSServer（TypeScript Language Server）」と設定ファイルとの「解釈のズレ」が原因のほとんどだ。
今日は、中級者の壁を越えるために、VSCodeとTypeScriptを完璧に調教し、エディタを最強の相棒に変えるためのアーキテクチャ設定を伝授する。
—
1. VSCodeとTSServerの「信頼関係」を構築する
VSCodeがTypeScriptを解析する際、内部では「TSServer」というプロセスが常駐している。こいつはファイルを開くたびに`tsconfig.json`を読み込み、AST（抽象構文木）を構築して型推論を行っているんだ。
だが、VSCodeの設定（`settings.json`）と`tsconfig.json`の両方で同じ項目をいじると、どちらが優先されるか混乱が起きる。原則は「tsconfig.jsonに全てを委ねる」ことだ。
現場で必須の `.vscode/settings.json` 設定
まずは、プロジェクトのルートに `.vscode/settings.json` を作成し、以下を記述してほしい。これは「VSCode独自の型チェック機能」を無効化し、すべてを`tsconfig.json`に一任するための最強の構成だ。
{
// VSCode標準のTypeScriptバリデーションを無効化する
// これにより、tsconfig.jsonのルールのみが正として適用される
“typescript.validate.enable”: true,
“javascript.validate.enable”: true,
// プロジェクトローカルのTypeScriptバージョンを優先させる
// これを忘れると、VSCodeの内蔵TSとプロジェクトのTSでバージョン不整合が起き、型エラーの挙動がズレる
“typescript.tsdk”: “node_modules/typescript/lib”,
// 保存時に自動フォーマットを走らせる設定
“editor.formatOnSave”: true,
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
—
2. tsconfig.jsonを「守りの要」にする
`tsconfig.json`はただのオプション集ではない。チーム開発における「憲法」だ。特に重要なのは、「暗黙的な型推論をどこまで許容するか」という思想である。
私が現場で必ず設定する、厳格かつ現実的な設定を公開しよう。
{
“compilerOptions”: {
/ — プロジェクトの基礎 — /
“target”: “ESNext”,
“module”: “ESNext”,
“moduleResolution”: “node”, // node_modulesをどう探すか。現代ならnode一択だ
/ — 厳格化の極み（ここが重要） — /
“strict”: true, // 全ての厳格モードをON。これを外す選択肢はない
“noUncheckedIndexedAccess”: true, // 【重要】配列やオブジェクトアクセス時のundefinedを強制する
“noImplicitAny”: true, // any型の暗黙的な使用を禁止
“strictNullChecks”: true, // null/undefinedの混入を許さない
/ — パス解決の快適化 — /
“baseUrl”: “.”,
“paths”: {
“@/”: [“src/”] // インポート地獄を解決するエイリアス
},
/ — コンパイル対象 — /
“include”: [“src”, “types”],
“exclude”: [“node_modules”, “dist”]
}
}
特に注目してほしいのが `”noUncheckedIndexedAccess”: true` だ。これをONにすると、`arr[0]` と書いただけで「`undefined`の可能性がある」と怒られるようになる。最初は面倒に感じるだろうが、実行時のランタイムエラーを9割減らせると思えば、安い代償だ。
—
3. なぜ「同期」が重要なのか？（裏側の処理）
ブラウザが実行するJavaScriptの世界には「型」は存在しない。TypeScriptはあくまで「開発時のコード品質を担保するための静的解析ツール」だ。
VSCode上でエラーが出るのは、TSServerが裏で「このコードが実行時に落ちる可能性」をシミュレーションしているからだ。もし`tsconfig.json`とVSCodeの設定がズレていると、「エディタではエラーが出ないのに、ビルド（`tsc`コマンド）を通すとエラーで落ちる」という最悪の状況に陥る。
このズレを防ぐためのTipsを3つ教える。
1. `references` を活用する: 大規模プロジェクトなら `tsconfig.app.json` や `tsconfig.node.json` に分割し、`references` を使って疎結合に管理しろ。
2. `tsc –noEmit` をCIに仕込む: ローカルのVSCodeだけでなく、CI環境で必ず `tsc` を走らせ、型チェックが通らないコードはマージさせない運用を徹底する。
3. `@ts-ignore` を極力排除する: どうしても避けられない場合以外は使わないこと。あれは「技術的な負債の先送り」であり、将来の自分への借金だ。
—
最後に：シニアからのアドバイス
ツールを使いこなすということは、ツールの裏側にある「なぜそう動くのか」という理屈を知るということだ。
`tsconfig.json`の設定をいじり、VSCodeが即座に反応してエラーを表示する。そのフィードバックループを高速化すればするほど、君のコーディング体験（DX）は向上する。
設定ファイルは「面倒な足枷」ではない。君がコードを書く際に、「右腕が勝手に誤字を防いでくれる」ような、強力なブースターなんだ。ぜひ、今日紹介した設定をプロジェクトに落とし込み、チームの開発生産性を一段上のステージへ引き上げてみてくれ。
健闘を祈る。何かあれば、またいつでも聞きに来い。
コメント