【Git】Visual Studio Code で競合を解決しよう

Git でブランチをマージしたとき、競合が発生することがあります。
この記事では競合をどのように解決するかを順を追って解説します。

この記事では Visual Studio Code を使います。
TortoiseGit を使って競合の解決を行いたい場合は、
次の記事を参照してください:
【Git】競合を解決しよう

また、最近 Visual Studio Code に 3 way merge editor という機能が導入されています。
この記事で紹介する方法よりも格段に楽に競合の解決ができるようになっています。

3 way merge editor での競合の解決方法は次の記事で解説しています:

【Git】Visual Studio Code で競合を解決しよう (3 way merge editor)

この記事では従来の機能を使って、
実質的に 3 way merge editor と同様のマージを実現する方法を紹介しています。

Linux 知識の要らない Git 講座目次にもどる

競合の解決のための画面を開こう
競合の解決作業のすすめかた
競合を解決してみよう
結果を確認してみよう
2画面で作業したい場合
差分の見やすさを改善する方法

競合の解決のための画面を開こう

手順

1.
Git のマージを行い、競合が発生している状態で、Visual Studio Code を開きます。

2.
画面左 [Activity Bar] の [Source Control] のアイコンをクリックすると、
[Side Bar] の [MERGE CHANGES] という欄にファイルが表示されるので、
クリックすると、次のように表示されます:

3.
この状態だと比較しづらいので、差分を一望するためにのタブを新たに開きます。
現在開いているタブが閉じてしまわないよう、
タブの文字がイタリックで表示されている場合はダブルクリックして、
新たにタブを開いたときに閉じてしまわないようにしておきます:

4.
競合している行のすぐ上に表示されている
[Compare Changes] をクリックします:

すると、
次のように、差分を一望できるタブが表示されます:

5.
[Compare Changes] をクリックして開いたタブは確認用の表示で、編集できません。
競合の解決作業を行うときには、先ほどの編集用のタブと同時に表示したいことでしょう。
そこで、最初に開いたタブを画面の下端までドラッグします:

すると、差分と編集用のタブを一度に表示することができます:

競合の解決作業のすすめかた

改めて、画面の役割を説明します。
まず、画面の上半分は確認用の表示で、編集できません。
そして、画面の下半分は編集用の画面になっています。

画面上半分にそれぞれのブランチの編集内容が表示されるので、
画面下半分の編集用画面を「競合を解決した状態」に編集していきます。
画面下半分は、ほぼ通常時と同様に操作できます。

編集が競合している行は、画面の上半分では文字列がハイライトして表示され、
その中でもう一方と異なる部分は特に明るく表示されています。
マージする上で参考になるかもしれません。

画面右端のスクロールバーに
ファイル全体の中の競合が発生している箇所が表示されます。

画面下半分の編集用画面で競合部分を編集していくと
この表示は消えていきますので、
ファイル内の全ての競合発生箇所を示す表示をなくすことを目標に
編集していきます。

競合を解決してみよう

競合を解決する上で最も基本的な考え方は、
「どちらか一方が正しいわけではない」
ということです。

双方にそれぞれの編集意図があるので、
双方の編集意図を汲んだマージを行う必要があります。
相手の編集意図がコミットメッセージや編集内容から読み取れなければ
相手に連絡をとって編集意図を確認してマージしましょう。

この例では、競合した行が更新された編集履歴である
「営業時間の変更」と「キャッチコピーの追加」の
両方の意図を汲んだマージを行う必要があります。

手順

1. 編集用画面の競合部分を編集します

“=======” で隔てられた上 (Current Change) もしくは下 (Incoming Change)
どちらか一方を選び、編集します。

どちらを選んでも構いませんが、
今回の例では Current Change を編集します。

双方の編集意図を汲んで、次の内容に更新します:

        未知との出会いを応援する 勉強会カフェ 「First Knowledge」 オープン！ 営業時間：平日 07:00〜13:00, 18:00〜23:00 / 土日祝 07:30〜21:00

2. 編集を行った方の変更のみを残します

Current Change を編集した場合は [Accept Current Change] を、
Incoming Change を編集した場合は [Accept Incoming Change] を
クリックします。

今回は Current Change を編集したので、
[Accept Current Change] をクリックします:

今回は Current Change を編集したので、 [Accept Current Change] をクリックします

すると、Current Change のみが残ります:

3. ファイルを保存します

4. 編集したファイルをステージしてコミットします

画面右側 [Side Bar] の [MERGE CHANGES] で
ファイル名の右側に表示される [+] をクリックしてステージし、
[Side Bar] 最上部の [✅] をクリックしてコミットします:

これでマージが完了しました。

結果を確認してみよう

HTML ファイルをブラウザで表示すると次のようになっています。

ログは次のようになっています:

これでプッシュできるようになりました。
成功するはずです。

以上でプロジェクトの編集履歴の競合の解消が完了しました。

2画面で作業したい場合

もし、2画面以上で作業していれば、差分を別のウィンドウで表示し、
編集作業を全画面で行いたいたいでしょう。

その場合は、競合の解決を行うファイルを開いた状態で、
次のショートカットを入力します:

Ctrl + K → Ctrl も K も離して O だけを入力

すると、現在開いているファイルを別ウィンドウで開くことができるので、
新しく開いたウィンドウで [Compare Changes] をクリックします。

これで、差分を別のウィンドウで確認しながら
編集作業を全画面で行うことができます。