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

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

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

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

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

手順

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

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

Visutal Studio Code マージで競合が発生しているときの画面
Visutal Studio Code マージで競合が発生しているときの画面

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

タブの文字がイタリックで表示されている場合はダブルクリック
タブの文字がイタリックで表示されている場合はダブルクリック

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

[Compare Changes] をクリックします
[Compare Changes] をクリックします

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

差分を一望できるタブ
差分を一望できるタブ

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

最初に開いたタブを画面の下端までドラッグします
最初に開いたタブを画面の下端までドラッグします

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

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

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

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

Visual Studio Code 競合の解決時 画面の役割
Visual Studio Code 競合の解決時 画面の役割

画面上半分にそれぞれのブランチの編集内容が表示されるので、
画面下半分の編集用画面で「どのようにマージするか」を編集していきます。
画面下半分は、ほぼ通常時と同様に操作できます。

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

編集が競合している行
編集が競合している行

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

画面右端のスクロールバー
画面右端のスクロールバー

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

競合を解決してみよう

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

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

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

競合した行が更新された編集履歴
競合した行が更新された編集履歴

手順

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

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

Current Change と Incoming Change
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 を編集したので、 [Accept Current Change] をクリックします

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

Current Change のみが残ります
Current Change のみが残ります
3. ファイルを保存します
4. 編集したファイルをステージしてコミットします

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

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

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

結果を確認してみよう

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

ブラウザでの表示 競合の解決後
ブラウザでの表示 競合の解決後

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

競合の解決後のログ
競合の解決後のログ

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

競合の解決後にプッシュした結果
競合の解決後にプッシュした結果

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

2画面で作業したい場合

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

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

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

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

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

差分の見やすさを改善する方法

次のショートカットで Visual Studio Code のテーマを一時的に変更すると、
差分の表示色も変わります:

Ctrl + K -> Ctrl + T

Light+ (default light) あたりにすると、多少見やすさが改善されるかもしれません。

Light+ (default light) テーマ
Light+ (default light) テーマ

参考: Visual Studio Code Themes

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

タイトルとURLをコピーしました