初めに
Web開発を始めたばかりの頃、インデントのズレや単純な構文エラーなど、今思えば「設定一つで防げたはずのミス」を何度も繰り返してきました。
この記事は新人時代の自分の失敗を反省し、「あの時にこの設定を知っていればもっと楽だったのに！」と心から感じた設定や拡張機能をまとめたメモです。
特にWeb開発で役立つ「可読性」「自動整形」「開発効率」を最大化する設定を紹介したいと思います。
基本設定 (Settings.json)
Tip: Cmd + , (Mac) / Ctrl + , (Windows)
右上の Edit as JSON をクリックして settings.json を開くことができます。
インデントと空白
コードの乱れはバグの温床です。まずは見た目を整えましょう。
{
"editor.tabSize": 2, // Web開発では2スペースが主流
"editor.insertSpaces": true, // Tabキーでスペースを挿入
"editor.renderWhitespace": "all", // 空白を可視化（全角スペースの混入防止）
"files.insertFinalNewline": true, // ファイルの末尾に必ず改行を入れる（POSIX規格）
"files.trimTrailingWhitespace": true // 行末の不要な空白を自動削除
"workbench.tree.indent": 16 // サイドバーのディレクトリ階層を深くして見やすくする
}
自動フォーマットと補完
手動でインデントを調整するのはもうやめましょう。
{
"editor.formatOnSave": true, // 保存時に自動でコードを整形
"editor.formatOnPaste": true, // 貼り付け時に自動でコードを整形
"editor.defaultFormatter": "esbenp.prettier-vscode", // デフォルトの整形器をPrettierに設定
"editor.suggestSelection": "first", // 補完候補の先頭を常に選択
"emmet.includeLanguages": {
"javascript": "javascriptreact" // React(JSX)等でもEmmetを使えるようにする
"javascript.preferences.importModuleSpecifier": "non-relative", // インポートパスを自動で最適化（絶対パス等）
"typescript.preferences.importModuleSpecifier": "non-relative",
"javascript.preferences.includePackageJsonAutoImports": true, // package.jsonの依存関係を自動インポート候補に含める
"typescript.preferences.includePackageJsonAutoImports": true,
}
}
可読性の向上：コードの構造を一瞬で把握する
視覚的なノイズを減らし、重要な情報に集中できる環境を作ります。
{
"editor.bracketPairColorization.enabled": true, // 対応する括弧に色をつける（標準機能）
"editor.guides.bracketPairs": "active", // 現在のスコープの括弧を強調
"editor.minimap.enabled": false, // 画面を広く使うためミニマップを非表示（好みでOK）
"editor.lineHeight": 1.6, // 行間を広げて読みやすくする
"editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace", // 合字対応フォントを推奨
"editor.fontLigatures": true // 合字（=> が矢印になるなど）を有効化
"editor.rulers": [80, 120] // 80・120文字目に縦線を引き、1行の長さを意識する（コードの肥大化防止）
"editor.scrollBeyondLastLine": false // 最後の行を超えてスクロールしない（使いやすさ向上）
}
開発スピードアップ拡張機能
Web開発を効率化するために、最低限入れておくべき5つのプラグインです。
- Prettier - Code formatter
- コードスタイルを強制的に統一します
- ESLint
- JavaScript/TypeScript の構文エラーやベストプラクティスをリアルタイムで指摘
- GitHub Pull Requests
- PRの作成やレビューをVSCode内で完結。ブラウザを開く手間が省けます
- Error Lens
- エラーや警告の内容をエディタの行内に直接表示。ミスに一瞬で気づけます
- Path Intellisense
- ファイルパスの補完を強力にサポート。インポート時のパスミスを防ぎます
- Live Server
- ローカルサーバーを即座に起動。ファイルを保存するだけでブラウザが自動更新（リロード）されます
爆速開発ショートカットキー
設定や拡張機能も大事ですが、キーボード操作を極めることが一番の時短になります。Web開発で頻用するものを厳選しました。
編集・ナビゲーション
| 操作 | Windows | Mac |
|---|---|---|
| 定義へ移動 | Ctrl + 左クリック | Cmd + 左クリック |
| 参照先を検索 | Shift + F12 | Shift + F12 |
| 行のコピー | Shift + Alt + ↓ / ↑ | Shift + Opt + ↓ / ↑ |
| 行の移動 | Alt + ↓ / ↑ | Opt + ↓ / ↑ |
| 同じ單語を次々選択 | Ctrl + D | Cmd + D |
ファイル・画面操作
| 操作 | Windows | Mac |
|---|---|---|
| コマンドパレット | Ctrl + Shift + P | Cmd + Shift + P |
| ファイル名で検索 | Ctrl + P | Cmd + P |
| サイドバーの表示/非表示 | Ctrl + B | Cmd + B |
| ターミナルの表示/非表示 | Ctrl + ` | Ctrl + ` |
| プロジェクト内全検索 | Ctrl + Shift + F | Cmd + Shift + F |
特に Ctrl/Cmd + D (マルチカーソル) は、複数の変数名を一気に書き換える時に神がかった効率を発揮します。
MCP と AI で開発体験を次世代へ
今、AI開発界隈で最も熱いトピックが MCP (Model Context Protocol) です。簡単に言えば、AI（Claudeなど）がローカルファイルやツールに直接アクセスするための共通規格です。
自分でMCPサーバーを作らなくても、拡張機能を通じてその恩恵を受けることができます。
Roo Code（旧 Roo Cline）
Roo Code は現在、VSCode で最も強力な AI エージェントの一つであり、MCP に対応しています。
おすすめの理由
通常の Copilot は「提案」までですが、Roo Code はあなたの指示に基づき、ファイルの作成、既存コードの修正、ターミナルでのテスト実行まで自動で行います。
MCP との連携
公開されている MCP サーバー（Google Search MCP や Filesystem MCP など）を登録することで、AI が最新のドキュメントを検索したり、複雑なディレクトリ構造を理解して修正したりできるようになります。
GitHub Copilot
もはや定番ですが、中級者を目指すなら Copilot Prompting を極めるのが近道です。
Tip: Cmd + I (Mac) / Ctrl + I (Windows)
「このロジックをより簡潔にリファクタリングして」と入力してみましょう。前述の formatOnSave 設定と組み合わせることで、爆速で綺麗なコードが完成します。
スラッシュコマンド
チャット欄で /explain（コード解説）、/fix（バグ修正）、/tests（テストコード生成）を使い分けると効率が劇的に上がります。
自然言語による検索
サイドバーのチャットで「プロジェクト内で認証処理をしているのはどこ？」と聞けば、ファイルを探し回る手間が省けます。
MCP との連携
最近のアップデートにより、VS Code 経由で GitHub Copilot も MCP サーバーを利用可能になりました。以下のように settings.json に設定を追加することで、Copilot Chat が外部ツールを呼び出せるようになります。
以下はGoogle Cloudプロジェクトを例にした設定です。
"chat.mcp.servers": {
"google-search": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-google-search"],
"env": { "GOOGLE_API_KEY": "YOUR_KEY", "GOOGLE_SEARCH_ENGINE_ID": "YOUR_ID" } // 最新情報の検索用、
},
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "YOUR_TOKEN" } // リポジトリやIssueの操作用
},
"everything": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-everything"] // 動作確認用のテストサーバー
}
}
このように MCP を導入すると、AI が単なる「推論」だけでなく、実際のデータや外部検索に基づいた「正確な回答」を返してくれるようになります。
まとめ
VSCode の強みは、自分自身の成長に合わせてカスタマイズできる点にあります。
ツールに振り回されるのではなく、自分に最適な環境を育てていくことで、より本質的な「ものづくり」の楽しさに集中できるようになります。
最初は少しずつで構いません。自分好みの設定で、最高の開発ライフを送りましょう 🚀