【実務・中級編】VS Codeの「インテリセンス」を覚醒させる：jsconfig.json / tsconfig.json活用による高度な型推論と補完精度向上術 – 軽量・高機能テキストエディタ生産性向上バイブル

はじめに：なぜ、あなたのVS Codeは「ただの文字入力ツール」で止まっているのか

「おい、またこのファイルの相対パスが壊れて `Cannot find module` になったぞ」
「TypeScriptを使っているのに、なぜか `any` が蔓延して補完が全く効かない…」

大規模なフロントエンドやNode.jsのプロジェクトにおいて、こんなフラストレーションを抱えたことはないだろうか。

多くのエンジニアは、VS Codeが重いと感じたとき、あるいは補完がバグったときに、プラグインの再インストールやキャッシュのクリアといった対症療法に走りがちだ。しかし、断言しよう。その原因の90%は、VS Code本体や拡張機能の不具合ではなく、プロジェクトのルートディレクトリにおける「言語サーバー（TypeScript Language Server）」への指示不足にある。

VS Codeの心臓部であるインテリセンス（IntelliSense）は、設定ファイルなしではただの「文字列の山勘（ヒューリスティックな予測）」にすぎない。しかし、`jsconfig.json` や `tsconfig.json` を適切に配置し、言語サーバーのメンタルモデルをプロジェクトの構造と完全に同期させた瞬間、VS Codeはコードベース全体を完璧に理解する「超高精度なAIペアプログラマー」へと覚醒する。

本記事では、テックリードである私が、チーム全体の開発速度を劇的に引き上げるために現場へ導入している、インテリセンスの限界突破術を余すところなく伝授する。

—

1. 根本原因の解明：VS Codeの言語サーバーはどう動いているか

設定に入る前に、敵（VS Codeの内部挙動）を知ろう。

VS CodeでJavaScriptやTypeScriptを書くとき、裏では TSServer（TypeScript Language Server） という独立したプロセスが常駐している。このTSServerは、プロジェクトを開いた際、デフォルトでは以下のような挙動をとる。

1. 暗黙の探索: ルートディレクトリから上層に向かって `tsconfig.json` または `jsconfig.json` を探す。
2. スコープの暴走: もし設定ファイルが見つからない場合、TSServerはワークスペース内のすべてのファイルを監視対象（スコープ内）として読み込もうとする。
3. パフォーマンスの崩壊とコンテキストの喪失: `node_modules` やビルド成果物、テストのモックデータまでを等しく解析対象にするため、メモリ消費量が増大してインテリセンスが遅延する。さらに、どのモジュールがどこから来ているのか（パス解決のコンテキスト）が曖昧になり、補完の精度が著しく低下する。

つまり、「設定ファイルを書かないこと」こそが、補完不全と重い動作を引き起こす最大の元凶なのだ。

—

2. 実践：プロジェクトの脳みそを創る `tsconfig.json` / `jsconfig.json` ベストプラクティス

ここからが本題だ。JavaScriptのみのプロジェクトであっても `jsconfig.json` を、TypeScriptなら `tsconfig.json` を必ずルートに置く。

以下に示すのは、数百万行規模のモノレポや複雑なSPA開発でも破綻しない、極限まで最適化された実用設定ファイルのフルスペック構成だ。

黄金のJSON構成例（TypeScript版ベース）

{
“compilerOptions”: {
/ ==========================================================

1. 言語バージョンとモジュール解決の基本方針
========================================================== /

“target”: “ESNext”, // 最新のJS機能を安全にインテリセンスに解釈させる
“module”: “NodeNext”, // Node.jsの最新ECMAScriptモジュール仕様に準拠
“moduleResolution”: “NodeNext”, //exportsフィールド等を含む現代的なモジュール解決を有効化
“lib”: [“DOM”, “DOM.Iterable”, “ESNext”], // ブラウザ環境と最新JSの標準グローバル型を有効化

/ ==========================================================

2. 開発体験（DX）を劇的に向上させる厳格性オプション
========================================================== /

“strict”: true, // 暗黙のanyを完全に排除し、型安全性の基盤を作る
“noUncheckedIndexedAccess”: true, // 配列やオブジェクトの存在しないキーへのアクセスにundefinedを強制（バグの芽を早期に摘む）
“isolatedModules”: true, // 単一ファイルごとの安全なトランスパイルを保証

/ ==========================================================

3. パスエイリアス（絶対パスインポート）の設定
========================================================== /

“baseUrl”: “.”, // パス解決の起点をプロジェクトルートに設定
“paths”: {
“@/”: [“src/”], // 例: import { User } from ‘@/models/User’
“@components/”: [“src/components/”], // 例: import Button from ‘@components/Button’
“@utils/”: [“src/utils/”] // 例: import { formatDate } from ‘@utils/date’
},

/ ==========================================================

4. エディタ専用機能の最適化
========================================================== /

“skipLibCheck”: true, // node_modules内の型定義ファイルのチェックをスキップし、IDEの爆速化を図る
“noEmit”: true // VS Codeのインテリセンス・型チェック専用とし、ビルドはViteやesbuild等に委譲する
},

/ ==========================================================

5. 監視スコープの厳密なコントロール（パフォーマンスの生命線）
========================================================== /

“include”: [
“src//”, // 開発対象のソースコードのみをTSServerの監視下におく
“types//” // 独自定義のグローバル型定義フォルダ
],
“exclude”: [
“node_modules”, // 外部ライブラリの不要な走査をシャットアウト
“dist”, // ビルド成果物の除外
“build”,
“/.spec.ts”, // 必要に応じてテストファイルを除外して補完ノイズを減らす
“coverage”
]
}

なぜこの設定が神なのか？（アーキテクトの解説）

1. `baseUrl` と `paths` の連動:
`import { Button } from “../../../../../components/Button”` のような地獄の相対パスから開発者を解放する。この設定を入れるだけで、VS Codeの「自動インポート（Auto Import）」機能が働き、コード補完時に自動的に `@components/Button` 形式でパスを補完してくれるようになる。
2. `skipLibCheck: true` の圧倒的な効果:
これを有効にしないと、サードパーティ製ライブラリ（ReactやVueなどの型定義）の内部エラーまでTSServerが検証し始め、インテリセンスが数秒間フリーズする原因になる。実務では必須の防衛策だ。
3. `noEmit: true` による役割分担:
VS Codeのインテリセンスは「コードチェック」に専念させ、トランスパイルやバンドルはViteやesbuild、Babelに任せる。このモダンな責務分離が、エディタを常に軽快に保つ秘訣である。

—

3. 開発スピードを限界突破させるキーボードショートカット

設定が整ったら、次は指の動きを最適化する。VS Code標準、あるいは拡張機能と組み合わせることで真価を発揮する、テックリード必携のショートカットだ。

—

4. チーム全体の生産性を底上げする「神プラグイン」選

個人の環境設定だけでなく、チームメンバー全員のVS Code環境を強制的に同期させることで、レビュー時の無駄な指摘（フォーマットやインポート順序の乱れなど）をゼロにできる。以下の拡張機能はプロジェクトの推奨（`extensions.json`）に必ず含めるべきだ。

1. TypeScript Vue Plugin (Volar) または TypeScript

役割: VueやSvelte、あるいは純粋なTS開発において、言語サーバーの精度を極限まで高める。

2. Path Intellisense

役割: `import` 文を書く際、`paths` 設定以外のローカルファイルパスをも高速にサジェストする。

3. Error Lens

役割: TypeScriptの型エラーやESLintの警告を、コードの行末にインラインで美しく常時表示する。エラーを探してホバーする手間が消滅する。

—

5. チーム開発で役立つ設定の共有化ルール（リポジトリへの組み込み）

個人がいくら完璧な設定をしても、チームメンバーの誰かが異なる設定（あるいは設定なし）で開発していれば、インテリセンスの恩恵は半減する。

これを防ぐため、プロジェクトのルートに `.vscode` ディレクトリを切り、チーム全員に設定を強制・共有する仕組みをコードベースに組み込もう。

1. 推奨拡張機能の強制共有：`.vscode/extensions.json`

{
“recommendations”: [
“dbaeumer.vscode-eslint”, // ESLint統合
“esbenp.prettier-vscode”, // コードフォーマッター
“christian-kohler.path-intellisense” // パス補完強化
]
}

解説: メンバーがこのリポジトリをクローンしてVS Codeで開いた瞬間、右下に「推奨される拡張機能があります」と通知が出し、ワンクリックで開発環境の統一が完了する。

2. ワークスペース固有の設定強制：`.vscode/settings.json`

{
/ エディタ全体の保存時自動フォーマット設定 /
“editor.formatOnSave”: true,
“editor.defaultFormatter”: “esbenp.prettier-vscode”,

/ TypeScriptの言語サーバーとして、VS Code内蔵ではなくプロジェクト側のものを強制使用する /
“typescript.tsdk”: “node_modules/typescript/lib”,

/ 未使用のインポートを保存時に自動削除し、コードをクリーンに保つ /
“editor.codeActionsOnSave”: {
“source.organizeImports”: “explicit”,
“source.fixAll.eslint”: “explicit”
},

/ 検索対象からビルド成果物やログを除外し、インテリセンスの速度を保つ /
“search.exclude”: {
“/dist”: true,
“/build”: true,
“/.next”: true
}
}

アーキテクトのワンポイント: 特筆すべきは `”typescript.tsdk”: “node_modules/typescript/lib”` だ。これを設定することで、VS Codeがグローバルに持っているTypeScriptのバージョンではなく、そのプロジェクトの `package.json` で指定された正確なバージョンのTSServerが起動する。これにより、「ローカルでは型エラーにならないのにCIで落ちる」という悲劇を完全に防ぐことができる。

—

おわりに：インテリセンスの覚醒がもたらす開発体験

ここまで設定を突き詰めたプロジェクトでコードを書いたとき、あなたはこう感じるはずだ。
「――まるで、エディタが自分の思考の先を読んでいるようだ」と。

変数名を入力し始めた瞬間に望みのプロパティがサジェストされ、リファクタリングは一瞬で完了し、型エラーはコードを書いた瞬間に行末に赤く光る。このストレスフリーな開発環境こそが、エンジニアの認知負荷を劇的に下げ、ビジネスロジックの実装やアーキテクチャの設計という「本質的な創造作業」へと脳のメモリを集中させてくれる。

今日からあなたのプロジェクトに `tsconfig.json` / `jsconfig.json` の最適化と、`.vscode` による環境共有を導入してほしい。チームの生産性が劇的に跳ね上がる瞬間を、ぜひ体感してほしい。