VS Code のオススメ拡張機能と便利な使い方

こんにちは。開発二部 中野です。

開発を行う上で、VS Code を使う機会が多くなった方も多いのではないでしょうか。 今回は「VS Code とは？」という方向けに、よく使う拡張機能などについて紹介します。

はじめに：なぜ VS Code なのか

VS Code（Visual Studio Code）は、Microsoft が開発する無料のコードエディターで、豊富な拡張機能とカスタマイズ性により、世界中のエンジニアに愛用されています。

VS Code が他のエディターと比べて選ばれる理由は、主に以下の 3 点です。

• 軽量で高速：起動が速く、動作も軽快
• 拡張機能が豊富：公式マーケットプレイスに 5 万種類以上の拡張機能
• クロスプラットフォーム：Windows、macOS、Linux で同じ環境を構築可能 さらに、Git 統合、デバッグ機能、ターミナル統合など、開発に必要な機能が標準で備わっています。

必須の拡張機能

ここでは、どの言語の開発者にも役立つ汎用性の高い拡張機能をいくつか紹介します。

1. Japanese Language Pack for Visual Studio Code

VS Code のインターフェースを日本語化します。

• インストール後：Ctrl+Shift+P → 「Configure Display Language」→ 「ja」を選択
• 効果：メニューやメッセージが日本語になり、初心者でも扱いやすくなる

2. Prettier - Code formatter

コードを自動で整形してくれる拡張機能です。

• 対応言語：JavaScript、TypeScript、CSS、HTML、JSON など
• 主な機能：保存時に自動フォーマット、チーム内でのコードスタイル統一、余計な空白や改行を自動削除

3. ESLint

JavaScript/TypeScript のコード品質をチェックします。

• リアルタイムエラー検出：入力中に問題箇所をハイライト
• 自動修正：多くの問題はワンクリックで修正可能
• カスタマイズ：プロジェクトごとにルールを設定可能

4. GitLens — Git supercharged

Git の履歴を可視化し、開発効率を向上させます。

• インライン履歴：カーソルを置いた行の最終更新者・日時を表示
• コミットグラフ：ブランチの分岐・マージを視覚的に確認
• blame 情報：誰がいつ変更したかを確認可能

5. Error Lens

エラーや警告をコードの横に直接表示します。

• 従来の VS Code：問題パネルを確認する必要あり
• Error Lens 使用時：問題箇所の横にエラーメッセージが常時表示
• 効果：デバッグ時間が大幅に短縮

6. Material Icon Theme

ファイル・フォルダのアイコンを視認性の高いものに変更します。

• 効果：ファイル種別が一目でわかり、プロジェクト構造が把握しやすくなる
• カスタマイズ：アイコンパックの変更も可能

7. Live Server

ローカル開発サーバーを簡単に起動できます。

• 主な機能：HTML/CSS/JS ファイルをブラウザで自動リロード、右クリック → 「Open with Live Server」で起動
• 用途：フロントエンド開発時の即時確認

8. Path Intellisense

ファイルパスの自動補完を行います。

• 効果：import 文やファイル指定時のタイポ防止
• 対応：相対パス・絶対パス両方に対応

9. Better Comments

コメントを色分けして表示します。

• 例：// TODO：オレンジ色、// FIXME：赤色、// NOTE：青色
• 効果：重要なコメントが視覚的に強調され、見落とし防止

10. CodeSnap

コードをきれいな画像として保存できます。

• 用途：技術ブログやドキュメント用のコード画像作成、SNS でのコード共有
• 機能：行番号の有無、テーマ選択、影や余白の調整

言語別おすすめ拡張機能

使用する言語に応じて、以下の拡張機能を追加するとさらに効率的です。

Web 開発（JavaScript/TypeScript）

拡張機能	役割
GitHub Copilot	AI によるコード補完・生成
TypeScript Hero	TypeScript のインポート整理
Tailwind CSS IntelliSense	Tailwind CSS のクラス名補完・プレビュー
Debugger for Chrome	ブラウザデバッグの統合

Python 開発

拡張機能	役割
Python（Microsoft 公式）	Python 開発環境の統合
Pylance	高速な型チェック・補完
Jupyter	ノートブック形式での実行

Docker・コンテナ開発

拡張機能	役割
Docker	Dockerfile・docker-compose の補完・管理
Remote - SSH	遠隔サーバーでの開発
Remote - Containers	コンテナ内での開発環境構築

便利なショートカットキー

マウス操作を減らし、キーボードだけで作業を完結させることで、開発効率が大幅に向上します。

基本操作

操作	Windows/Linux	macOS
コマンドパレット	Ctrl+Shift+P	Cmd+Shift+P
クイックファイル開く	Ctrl+P	Cmd+P
定義へジャンプ	F12	F12
ターミナル表示/非表示	Ctrl+`	Ctrl+`
サイドバー表示/非表示	Ctrl+B	Cmd+B

編集操作

操作	Windows/Linux	macOS
行のコメント化	Ctrl+/	Cmd+/
行の移動（上/下）	Alt+↑/↓	Option+↑/↓
行の複製（下）	Shift+Alt+↓	Shift+Option+↓
行の削除	Ctrl+Shift+K	Cmd+Shift+K
複数カーソル（次を選択）	Ctrl+D	Cmd+D
全選択（同一単語）	Ctrl+Shift+L	Cmd+Shift+L

検索・置換

操作	Windows/Linux	macOS
ファイル内検索	Ctrl+F	Cmd+F
プロジェクト横断検索	Ctrl+Shift+F	Cmd+Shift+F
置換	Ctrl+H	Cmd+Option+F

ショートカット習得のコツ

• 一度に 3 つずつ：一度に全てを覚えようとせず、3 つずつ習得
• マウスを避ける：意識してキーボード操作を心がける
• カスタマイズ：Ctrl+K Ctrl+S でキーボードショートカット設定を開き、自分好みの設定に変更可能

設定ファイル（settings.json）のカスタマイズ

VS Code の設定は、GUI からだけでなく settings.json を直接編集することで、より細かくカスタマイズできます。

settings.json の開き方

• Ctrl+Shift+P → 「Open Settings (JSON)」を選択
• または、Ctrl+, → 右上の「{」アイコンをクリック

おすすめの設定例

{
  // 保存時に自動フォーマット
  "editor.formatOnSave": true,

  // 末尾の空白を自動削除
  "files.trimTrailingWhitespace": true,

  // 最小マップ表示
  "editor.minimap.enabled": true,

  // 括弧のペアを色分け
  "editor.bracketPairColorization.enabled": true,

  // 検索から除外するフォルダ
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true
  },

  // タブサイズ
  "editor.tabSize": 2,

  // 行番号表示
  "editor.lineNumbers": "on",

  // フォントサイズ
  "editor.fontSize": 14,

  // 自動保存（1 秒後）
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

主な設定項目の説明

設定項目	効果
editor.formatOnSave	保存時に Prettier などで自動フォーマット
files.trimTrailingWhitespace	行末の不要な空白を削除
editor.minimap.enabled	右側にコードの縮小表示（全体像把握に便利）
search.exclude	検索対象から特定フォルダを除外（検索速度向上）
files.autoSave	自動保存（うっかり保存し忘れ防止）

統合ターミナルの活用

VS Code には、エディター内でコマンドライン操作ができる統合ターミナルが備わっています。

基本操作

操作	ショートカット
ターミナル表示/非表示	Ctrl+`
新規ターミナル	Ctrl+Shift+`
ターミナル分割	Ctrl+Shift+5 または分割アイコン

便利な使い方

• エクスプローラーから開く：フォルダを右クリック → 「Open in Integrated Terminal」
• 複数ターミナル：Ctrl+Shift+` で複数ターミナルを起動し、並列でコマンド実行
• ターミナル間移動：Alt+←/→ でターミナルタブを切り替え

ターミナル設定のカスタマイズ

{
  // デフォルトシェル（Windows 例）
  "terminal.integrated.defaultProfile.windows": "PowerShell",

  // カーソルスタイル
  "terminal.integrated.cursorStyle": "block",

  // フォントサイズ
  "terminal.integrated.fontSize": 14
}

ワークスペースとプロジェクト管理

複数のプロジェクトを効率的に管理するための機能です。

ワークスペースファイル（.code-workspace）

複数のフォルダーを 1 つのワークスペースとして管理できます。

• 作成方法：ファイル → ワークスペースをファイルとして保存
• 利点：複数のプロジェクトを一度に開ける、ワークスペース固有の設定を保存可能、推奨拡張機能のリストを共有可能

プロジェクト管理に役立つ拡張機能

拡張機能	役割
Project Manager	プロジェクトの保存・切り替えをワンクリックで
Bookmarks	特定の行にブックマークを付けて素早く移動
Todo Tree	TODO/FIXME などのコメントをツリー表示

おわりに

VS Code は、拡張機能と設定のカスタマイズによって、自分だけの最適な開発環境を構築できる強力なエディターです。
本稿で紹介した拡張機能やショートカット、設定を参考に、自分にとっての最強エディターにカスタマイズしてみましょう！