Visual Studio Codeでファイル差分の比較を行う方法

Visual Studio Codeでファイルの差分を比較したいときがあります。
ファイルの比較であればデフォルトの機能で使えます。
差分を確認するには、XCodeについてくる「FileMerge」を使う方法や、Kaleidoscopeという差分に特化したアプリケーションもあります。
ただ、そこまで多くの機能を求めていなくて単純な2つのファイルの差分を見たいだけの場合は、使い慣れているVisual Studio Codeで十分確認できます。
比較方法
Visual Studio Codeでまずは選択したいファイルを2つタブで開いて、shift + command + Pでコマンドパレットを表示します。
「file compare」と入力すると「ファイル: アクティブ ファイルを比較しています…(File: Compare Active File With…)」と表示されるので選択します。

Visual Studio Codeで開いている別のファイルが一覧で表示されるので、比較したいもう1つのファイルを選択します。
すると、選択した2ファイルを比較した差分結果が別タブで表示されます。
比較方法は全部で下記の3つがあります。
ただ、1番使い勝手がいいのが「アクティブ ファイルを比較しています…」なので基本的にこれを使うことになります。
| コマンド | 内容 |
|---|---|
| アクティブ ファイルを比較しています… | 現在開いているファイルと、他ファイルを選択して比較する |
| クリップボードとアクティブ ファイルを比較 | クリップボード内のコードと、現在開いているファイルを比較する |
| 保存済みファイルと作業中のファイルを比較 | 現在開いているファイルの、最後に保存された状態と現状を比較する |



Nuxt.jsでのページ遷移設定方法(Vue Routerやnuxt-link)|Nuxt.jsの基本
HTTP通信をラクに実装できる「axios」の基本
さくらのレンタルサーバで.htaccessが原因で500エラーになってしまう場合のチェックリスト
JavaScriptで日付をコピーして計算すると、コピー元の日付も変わってしまう場合の対処法
CSS疑似要素(::beforeや::after)のcontent内で改行したり半角スペースを複数入力する方法
SafariでFacebookのPage Pluginに「リクエストを処理できませんでした」とダイアログが表示される問題
Visual Studio Codeのファイル横に表示されるファイルアイコンのテーマまとめ
WordPressでショートコードを作成する方法
Visual Studio Codeで簡易的なローカルサーバーを起動して、コード保存時に自動でブラウザをリロードする拡張機能「Live Server」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Google Chromeの別アカウントとのブックマークを同期する「TeamSync Bookmarks」
ExcelやSpreadsheetの文字入力時に、矢印キーを押すとセルが移動してしまう問題
CSS Nite in Kobe, vol.54「XDで作ったワイヤーフレームを元に制作するウェブビジュアルデザインと精度の高いプロトタイプをコーダーに渡すときのポイントのセミハンズオン」に参加してきました
Spreadsheetでチェックボックスを使う|作り方の基本から、チェックした数の取得や進捗率の表示まで
AlfredのWorkflowをカテゴリーごとに整理する
属性・Class・IdなどHTMLタグの細かい部分を見ていこう!!
JavaScriptのforEach内で「continue」や「break」のような動作をさせる方法
MacとiPadを同じマウスやキーボードで操作できる「ユニバーサルコントロール」
Vue.jsで値段を表示するときに3桁ごとにカンマを入れる方法
Post Snippetsを使ってWordPressでショートコードをの登録と管理をもっと楽に!!