【VS Code】GitHubのAdd, Commit, Push, Pull Request作成。3-way merge editorによるマージコンフリクト解消

はじめに
チケット（Issues）作成→作業ブランチ作成
1. VSCodeでGithubのIssueを作成
2. ブランチ作成してCheckout
Git Add→Commit→Push
Pull Request作成
レビュー内容を確認
マージコンフリクトの対処法：3-way merge editor
1. 特定のブランチのファイルとの差分をCompare

はじめに

今まで、VSCodeのターミナル上で、git checkout branchブランチ名でブランチを切って作業をして、作業が終わってからもターミナル上で当たり前のように、

git add. → git commit → git push→リモートリポジトリをブラウザで開いて、「Create Pull Request」ボタンを押すということを行なっていた。

先日、開発中のコードがうまく動かなくて、同僚のエンジニアにリモートで画面共有しながらアドバイス受けていたところ

「VS Code上の左サイドバーの画面でgit add→commit→pushまで出来るので、その方が楽ですよ」

と言われ、確かにこちらの方がはるかに時短だ！と感じたので備忘録記載。単純に知らなくて損してたorz

VSCode公式での解説はこちら

https://code.visualstudio.com/docs/sourcecontrol/intro-to-git

チケット（Issues）作成→作業ブランチ作成

VSCodeでGithubのIssueを作成

GitHub Pull Requests and Issues 拡張機能を利用する。

拡張機能をVSCodeにインストールして、issuesセクションの「+」アイコンをクリックするとNewIssue.mdというファイルが開く

一番上の行がIssueのタイトル。Assigneesは自分のGitHubアカウントを選択

Milestoneのところに、1行空けて、IssueのBodyに相当する部分を記載する。

記載を終えたら、ファイル右上にある「✔️」アイコン（=Create issue）をクリックする。ファイルは保存してもしなくても良い。

チェックアイコンを押した後に、Issuesセクションのリロードアイコンを押すと下記のように作成したIssueが表示される。

地球儀アイコン（Open issue on GitHub）を押すと、下記のようにプロジェクト内にIssueが作成されていることが分かる。

ブランチ作成してCheckout

issuesの右サイドバーのDevelopmentの欄にCreate a branchの表記があるのでクリック。

ブランチ名を決める画面がポップアップで表示される。

現状はdevelopブランチからfeatureブランチを切って、featureブランチ内で作成している。

適切なブランチ名を作成して、Create branchをクリック

すると、下記の画面に変わるので、コードをコピーして、ローカルブランチに貼り付ける

ローカルブランチでコピペすると、作業ブランチが作成されるので、コード作成開始

Git Add→Commit→Push

開発が終わったら、Git add→commit→Pushの流れになるが、VS Codeでは全部GUIでできる。

VSCodeの左サイドバーの上から3つ目のアイコン（Source Control）をクリックすると、Localで変更されたファイルが一覧で表示される。

Git Add

Changesの横にある「+」アイコンをクリックすると、ローカルファイルをすべてStagingに上げてくれる（git add . と同じ）

Staged Changesにステータスが変わった。

Git Commit

Commitに関しては、Staged Changesの上にCommitボタンがあり、その上にMessageを記入するテキストフィールドがあるので、こちらにcommit messageを記載して、commitボタンを押す。

Commitすると、Source ControlパネルでOutgoingにファイルが移動し、commitしたファイルをクリックすると差分をハイライトで見られる。

Explorerパネル（左サイドバーの一番上のファイルアイコン）をクリックして、Timelineセクションでも、同じように見ることができる。

Git Push

Source Controlパネルで「Sync Changes」をクリック

ポップアップで、アラートが出るので、OKをクリック

これでPushが完了した。

Pull Request作成

拡張機能「GitHub Pull Requests and Issues」をインストール

https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

インストールすると、左サイドバーの一番下に「GitHub」アイコンが追加されるので、これをクリックすると以下のようにサイドバーに［GitHub］ビューが表示される。

Pull Requestsセクションの右側に「Create Pull Request」ボタンがあるのでクリック

すると、Pull requestの画面に切り替わる。

Createセクションの右に4つアイコンがある。

一番左（Assignee）：今回のタスクをアサインされている人（=自分）を選択
左から2つ目（Reviewers）：レビューしてもらいたい人を選択

Baseは今回はdevelopで、mergeしてもらいたいファイルが作業したブランチのファイルなので選択。

できたら、Createをクリック。

remoteリポジトリで確認したら、無事pull requestを作成できていることがわかった。

レビュー内容を確認

PR作成後に、他の開発メンバーがレビューした内容もVS Code上で確認できる。

pull requstsタブを展開し、ブランチのdescriptionをクリックすると、pull requestタブが開き、レビュー内容を確認できる。該当ファイルをクリックすると遷移する。

他のメンバーが自分にpull requestした内容も同様に確認できる

pull requestsタブ→自分にレビューがassignされていれば、「Assigned To Me」タブ、そうでなければ「All Open」の欄。

マージコンフリクトの対処法：3-way merge editor

Mergeコンフリクトが生じた場合、VSCodeでは3-way merge editorという、3つの異なるソース（通常は「現在の変更」、「受信した変更」、および「マージ結果」）を表示するエディタを提供している。

https://code.visualstudio.com/docs/sourcecontrol/overview#_3way-merge-editor

3-way merge editor は、コンフリクトが存在するファイルの右下にある「Resolve in Merge Editor」ボタンを選択することで開ける。

エディタは、下記の3つの異なるビューを表示する。
・左側：「Incoming changes」（受信した変更）
・右側：「Current changes」（現在の変更）
・下部：「Result of the merge」（マージ結果）。デフォルトはIncomingとCurrentのどちらの変更も反映しない（No Changes Accepted）

IncomingとCurrentのConflictコードの上部には、下記3つの取り込みパターンが記載されており、クリックすることで下部のmerge resultに反映される。

・Accept：受け入れ
・Accept Combination：現在の変更と受信した変更の両方を「賢く」組み合わせてコンフリクトを解決する。特に、同じ行に変更があっても、それらの変更が異なる文字を対象としている場合に有効
・Ignore：無視

上記3つのどれかをクリックして、反映されたmerge resultをさらに手動で修正することもできる（IncomingとCurrentの画面は編集できない！）。そして、merge resultを無事修正できたら、右下にある「Complete Merge」」を選択してマージを完了し、ファイルをステージングしてマージエディタを閉じる。