VSCode 基本環境構築

1. VSCode とは

Visual Studio Code（VSCode）は Microsoft が開発・公開しているオープンソースのコードエディタです。 軽量ながら豊富な拡張機能（Plugin）を追加することで IDE 並みの機能を持ち、 Web・Java・Python・Go・Rust など あらゆる言語の開発に対応できます。

2. インストール手順（OS別）

Windows

1. 公式サイトからインストーラーをダウンロード
   https://code.visualstudio.com/ にアクセスし、 「Download for Windows」をクリック。VSCodeSetup-x64-*.exe をダウンロードします。
2. インストーラーを実行
   ダウンロードした .exe をダブルクリック。 「同意する」→「次へ」を進め、以下のオプションを推奨設定にします。
   • 「PATH への追加」— 必ずチェックを入れる（ターミナルから code . コマンドが使えるようになります）
   • 「エクスプローラーのコンテキストメニューに追加」— 任意（あると便利）
3. インストール完了・起動確認
   インストール後、スタートメニューから「Visual Studio Code」を起動。 ウェルカム画面が表示されれば完了です。

code --version

macOS

1. 公式サイトからダウンロード
   https://code.visualstudio.com/ から 「Download for Mac」をクリック。.zip ファイルをダウンロードします。
2. アプリケーションフォルダへ移動
   展開された Visual Studio Code.app を /Applications フォルダへドラッグ＆ドロップします。
3. ターミナル連携（code コマンド）の設定
   VSCode を起動し、Cmd+Shift+P でコマンドパレットを開き、 「Shell Command: Install 'code' command in PATH」を実行します。

Homebrew を使う場合は以下のコマンドでもインストール可能です。

brew install --cask visual-studio-code

Linux（Ubuntu / Debian 系）

# Microsoft GPG キーの追加
wget -qO- https://packages.microsoft.com/keys/microsoft.asc \
  | gpg --dearmor \
  | sudo tee /usr/share/keyrings/packages.microsoft.gpg > /dev/null

# リポジトリの追加
echo "deb [arch=amd64,arm64,armhf signed-by=/usr/share/keyrings/packages.microsoft.gpg] \
  https://packages.microsoft.com/repos/code stable main" \
  | sudo tee /etc/apt/sources.list.d/vscode.list > /dev/null

# インストール
sudo apt update
sudo apt install -y code

3. 日本語化

VSCode はデフォルトで英語 UI です。 日本語化するには Japanese Language Pack for Visual Studio Code を導入します。

1. 左サイドバーの拡張機能アイコン（四角が4つ）をクリック、または Ctrl+Shift+X
2. 検索欄に「Japanese Language Pack」と入力
3. 「Japanese Language Pack for Visual Studio Code」（Microsoft 製）をインストール
4. 右下に「Restart to switch to Japanese」ダイアログが出たら「Restart」をクリック

4. テーマ・アイコン設定

見た目をカスタマイズするとコーディングのモチベーションが上がります。 メニューバーの「ファイル → ユーザー設定 → テーマ → 配色テーマ」から変更できます。

人気の配色テーマ

ファイルアイコンテーマ（おすすめ）

5. 基本設定（settings.json）

Ctrl+Shift+P → 「設定を開く（JSON）」または Ctrl+, → 右上のアイコン「JSON で開く」から設定ファイルを編集できます。

以下は最初に設定しておくと快適になる推奨項目です。

{
  // ── エディタ全般 ──────────────────────────────
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.renderWhitespace": "boundary",
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.formatOnSave": true,
  "editor.cursorBlinking": "smooth",
  "editor.suggestSelection": "first",
  "editor.bracketPairColorization.enabled": true,

  // ── ファイル ──────────────────────────────────
  "files.autoSave": "onFocusChange",
  "files.encoding": "utf8",
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,

  // ── ターミナル ────────────────────────────────
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.windows": "PowerShell",

  // ── ワークベンチ ──────────────────────────────
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",
  "workbench.editor.tabSizing": "shrink",

  // ── エクスプローラー ──────────────────────────
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false
}

6. よく使うショートカット

ショートカットを覚えるだけで作業速度が大きく向上します。まず以下の基本セットを習得しましょう。

ファイル・エディタ操作

編集操作

7. ワークスペースの使い方

VSCode の「ワークスペース」は、プロジェクトのルートフォルダや設定をひとつのセットとして保存・管理する仕組みです。 チーム開発では .vscode/settings.json をリポジトリに含めることで、 チームメンバー全員が同じエディタ設定を共有できます。

ワークスペース設定ファイルの例

{
  // プロジェクト共通の設定（リポジトリにコミットして共有）
  "editor.tabSize": 4,
  "editor.formatOnSave": true,
  "files.eol": "\n",
  "files.encoding": "utf8",
  "[java]": {
    "editor.tabSize": 4,
    "editor.formatOnSave": true
  }
}

マルチルートワークスペース

複数のフォルダを一つのウィンドウで管理したい場合は「ファイル → フォルダーをワークスペースに追加」を使います。 .code-workspace ファイルとして保存しておけば次回も同じ構成を開けます。

8. まとめ