VSCodeで比較するときに使う主なショートカット
Visual Studio Code（VSCode）には、ファイル同士や保存前後の内容を比較できる機能が標準で搭載されています。
特に覚えておきたいのが、現在開いているファイルと保存済みの内容を比較するショートカットです。
WindowsやLinuxでは、次のキーを順番に押します。
Ctrl + K → D
macOSでは、次の操作です。
⌘ + K → D
また、クリップボードにコピーした内容と現在のファイルを比較する場合は、Windows・Linuxでは次のショートカットを利用できます。
Ctrl + K → C
macOSでは次の操作です。
⌘ + K → C
VSCodeでは、このほかにも任意の2ファイルを比較したり、Gitで変更前後を確認したりできます。
VSCodeの比較で覚えておきたいショートカット一覧
主な操作をまとめると、次のとおりです。
| 操作 | Windows / Linux | macOS |
|---|---|---|
| 現在のファイルと保存済み内容を比較 | Ctrl + K → D | ⌘ + K → D |
| 現在のファイルとクリップボードを比較 | Ctrl + K → C | ⌘ + K → C |
| コマンドパレットを開く | Ctrl + Shift + P | Shift + ⌘ + P |
| キーボードショートカット設定を開く | Ctrl + K → Ctrl + S | ⌘ + K → ⌘ + S |
| ソース管理ビューを開く | Ctrl + Shift + G | Ctrl + Shift + G |
頻繁にファイル比較を行う場合は、まずCtrl + K → DとCtrl + K → Cを覚えておくと便利です。
現在のファイルと保存済み内容を比較する方法
VSCodeでは、現在編集中のファイルと、最後に保存した状態を比較できます。
WindowsやLinuxでは、次のショートカットを使用します。
Ctrl + K → D
macOSでは、次の操作です。
⌘ + K → D
「Compare Active File with Saved」を実行できる
このショートカットでは、VSCodeの「File: Compare Active File with Saved」というコマンドが実行されます。
たとえば、保存済みのコードが次の状態だったとします。
<h1>Hello</h1>
その後、ファイルを保存せずに次のように変更します。
<h1>Hello World</h1>
この状態でCtrl + K → Dを押すと、最後に保存した内容と現在編集中の内容を比較できます。
どこを変更したのか確認してから保存したい場合に便利な機能です。
Gitのコミット内容と比較する機能ではない
注意したいのは、Ctrl + K → DがGitのコミットとの差分を表示するショートカットではない点です。
比較されるのは基本的に、次の2つです。
「最後に保存したファイルの内容」と「現在編集中の未保存内容」です。
そのため、GitのHEADや前回のコミット内容との比較とは異なります。
Gitによる変更内容を確認したい場合は、VSCodeのソース管理機能を使用します。
現在のファイルとクリップボードを比較する方法
VSCodeでは、現在開いているファイルとクリップボードの内容を直接比較できます。
Windows・Linuxでは、次のショートカットを使用します。
Ctrl + K → C
macOSでは次の操作です。
⌘ + K → C
コピーしたコードをそのまま比較できる
たとえば、ブラウザやGitHubなどから次のコードをコピーしたとします。
function hello() {
console.log("Hello");
}
VSCodeで比較対象のファイルを開いた状態でCtrl + K → Cを実行すると、現在のファイルとクリップボードの内容を比較できます。
わざわざ比較用のファイルを新しく作成する必要がありません。
AIが生成したコードとの比較にも便利
クリップボード比較は、次のようなケースでも役立ちます。
Webサイトに掲載されているコードを比較したい場合や、GitHubのコードと自分のコードを比較したい場合、AIが生成した修正版のコードを確認したい場合などです。
コードをコピーするだけで差分を確認できるため、修正前後のチェックを効率化できます。
任意の2つのファイルを比較する方法
VSCodeでは、エクスプローラーから任意の2ファイルを選択して比較することもできます。
たとえば、次の2つのファイルを比較するとします。
index-old.html
index-new.html
「Select for Compare」を使用する
まず、1つ目のファイルを右クリックします。
メニューから「Select for Compare」を選択してください。
次に、2つ目のファイルを右クリックし、「Compare with Selected」を選択します。
すると、2つのファイルがDiff Editorで開き、変更箇所を確認できます。
2ファイル比較には独自ショートカットを設定できる
エクスプローラーから行う2ファイル比較では、一般的に使用されるデフォルトのキーボードショートカットが設定されていない操作もあります。
頻繁に使う場合は、VSCodeのキーボードショートカット設定から独自のキーを割り当てると便利です。
参考サイト
VS Codeでファイル・ソースコードの差分を比較（diff）する2通りの方法
現在のファイルと別のファイルを比較する方法
現在開いているファイルを基準に、ワークスペース内の別ファイルと比較する方法もあります。
この場合は、コマンドパレットを使用します。
「Compare Active File With…」を使用する
Windows・Linuxでは次のショートカットでコマンドパレットを開きます。
Ctrl + Shift + P
macOSでは次の操作です。
Shift + ⌘ + P
コマンドパレットを開いたら、次のコマンドを検索します。
File: Compare Active File With...
コマンドを実行すると比較対象のファイルを選択できるので、現在開いているファイルとの違いを確認できます。
エクスプローラーから2つのファイルを選択する方法とは異なり、現在のファイルを基準として比較したいときに便利です。
未保存のテキスト同士を比較する方法
まだファイルとして保存していない文章やコード同士を比較することもできます。
この場合は、「File: Compare New Untitled Text Files」を使用します。
2つの無題エディターを比較できる
まずコマンドパレットを開きます。
Windows・Linuxでは次のショートカットです。
Ctrl + Shift + P
続いて、次のコマンドを検索して実行します。
File: Compare New Untitled Text Files
2つの無題エディターを使って差分を確認できます。
たとえば、修正前のコードを片方に貼り付け、修正後のコードをもう片方に貼り付ければ、ファイルとして保存しなくても比較できます。
Gitで変更前後を比較する方法
Gitで管理しているプロジェクトでは、VSCodeのソース管理機能から変更内容を確認できます。
Windows・Linuxでは、次のショートカットでソース管理ビューを開けます。
Ctrl + Shift + G
変更されたファイルを選択する
ソース管理ビューを開くと、Gitが変更を認識しているファイルが表示されます。
たとえば次のように表示されます。
M index.html
M style.css
M script.js
変更されたファイルを選択すると、Diff Editorで差分を確認できます。
Gitでは比較対象が状況によって異なる
Gitでは、HEAD、ステージされた内容、ワーキングツリーなど複数の状態があります。
そのため、単純に「常に前回のコミットと現在のファイルを比較する」と考えるのは正確ではありません。
VSCodeのソース管理画面では、Gitが認識している変更内容をDiff Editorで確認できる、と理解しておくとよいでしょう。
VSCodeのDiff Editorとは
VSCodeでファイルを比較すると、Diff Editorと呼ばれる差分表示画面が使用されます。
Diffは「difference」の略で、変更前と変更後の違いを視覚的に確認するための機能です。
追加・削除・変更箇所が分かりやすい
たとえば、変更前が次のコードだったとします。
const name = "A";
変更後が次のコードだった場合です。
const name = "B";
Diff Editorでは変更された部分が強調表示されるため、どこが変わったのかを素早く確認できます。
大規模なファイルや複数箇所を修正したコードを確認するときにも便利です。
左右表示やインライン表示で確認できる
VSCodeのDiff Editorでは、設定や表示状態に応じて、変更前後を左右に並べたり、1つのエディター内にまとめて表示したりできます。
画面が広い場合は左右表示、ノートPCなど画面幅が限られている環境ではインライン表示が見やすい場合があります。
比較用ショートカットを自分で設定する方法
VSCodeでは、標準でショートカットが設定されていないコマンドにも、自由にキーを割り当てられます。
ファイル比較を頻繁に利用する場合は、自分専用のショートカットを設定しておくと作業効率を高められます。
キーボードショートカット設定を開く
Windows・Linuxでは、次の操作を行います。
Ctrl + K → Ctrl + S
macOSでは次の操作です。
⌘ + K → ⌘ + S
キーボードショートカット設定が開いたら、検索欄に次のキーワードを入力します。
compare
比較に関連するコマンドが一覧表示されます。
好きなキーを割り当てる
使用したい比較コマンドを選び、任意のショートカットを割り当てます。
たとえば、次のような組み合わせを設定できます。
Ctrl + Alt + D
ただし、すでに別の機能に割り当てられているキーを設定すると競合する可能性があります。
ショートカットの競合が表示された場合は、既存の割り当てを確認してから設定しましょう。
「Ctrl + K → D」の押し方に注意する
VSCode初心者が迷いやすいのが、Ctrl + Kを含むショートカットです。
Ctrl + K → Dは、すべてのキーを同時に押す操作ではありません。
キーを順番に入力する
Ctrl + K → Dの場合は、次の順番で操作します。
まずCtrlを押しながらKを押します。
その後キーを離し、Dを押します。
同じように、
Ctrl + K → Ctrl + S
の場合は、まずCtrl + Kを押し、その後Ctrl + Sを押します。
このような複数段階のショートカットは、VSCodeでよく使用されています。
Windowsで覚えておきたい比較ショートカット
WindowsでVSCodeを利用している場合は、次の操作を覚えておくと便利です。
| やりたいこと | 操作 |
|---|---|
| 現在のファイルと保存済み内容を比較 | Ctrl + K → D |
| 現在のファイルとクリップボードを比較 | Ctrl + K → C |
| コマンドパレットを開く | Ctrl + Shift + P |
| ショートカット設定を開く | Ctrl + K → Ctrl + S |
| Gitのソース管理を開く | Ctrl + Shift + G |
| 任意の2ファイルを比較 | 「Select for Compare」→「Compare with Selected」 |
特に使用頻度が高いのは、Ctrl + K → DとCtrl + K → Cです。
保存前後の違いを確認したり、外部からコピーしたコードと比較したりする作業を効率化できます。
VSCodeで比較するときのまとめ
VSCodeには、追加の拡張機能を導入しなくても利用できるファイル比較機能が標準搭載されています。
現在のファイルと最後に保存した内容を比較する場合は、Windows・LinuxでCtrl + K → Dを使用します。
現在のファイルとクリップボードを比較する場合は、Ctrl + K → Cです。
任意の2つのファイルを比較する場合は、エクスプローラーで1つ目のファイルから「Select for Compare」を選択し、2つ目のファイルから「Compare with Selected」を実行します。
また、Gitで管理しているファイルについては、Ctrl + Shift + Gからソース管理ビューを開くことで変更内容を確認できます。
ファイル比較を頻繁に行う場合は、Ctrl + K → Ctrl + Sからキーボードショートカット設定を開き、比較用コマンドに独自のショートカットを設定しておくのもおすすめです。
以上、VSCodeで比較するショートカットについてでした。
最後までお読みいただき、ありがとうございました。
