kamenokoki.com

【図解】2つのファイルを比較する方法-Visual Studio Code編

Posted:  Last Update:

2つの文書の内容を比較して、変更点などの違いを確認したい?Visual Studio Codeを利用すればワード文書以外(txt、php、conf、htaccess、htmlなど)も簡単に比較ができます。比較方法を画像付きで紹介!英語設定のままでも、とっても簡単です!

Visual Studio Codeとは

Windowsを使っている方はMicrosoft Wordを使っていると思います。「比較」という機能をご存じでしょうか?2つ以上の文書の内容を比較して、差分を表示してくれる便利機能です。

便利なのですが、一つ問題があります…。Microsoft Wordでは、原則としてワード文書しか扱えないんです!例えばtxtファイルは開き方にコツが必要ですし、phpファイルなどは開くことすらできません。ワード文書以外(txt、php、conf、htaccess、htmlなど)を比較したい、と思った時にとても不便なんですよね。

そんなときに役に立つのがVisual Studio Codeです。

Visual Studio CodeはMicrosoftが開発しているソースコードエディタで、ほとんどの文書を開くことができます。今回のように2つの文書を比較したい時にも基本機能を使うだけで簡単に比較ができちゃいます。

まだVisual Studio Codeをインストールしていない方は、公式サイトから簡単にインストールすることができます。

※画面を日本語にするにはさらに設定が必要ですが、ここでは英語のままでも文書の比較ができるように解説しています。

Visual Studio Codeで文書を比較する-概要

ここでは、Visual Studio Codeでのファイル間の比較方法を紹介します。まずは簡単な手順。この手順を見てもよくわからない方は、下に画像で具体的な方法を解説していきますので、一緒に比較を行いましょう!

  1. Visual Studio Codeで比較したい文書を全て開く
  2. 「Open Editors」で比較したいファイルを全て選択する
  3. 選択した状態で右クリックし、「Compare Selected」を押下
  4. 選択したファイルの差分が表示される

Visual Studio Codeで文書を比較する-図解で詳細

では、図解入りで詳しくやり方を見ていきましょう!この記事では英語設定のまま利用していますが、日本語画面の場合にも画面構成は同じなので、手順を真似してみてください。

Visual Studio Codeで比較したい文書を全て開く

最初に、比較したい2つのファイルを順番に開きます。。Visual Studio Code(以下VSC)の、File > Open File から比較する文書を2つ開きましょう。

Visual Studio Codeで比較したい文書を全て開く

※ここからの画面では「httpd.conf」「httpd - コピー.conf」という2つのファイルを開いています。

「Open Editors」で比較したいファイルを全て選択する

次に、比較する文書を選択します。

VSCの左側にある「Explorer」をクリックし、「OPEN EDITORS」でShiftを押しながら比較する文書をクリックします。

「Open Editors」で比較したいファイルを全て選択する

選択した状態で右クリックし、「Compare Selected」を押下

では、比較していきましょう。文書を選択した状態で、右クリックし、「Compare Selected」を選択します。

選択した状態で右クリックし、「Compare Selected」を押下

選択したファイルの差分が表示される

以上の手順で、2つのファイルの差分が表示されました。スクリーンショットで見ると、変更点が赤字背景と赤字でハイライトされているのが分かります。

選択したファイルの差分が表示される

まとめ

Visual Studio Codeを利用すると、ワード文書以外(txt、php、conf、htaccess、htmlなど)の文書を簡単に比較することができます。

やり方は次の手順の通り。よく分からない場合は画像つきの手順をご確認ください。

  1. Visual Studio Codeで比較したい文書を全て開く
  2. 「Open Editors」で比較したいファイルを全て選択する
  3. 選択した状態で右クリックし、「Compare Selected」を押下
  4. 選択したファイルの差分が表示される

とっても簡単に文書の変更点や差分を確認できる方法、ぜひ試してみてくださいね!

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

RELATED

サイト作成豆知識+息抜き ・全記事表示 

広告