こんにちは！日々のコーディング、お疲れ様です。
ふとエディタを開いたとき、「あれ、さっきまで出ていたはずのコード補完（インテリセンス）が出ないぞ……？」とイライラした経験はありませんか？あるいは、自作のモジュールをインポートしようとしたときに、VS Codeがその存在に気づいてくれず、赤く波線で怒られてしまう現象です。
これ、実はあなたのコードが間違っているのではなく、VS Codeが「あなたのプロジェクトの構造とルール」を正しく把握できていないことが原因なんです。
今回は、世界中の開発現場で愛用されているVS Codeのインテリセンスを完全に覚醒させ、まるであなたの脳内を覗いているかのような滑らかなコード補完を実現するための奥義を伝授します。
これをマスターすれば、毎日のコーディングで「ファイルパスを打つ苦痛」や「メソッド名を忘れてドキュメントを行き来する時間」が劇的に消え去りますよ。さあ、一緒にエディタのポテンシャルを限界まで引き出していきましょう！
—
なぜ、あなたのVS Codeは「バカ」になってしまうのか？
VS Codeは標準でも非常に優秀なエディタです。JavaScriptやTypeScriptファイルをひらけば、基本的なキーワードや標準ライブラリの補完はしてくれます。
しかし、プロジェクトが少し大きくなってくると、途端に補完が効かなくなったり、おかしな候補を表示し始めたりします。なぜでしょうか？
インテリセンスの裏側で起きていること
VS Codeのインテリセンス（TypeScript Language Server）は、ファイルを開いたとき、周辺のファイルがどう繋がっているかを「推論」しようと必死に働いています。
- 「この `import` のパスは、どこを指しているんだろう？」
- 「このオブジェクトのプロパティは、どの型定義から来ているんだろう？」
これを解決するために、VS Codeはプロジェクト全体の地図（依存関係グラフ）を作ろうとします。しかし、地図の描き方（ルール）が書かれたコンパスがないと、迷子になってしまうのです。そのコンパスの役割を果たすのが、今回解説する `jsconfig.json` や `tsconfig.json` といった設定ファイルです。
—
基礎セットアップ：VS Codeに「プロジェクトの地図」を渡す
まずは、VS Codeがプロジェクト全体を正しくスキャンできるように、設定ファイルの土台を作りましょう。TypeScriptを使っているなら `tsconfig.json`、純粋なJavaScript（ES Modulesなど）でモダンな開発をしているなら `jsconfig.json` をプロジェクトのルートディレクトリ（一番上の階層）に配置します。
ここでは、多くの現場で導入されている近代的な設定のテンプレートをお見せします。なぜこの設定が必要なのか、一行ずつ意味を噛み砕いていきましょう。
実践：`jsconfig.json`（または `tsconfig.json`）の黄金設定
プロジェクトのルートに `jsconfig.json` を作成し、以下のコードを記述してください。
{
“compilerOptions”: {
/ — モジュール解決の根幹設定 — /
“target”: “es2022”, // 最新のJavaScript仕様を前提とし、モダンな構文やビルトインオブジェクトを正しく補完させます
“module”: “esnext”, // モジュールシステムとしてES Modulesを前提にします
“moduleResolution”: “node”, // Node.jsのモジュール解決アルゴリズム（node_modulesの探し方など）を採用します
/ — パスエイリアスの設定（後述の超重要テクニック） — /
“baseUrl”: “.”, // 绝对パスの基準地をプロジェクトのルートに設定します
“paths”: {
“@/”: [“src/”] // “@/” と書くだけで “src/” ディレクトリを指すように魔法をかけます
},
/ — 型チェックと厳密性の調整 — /
“checkJs”: true, // JavaScriptファイルであってもJSDocなどを元に厳密な型チェックと高度な補完を行います
“strict”: true, // 潜在的なバグを防ぐため、厳格な型チェックモードを有効にします
“allowSyntheticDefaultImports”: true, // デフォルトエクスポートを持たないモジュールからのインポートを安全に許可します
/ — 開発体験を向上させる便利設定 — /
“resolveJsonModule”: true // コード内で JSON ファイルを直接 import して、その中身まで完全に型付きで補完させます
},
/ — 検索範囲のコントロール（パフォーマンスの命綱） — /
“include”: [
“src//” // インテリセンスの監視対象を “src” ディレクトリ配下に限定します
],
“exclude”: [
“node_modules”, // 依存ライブラリの海（数万ファイル）をスキャン対象から除外し、エディタの動作を軽快に保ちます
“dist”, // ビルド成果物は人間が書いたコードではないため除外します
“build”,
“/.spec.js” // （必要に応じて）テストファイルなどを除外して補完候補のノイズを減らします
]
}
—
精度高いHelloWorld的な動作確認：パスエイリアスで「感動の補完」を体験する
設定が完了したら、実際にインテリセンスがどれほど賢くなったかを体験してみましょう。
ここでは、先ほど設定した「パスエイリアス（`@/`）」が完璧に機能するかどうかをテストする、小さなHelloWorld的な環境を作ります。
1. フォルダ構成を作る
プロジェクト内に以下のようなシンプルなディレクトリを作成してください。
my-project/
├── jsconfig.json
└── src/
├── utils/
│ └── greeter.js
└── index.js
2. ヘルパー関数を用意する (`src/utils/greeter.js`)
まず、挨拶を返すだけのシンプルな関数を定義します。
// src/utils/greeter.js
/
- ユーザー名を受け取り、心のこもった挨拶文を返します。
- @param {string} name – 挨拶する相手の名前
- @returns {string} 挨拶の文字列
/
export function sayHello(name) {
return `こんにちは、${name}さん！VS Codeのインテリセンスへようこそ！`;
}
(※ここでJSDocコメント `/ @param … /` を書いておくのが、JS環境でインテリセンスを爆発させるコツです)
3. メインファイルからエイリアスを使って呼び出す (`src/index.js`)
次に、`src/index.js` を開いて、以下のように入力してみてください。
// src/index.js
// ここで注目！ “src/utils/greeter” と長くて面倒な相対パスを書く必要はありません。
// “@” と打ち込むだけで、VS Codeが “src/” の中身をサジェストしてくれます。
import { sayHello } from ‘@/utils/greeter’;
// sayHello関数にカーソルを合わせると、先ほどのJSDocの解説がポップアップで美しく表示されます。
const message = sayHello(‘開発者’);
console.log(message);
【ここが感動ポイント】
`from ‘` と打った瞬間に、VS Codeが `@/utils/greeter` というパスを自動補完の候補として提示してくれましたか？
相対パスの地獄（`../../utils/greeter` など階層を数える苦しみ）から完全に解放される瞬間です。これだけでも、毎日のコーディングストレスが激減しますよね。
—
大規模プロジェクトで「補完が重い・効かない」を防ぐ究極の除外設定
プロジェクトが巨大化してくると、「急にインテリセンスの反応が遅くなった」「ビルドツールを入れた途端にCPUが跳ね上がった」という現象が起きがちです。
犯人は大抵、VS Codeがスキャンしなくていいファイルまで一生懸命監視していることにあります。
先ほどの `jsconfig.json` の `exclude` セクションの重要性を、シニアの視点からもう一歩深く解説します。
スキャン対象から外すべき「魔のディレクトリ」
大規模開発では、以下のディレクトリやファイル群を必ず `exclude`（または `compilerOptions.skipLibCheck`）の対象に入れてください。
1. `node_modules` やビルド出力先 (`dist`, `build`, `.next` など)
- これらは数万〜数十万のファイルを含みます。ここを監視させると、VS Codeのメモリ消費量が跳ね上がり、インテリセンスが沈黙します。
2. 巨大なサードパーティ製ライブラリの型定義
- TypeScriptの型定義ファイル（`.d.ts`）の中には、複雑すぎてコンパイラを悩ませるものがあります。ここで役立つのが `”skipLibCheck”: true` という隠し味的な設定です（compilerOptions内に追加してみてください）。これにより、node_modules内の型チェックをスキップし、爆速の補完スピードを手に入れることができます。
—
先輩エンジニアからのメッセージ
今回紹介した `jsconfig.json` / `tsconfig.json` のチューニングは、いわば「あなたのプロジェクト専用のカーナビゲーションシステムを作る作業」です。
最初は「設定ファイルを書くのが面倒だな」と感じるかもしれませんが、一度この快適な環境（パスエイリアス、頑健な型推論、ノイズのない爆速な補完）を味わってしまったら、もう元の環境には絶対に戻れなくなります。
「エディタが自分の意図を完璧に理解してくれている」という感覚は、コーディングを単なる作業から、純粋なクリエイティブの時間へと変えてくれます。
ぜひ今日のプロジェクトから取り入れて、あなたのVS Codeを最強の相棒に覚醒させてあげてください！それでは、快適な開発ライフを！