「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 3. 拡張機能を使ってより高度な比較を行う
VSCodeには、より高度な差分比較を行うための拡張機能が用意されています。以下の拡張機能を導入すると、さらに便利に使えます。
① "Partial Diff"
- 2つのテキスト選択範囲の差分を比較可能
- 同じファイル内の異なる部分を比較できる
-
Partial Diffコマンドを実行することで使用可能
② "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」も使えます。
まとめ
VSCode の差分比較(vscode diff)機能は、標準機能だけでも日常の開発で十分使えます。まずはコマンドパレットの Files: Compare Active File With... を覚えるだけで OK です。
さらに拡張機能を併用することで、チーム開発や大規模リポジトリでのvscode 差分比較が格段に快適になります。まずは Partial Diff 、次に GitLens の導入を検討してみてください。
💡 ショートカット:Ctrl+Shift+P→compareと入力するだけですぐ差分比較を開始できます。

