Git のインターフェイスとしての VS Code

VS Code にはバージョン管理機能も有しており、特に Git は拡張機能のインストールなしですぐに利用可能だ。コマンドライン操作のほうが慣れている人が多いだろうが、UIで敢えて操作することで、バージョン管理操作に関する何らかの発見が期待できる。

以下、断りのない限りワークスペースは Git で管理されているディレクトリーからなるとする。

Attention

Visual Studio Code 利用ノート 冒頭の前提条件に留意すること。

SOURCE CONTROL ビュー

VS Code で次のいずれかの操作により、Side バーに SOURCE CONTROL ビューが表示される：

  • コマンド View: Show Source Control をコマンドパレットから直接実行する

  • ショートカットキー Ctrl + Shift + G を押す

  • Activity バーの上から三番目の履歴グラフを模したアイコンをクリックする

このビューではワークスペースのファイルを管理するリポジトリーそれぞれに対する変更点の要約が示される。

リポジトリー

リポジトリーごとに次のセクションに分かれている：

  • Merge Changes には git merge 直後に衝突したファイルが示される。

  • Staged Changes には git add されたファイルが示される。

  • Changes には変更されているファイルであって、ステージに乗っていないものが示される。

ステージ操作・編集・変更確認

ファイル項目を右クリックしてコンテキストメニューを表示すると次の操作が行える：

メニュー項目

操作

Open Changes

対象ファイルのインデックスに対する差分を read-only エディターで開く。

Open File

対象ファイルをエディターで開く。

Open File (HEAD)

対象ファイルの HEAD 版を read-only エディターで開く。

Discard Changes

対象ファイルを git restore する。

Unstage Changes

対象ファイルを git restore --staged する。

Stage Changes

対象ファイルを git add する。

Add to .gitignore

対象ファイルを .gitignore に追加する。

Reveal in Explorer View

EXPLORER ビューに切り替え、対象ファイルを示す。

ファイル項目にマウスホバーでアイコンが描かれるので、クリックして対応するコマンドを実行してもよい。

ファイル項目右端に git status コード（インデックスに対する変更区分）が示される。

ファイル項目を普通にクリックすると上述の Open Changes が実行される。

ファイル項目のドラッグ＆ドロップでステージ操作をすることもできる。

詳細なステージ操作はリポジトリーセクション右上の三点アイコンをクリックする。 … ‣ Changes のサブメニューに次のコマンドが存在する：

メニュー項目

相当する Git 操作

Stage All Changes

git add -A .

Unstage All Changes

git restore --staged .

Discard All Changes

git restore .`

利用者ノート

「相当する」操作と私が記す場合、VS Code が実行する実際のものと一致するとは限らない。実際の Git コマンドを確認するには後述の方法による。

コミット

コミットログは SOURCE CONTROL ビュー各リポジトリーセクション最上部のテキストボックスに入力する。

  • 改行文字は Shift + Enter で入力する。

  • Ctrl + Enter で git commit 相当を実行する。

詳細なコミットをする場合、リポジトリーセクション右上の三点アイコンをクリックする。 … ‣ Commit のサブメニューに次のようなコマンドがある：

メニュー項目

相当する Git 操作

Commit

ステージにファイルがある場合に git commit

Commit Staged

ステージにファイルがある場合に git commit

Commit All

git add -A . && git commit

Undo Last Commit

git reset --soft HEAD~

Abort Rebase

git rebase --abort?

Commit Staged (Amend)

git commit --amend

Commit All (Amend)

git add -A . && git commit --amend

Commit Staged (Signed Off)

git commit --signoff

Commit All (Signed Off)

git add -A . && git commit --signoff

特に有用なのは Undo Last Commit と Commit Staged (Amend) だろう。逆にありがたくないのは Commit All 系だ。これを実行するワークフローが良いものだとは思えない。

リポジトリー操作

リポジトリーを複製する

VS Code でまだ何も開いていない場合などに、SOURCE CONTROL ビューには次の選択肢がボタンで示される：

  • Open Folder

  • Clone Repository

後者を選択すると、コマンド Git: Clone が実行される。すると、リポジトリーのパスを入力することになる。ファイルシステムのパスか、Git リポジトリーの URLを指定することが可能だ。

パス入力欄の下に Clone from GitHub という項目も表示される。 VS Code から GitHub のアカウント認証を行うと（ブラウザーが開くかもしれない）、リポジトリー検索リストが表示される。ここからリポジトリーを選択することで git clone 相当のことが実現できる。また、複製されたリポジトリー設定にリモートに対する設定などが自動的になされる。

リポジトリーを初期化する

リポジトリーでないワークスペースについては SOURCE CONTROL ビューの構成は普段と異なる。

ワークスペースがローカルマシンにある場合、コマンド Git: Initialize Repository で Git リポジトリーを作成することできる。これは git init と同じだろう。実行後、VS Code がワークスペースをローカルリポジトリーであると認識する。

場合によってはコマンド Publish to GitHub という選択肢もあり得る。ワークスペースのフォルダーを GitHub リポジトリーに直接配備し、private か public かを選択する。

ブランチとタグ

VS Code から離れずにブランチを操作することが可能だ。コマンドパレットで branch を検索すると関連コマンドを確認できる。

コマンド Git: Checkout to… を実行すると、現在のリポジトリーのすべてのブランチおよびタグからなるドロップダウンリストが表示される。項目を選択すると、現在のブランチがそれに切り替わる。

コマンド Git:Create Branch を実行すると、新しいブランチを作成する。ブランチの名前を指定すると VS Code がそれを作成し、そこに切り替える。 Create new branch from… を選択すると、新しいブランチの起点コミットを指定するための入力欄が表示される。

リモート

リポジトリーがリモートに接続されていて、チェックアウトしたブランチがリモートブランチに上流からリンクしているとすると、VS Code はそのようなブランチを push, pull するコマンドが用意している。これらのコマンドは、リポジトリーセクションのバー右上の … ‣ Pull, Push 以下にある。

リモートリポジトリー自体を構成するコマンドは … ‣ Remote 以下から実行可能だ：

コマンド

操作

Add Remote…

git remote add 相当

Remove Remote

git remote rm 相当

VS Code はリモートから変更点を定期的に取得することができます。この機能はローカルの変更点がリモートに比べてどれだけ先方または後方にあるのかを表示するのに利用するものだ。既定では無効になっており、有効化するには設定ファイルで git.autofetch の値を指定する。

Todo

認証ヘルパー

ステータスバー

VS Code の左下には、リポジトリーの状態を示すインジケーターがある。私の環境だと WSL: Ubuntu のすぐ右隣にある。ここには次の情報が常時示される：

  • 現在のブランチ (e.g. main)

  • ローカルリポジトリーが dirty か clean かを示す記号 *

  • 現在のブランチの受信・送信コミット数

このインジケーターをクリックすると前述のコマンド Git: Checkout to … を実行することになる。

現在のブランチに上流ブランチが設定されている場合には、インジケーターのさらに右側に丸矢印アイコンがある。クリックするとコマンド Git: Sync を実行する。これはリモートの変更をローカルリポジトリに取り込み、ローカルのコミットを git push -u origin する。上流ブランチが設定されていない場合にはコマンド Git: Publish Branch… が代わりに実行される。

エディター

リポジトリーのファイルをエディターで開いて編集すると、行番号右の細い隙間と縦スクロールバー領域に便利な注釈を動的に追加する。

記号

意味

赤い三角形

直前の版でここにあったテキストが削除されていることを示す

緑の線

直前の版から追加された行であることを示す

青い線

直前の版から内容が変更された行であることを示す

差分表示

git diff の代わりに VS Code 上で編集ファイルの差分を表示することができる。それには、対象ファイルに対してコマンド Git: Open Changes を実行する。

Git とは無関係に、VS Code の差分関連機能を使って左右比較表示とインライン表示とを切り替えることができる。

変更行間の移動キーバインドが設定されているが、どちらの表示形式であるかにより異なる。紛らわしくなるのでここには記さないことにするが、F5 または F7 に修飾キーを絡めるものだ。

衝突表示

マージ衝突時に Git がマーカーを挿入したファイルを VS Code が認識して、両者の差分をハイライト表示する。さらに、衝突箇所にはどちらか一方または両方の変更を受け入れるためのインラインアクション実行 UI がある。衝突が解決されると、対象ファイルをステージ処理し、それらの変更をコミットできるようにする。

インラインアクションは次の四つだ：

アクション

操作

Accept Current

現在ブランチの内容を採用する

Accept Incoming

マージブランチの内容を採用する

Accept Both

双方の内容を連結したものを採用する（適用順序は？）

Compare Changes

差分エディターを開く

より丁寧に編集するならば、インラインアクションを実行せずに、エディター右下に現れているボタン Resolve in Merge Editor を押す。これで 3-way マージエディターが開く。インラインマージエディターとの違いは、マージ後のエディターでテキスト塊を取り除くアクション UI が表示されることだ。これでテキスト塊の適用順を選択できる。

アクション

操作

Remove Current

現在ブランチ部分の採用を取り消す

Remove Incoming

マージブランチ部分の採用を取り消す

Reset to base

マージ編集を全部捨てる

エディター右下のボタン Complete Merge ボタンを押すと、当該ファイルが Merge Changes から Staged Changes に移る。これを衝突ファイルがなくなるまで反復し、最後にコミットする。コミットログはすでにログ入力欄に記入されている。

利用者ノート

この UI がたいへん便利で、単発の衝突時の作業に重宝する。 VS Code エディターでの衝突解決方法を必ず習得すること。

TIMELINE ビュー

EXPLORER ビューの下部にある TIMELINE ビューは、現在のファイルの時系列 Git コマンドを含むイベントを時系列で配列されている。

ここからコミット項目を選択すると、当時の変更点の差分が表示される。また、コミット項目上コンテキストメニューからは次のコマンドなどを実行することが可能だ：

  • Copy Commit ID

  • Copy Commit Messsage

拡張機能

Todo

GitHub 関係の拡張しか言及しないので、別の章での記述する？

出力確認

VS Code の Git 操作コマンドが実際に実行するコマンドラインを確認する方法がある。コマンド Git: Show Git Output を直接実行する。

  1. Ctrl + Shift + U を押すなどして、画面下部パネルの OUTPUT を開く。

  2. タブバー右側ドロップダウンリストから Git を選択する。

ログが表示される。タイムスタンプ、コマンドライン、実行時間を確認できる。

利用者ノート

Git を端末で利用するのを好むならば、このログは一度は見る方がいい。

Git 側の設定で VS Code を絡める

各種ログエディター、差分、マージに VS Code を使用するように、Git のユーザー構成ファイル $HOME/.gitconfig または $HOME/.config/gitconfig に次の記述を含めるといい。特に、この記述があれば git difftool と:command:git mergetool それぞれのコマンド実行で VS Code が利用できることに注目したい。差分確認や手動マージでは GUI ベースの作業の方が楽だ。

[core]
    editor = code --wait
[diff]
    tool = vscode-diff
[difftool "vscode-diff"]
    cmd = code --wait --diff $LOCAL $REMOTE
[merge]
    tool = code
[mergetool "code"]
    cmd = code --wait --merge $REMOTE $LOCAL $BASE $MERGED