VS Code のセットアップ
VS Code（Visual Studio Code）とは、Microsoft が開発・公開しているオープンソースのコードエディタです。2026年現在、世界で最も広く使われているエディタであり、豊富な拡張機能と GitHub Copilot などの AI 機能との連携が特徴です。
このページでは、VS Code のインストールから初期設定・必須拡張機能の導入まで、AI 時代の開発に適した環境を整える手順を説明します。
対象読者: VS Code を初めてセットアップする方、またはAI Native開発環境を整えたい方
学習時間の目安: 読了 15分 ＋ 実践 20分
前提知識: VS Code のインストール済み
- macOS または Windows（WSL2）を使用していること
- ターミナルの基本操作ができること（ターミナル入門 を参照）
インストール
Section titled “インストール”macOS（Homebrew を使う方法）
Section titled “macOS（Homebrew を使う方法）”Homebrew がインストール済みの場合、次のコマンドでインストールできます。
brew install --cask visual-studio-code公式サイトからダウンロードする方法
Section titled “公式サイトからダウンロードする方法”- https://code.visualstudio.com/ にアクセスする
- 「Download for Mac」または「Download for Windows」をクリックする
- ダウンロードしたファイルを開き、指示に従ってインストールする
インストールが完了したら、VS Code を起動して次の手順に進みます。
フォントサイズとテーマ
Section titled “フォントサイズとテーマ”VS Code の設定は Cmd + ,（macOS）または Ctrl + ,（Windows）で開きます。
フォントサイズの変更:
設定画面の検索ボックスに font size と入力し、Editor: Font Size を好みの値に変更します。14〜16 が一般的です。
テーマの変更:
Cmd + Shift + P（コマンドパレット）を開き、Preferences: Color Theme を選択します。ダークモード（Dark+、One Dark Pro など）は目への負担を軽減します。
Auto Save（自動保存）の設定
Section titled “Auto Save（自動保存）の設定”ファイルを手動で保存し忘れることを防ぐために、Auto Save を有効にします。
設定画面で auto save と検索し、Files: Auto Save を afterDelay（一定時間後に自動保存）に変更します。
ターミナルの統合
Section titled “ターミナルの統合”VS Code には統合ターミナルが搭載されており、エディタを切り替えずにコマンドを実行できます。
- 開き方:
Ctrl + `（バッククォート）またはView > Terminal - 新しいターミナルタブを追加: ターミナルパネルの
+ボタン - ターミナルで使用するシェルの設定は シェルの選び方 を参照
code . コマンドの設定
Section titled “code . コマンドの設定”ターミナルから code . と入力して、現在のフォルダを VS Code で開けるようにする設定です。
- VS Code を起動する
Cmd + Shift + P（コマンドパレット）を開くShell Command: Install 'code' command in PATHを選択する- ターミナルを再起動する
設定後、任意のフォルダで次のコマンドを実行すると VS Code でそのフォルダが開きます。
cd ~/projects/my-app
code .コマンドパレットの使い方
Section titled “コマンドパレットの使い方”コマンドパレットは VS Code の中核機能で、すべての機能をキーボードから呼び出せます。
- 開き方:
Cmd + Shift + P（macOS）またはCtrl + Shift + P（Windows） - ファイルを開く:
Cmd + P（ファイル名で検索） - 設定を開く:
Cmd + ,
コマンドパレットを使いこなすと、マウスを使わずほとんどの操作が完結します。
2026年に必須の拡張機能
Section titled “2026年に必須の拡張機能”拡張機能のインストールは、左サイドバーの拡張機能アイコン（四角が4つ並んだアイコン）をクリックするか、Cmd + Shift + X で拡張機能パネルを開き、名前を検索してインストールします。
GitHub Copilot（最重要）
Section titled “GitHub Copilot（最重要）”AI がコードを補完・提案する拡張機能です。2026年現在、AI 支援なしの開発と比べて生産性に大きな差が生まれます。
- 拡張機能名:
GitHub Copilot - 必要なもの: GitHub アカウント（無料プランあり）
- できること: コードの自動補完、コメントからのコード生成、エラーの修正提案
GitLens
Section titled “GitLens”Git のコミット履歴や変更者をエディタ上で確認できます。
- 拡張機能名:
GitLens — Git supercharged - できること: 各行のコミット履歴表示、ブランチの可視化、差分の確認
ESLint
Section titled “ESLint”JavaScript・TypeScript のコードの問題点を自動検出します。
- 拡張機能名:
ESLint - できること: コードの構文エラー・スタイル違反をリアルタイムで検出
Prettier
Section titled “Prettier”コードを自動的に整形するフォーマッターです。
- 拡張機能名:
Prettier - Code formatter - できること: 保存時に自動でコードを整形する
Prettier を保存時に自動実行するには、設定に以下を追加します。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}Python（Microsoft）
Section titled “Python（Microsoft）”Python の開発に必要な機能を一括で提供します。
- 拡張機能名:
Python（Microsoft 製） - できること: Python の構文ハイライト、デバッグ、仮想環境の切り替え
Error Lens
Section titled “Error Lens”エラーや警告をコード行の右側にインライン表示します。エラーに気づきやすくなります。
- 拡張機能名:
Error Lens - できること: エラーメッセージをファイルを切り替えずに確認できる
Settings Sync（設定の同期）
Section titled “Settings Sync（設定の同期）”GitHub アカウントを使って、VS Code の設定・拡張機能・キーバインドを複数のPCで同期できます。新しいPCに移行したときに設定をやり直す手間がなくなります。
- VS Code の左下にある人物アイコンをクリックする
Turn on Settings Sync...を選択する- GitHub アカウントでサインインする
- 同期する項目（設定・拡張機能・キーバインドなど）を選択する
設定が有効になると、どのPCでも同じ環境で作業できます。
- VS Code は
brew install --cask visual-studio-codeまたは公式サイトからインストールする code .コマンドを有効にしておくと、ターミナルからすぐにエディタを開ける- GitHub Copilot は 2026年の AI 開発環境に必須の拡張機能
- Settings Sync を使えば、複数のPCで設定を共有できる
よくある質問
Section titled “よくある質問”Q: VS Code と VS Code Insiders の違いは何ですか？
A: VS Code Insiders は毎日更新されるプレビュー版で、GitHub Copilot の Agent mode や MCP サポートなどの最新機能をいち早く試せます。安定性より最新機能を優先したい場合に使います。通常の開発には安定版（VS Code）を推奨します。詳細は VS Code Insiders とは を参照してください。
Q: 拡張機能を入れすぎると遅くなりますか？
A: 拡張機能の数が多いほど起動時間やメモリ使用量に影響します。使っていない拡張機能は無効化（Disable）しておくことで、特定のプロジェクトに必要なものだけを有効にできます。
Q: GitHub Copilot は無料で使えますか？
A: 2026年現在、GitHub の無料プランでも月間一定数の補完を利用できます。より多く使う場合は有料プランへのアップグレードが必要です。詳細は GitHub Copilot の料金ページ を確認してください。