「vscode diff」と検索してみると、実は VSCode には標準機能だけでかなり強力な差分比較（vscode 差分比較）ができます。さらに拡張機能を導入すると、コードレビューから設定ファイルの確認まで幅広い用途に対応できます。
本記事では、標準の差分比較機能（3種類）から、おすすめ拡張機能、実践的な活用シーンまでを丁寧に解説します。
| 比較したい内容 | 使う機能 |
|---|---|
| 2ファイルの差分 | コマンドパレット → Compare Active File With... |
| Gitの変更差分 | ソース管理ビュー（Ctrl+Shift+G） |
| テキストの一部だけ比較 | Partial Diff 拡張機能 |
| ブランチ間の差分 | git difftool コマンド / GitLens |
[目次を開く]
1. VSCodeで2つのファイルの差分を比較する方法
VSCodeでは、2つのファイルの違いを直接比較することができます。手順は以下の通りです。
コマンドパレットを使う
-
Ctrl + Shift + Pでコマンドパレットを開く。 -
Compareと入力し、Files: Compare Active File With...を選択。 - 比較したいファイルを選択する。
- 差分が表示される。
コマンドパレットを使うことで、開いているファイル同士を簡単に比較できます。
VSCodeの「Compare（比較）」機能について補足
Files: Compare Active File With... の他にも以下の種類があります。
| Compareの種類 | 機能詳細 |
|---|---|
| Compare Active File With… | 現在開いているファイルを別のファイルと比較 |
| Compare Active File with Saved | 現在開いている最後に保存した状態と比較 |
| Compare Active File with Clipboard | 現在開いているファイルとクリップボードを比較 |
2. Gitを使用した差分の比較
VSCodeはGitと強く統合されており、リポジトリ内の変更を素早く確認できます。
方法① ソース管理ビューを使う
-
Ctrl + Shift + G Gもしくは、上記の画像の赤丸のアイコンをクリックし ソース管理ビューを開く。 - 変更のあるファイルがリストアップされるので、クリックする。
- 変更前と変更後のファイルが並んで表示され、差分がハイライトされる。
この方法は、Gitリポジトリを使用している場合に便利です。
方法② コマンドラインを使う
ターミナル（Ctrl + ＠ ）を開いて、以下のコマンドを実行すると、VSCodeの差分ビューを開くことができます。
git difftool --tool=code --dir-diffまた、特定のブランチ間の差分をVSCodeで確認する場合は、以下のコマンドを実行します。
git difftool main feature-branch方法③ ブランチ間の差分を比較する（vscode ブランチ比較）
特定のブランチ同士を比較したいときは、ターミナルで次を実行するとVSCodeの差分ビューでブランチ間の差分を一覧できます。
git difftool --dir-diff main feature-branchGUIだけで完結させたい場合は、拡張機能 GitLens の「Branch Compare」を使うと、比較したいブランチを選ぶだけで変更ファイルをツリー表示できます（次章で解説）。
差分が思いどおりに出ないときの症状別チェック
| 症状 | 原因として多いもの | 対処 |
|---|---|---|
| 1行も変えていないのに全行が差分になる | 改行コードが CRLF と LF で混ざっている | ステータスバー右下の CRLF / LF をクリックして揃える。リポジトリ全体で揃えるなら .gitattributes に * text=auto を書く |
| インデントや行末の空白だけの変更が差分に出ない | 既定で空白の差を無視している | settings.json に "diffEditor.ignoreTrimWhitespace": false を追加する |
| 大きなファイルで差分が計算されない | 計算時間・ファイルサイズの上限に当たっている | "diffEditor.maxComputationTime": 0 と "diffEditor.maxFileSize": 0（0＝無制限）にする |
| 左右に並んだ表示が狭くて読みにくい | 既定が Side by Side 表示 | 差分タブ右上の … から Toggle Inline View。恒久的に変えるなら "diffEditor.renderSideBySide": false |
| 差分ビューで直した内容が保存できない | 左ペイン（比較元）が読み取り専用になっている | 右ペインで編集して Ctrl + S。Git の差分では右が作業ツリー側 |
これらの設定は Ctrl + , で設定画面を開き、検索窓に diffEditor と入れるとまとめて表示されます。
エクスプローラーから2ファイルを選んで比較する（拡張機能なし）
コマンドパレットを開かずに済むぶん、ファイルが2つとも見えているときはこちらが速い方法です。
- エクスプローラーで1つ目のファイルを右クリック → Select for Compare
- 2つ目のファイルを右クリック → Compare with Selected
同じことをターミナルから行うなら次の1行で、VSCode の差分タブが直接開きます。
code --diff before.json after.jsonログや設定ファイルのバックアップなど、エディタで開く前に差分だけ見たいときはこの形が手数の少ないやり方です。
差分の中を移動するキー操作
| 操作 | キー |
|---|---|
| 次の差分へ移動 | F7 |
| 前の差分へ移動 | Shift + F7 |
| コマンドから移動する | コマンドパレット → Go to Next Difference |
変更箇所が多いファイルでは、スクロールで探さずに F7 を押し続けると、上から順に差分だけを追えます。
3. 拡張機能を使ってより高度な比較を行う
VSCodeには、より高度な差分比較を行うための拡張機能が用意されています。以下の拡張機能を導入すると、さらに便利に使えます。
① "Partial Diff"
テキストの選択範囲どうしを比較できる拡張機能です。同じファイル内の離れた箇所や、コピーした2つのスニペットの比較に便利です。
インストールと使い方:
- 拡張機能ビュー（
Ctrl+Shift+X）で「Partial Diff」を検索してインストール。 - 1つ目の範囲を選択→コマンドパレット（
Ctrl+Shift+P）→Partial Diff: Mark Selection (1/2)。 - 2つ目の範囲を選択→
Partial Diff: Compare Selection (2/2) with Previousで差分が新しいタブに表示。
- クリップボードの内容と比較する
Partial Diff: Compare Selection with Clipboardも便利です。
② "GitLens — Git supercharged"
- Gitの変更履歴を詳細に可視化
- 過去のコミット間の差分を簡単に比較
- ファイル単位で変更のハイライト表示が可能
これらの拡張機能をインストールすると、差分の比較がより直感的になります。
4. VSCodeの差分比較を活用する場面
① コードレビュー
チーム開発では、Pull Request（PR）をレビューする際に変更点をチェックする必要があります。VSCodeを使えば、リモートリポジトリとローカルのファイルの差分をすぐに比較できます。
② 設定ファイルの変更比較
設定ファイル（config.json や .env など）が意図せず変更されていないかをチェックする際にも、VSCodeの差分機能が役立ちます。
③ 過去バージョンとの比較
以前のバージョンと現在のファイルの違いを確認することで、バグの発見やリファクタリングの際の変更点を素早く把握できます。
5. よくある質問（FAQ）
Q. vscode diff はショートカットキーで開けますか？
A. はい。Ctrl+Shift+P でコマンドパレットを開き、compare と入力するとすぐに差分比較を開始できます。
Q. vscode 差分比較でブランチ間の差分を見る方法は？
A. ターミナルで git difftool main feature-branch を実行するか、GitLens 拡張機能の「Branch Compare」機能を使います。
Q. 拡張機能なしで2ファイルを比較する方法は？
A. Files: Compare Active File With... コマンドで拡張機能不要で比較できます。エクスプローラーでファイルを右クリック→「Select for Compare」も使えます。
Q. vscodeの比較結果を保存・共有するには？
A. 差分ビューはそのままでは保存できません。差分を残したい場合はコマンドラインで git diff main feature-branch > diff.txt のようにファイル出力するか、差分タブの内容をコピーして貼り付けます。
まとめ
VSCode の差分比較（vscode diff）機能は、標準機能だけでも日常の開発で十分使えます。まずはコマンドパレットの Files: Compare Active File With... を覚えるだけで OK です。
さらに拡張機能を併用することで、チーム開発や大規模リポジトリでのvscode 差分比較が格段に快適になります。まずは Partial Diff 、次に GitLens の導入を検討してみてください。
💡 ショートカット:Ctrl+Shift+P→compareと入力するだけですぐ差分比較を開始できます。
