VS Code + GitHub Copilot 環境でも git commit しちゃうんだな、これが

VS Code でコミットするときに GitHub Copilot を使っていると コミットメッセージを生成してくれたりします。

図 1 コミットメッセージを Copilot で生成

英語苦手な自分からすると「マジうれしいんですけど」という感じなのですが、コミットメッセージはできればエディターで記述したいと考えてしまいます。

そこで今回は「コミットメッセージをエディターで編集する利便性」を維持しつつ、「GitHub Copilot による生成機能もできるだけ利用しよう」という内容のメモになります。

VS Code のエディターでコミットメッセージを記述するとは

VS Code でコミットメッセージを記述する方法としてはソース管理タブの利用が一般的かと思われます。

図 1-1 ソース管理タブのフィールドから普通に入力

一方で上記とは別に、コミット用のコマンドを実行しエディターの中で記述する方法もあります。

• ターミナルから git commit を実行する
• コマンドパレットで Git: Commit を実行する

こちらはコマンドを別途実行する必要がありますが、コミットメッセージ(.git/COMMIT_EDITMSG)をエディタータブで編集するので、エディターならではの編集支援を受けられます。

図 1-2 エディターで入力(シンタックスハイライトや文字数のガイドルーラーが表示される)

また、コミットメッセージにも言語 ID が割り当てられているので、キー配列や拡張機能によるカスタマイズも適用しやすくなっています。

私は「Markdown として表示するとどう見える？」が気にときがあるので、以下のようなショートカットを登録しています。

リスト 1-1 ctrl + shift + v で Markdown プレビューを開くキーボードショートカット

{
  "key": "ctrl+shift+v",
  "command": "markdown.showPreview",
  "when": "!notebookEditorFocused && editorLangId == 'git-commit'"
}

デフォルトで利用できる Copilot の機能

普通にエディターなので Copilot が有効であればデフォルト状態でもコミットメッセージのサジェストなどをやってくれます。おそらくは編集中の COMMIT_EDITMSG の内容がコンテキストになっていると思われますが、ブランチ名や変更のあったファイル名一覧が含まれるているので、わりと良い感じにサジェストしてくれます。

図 2-1 Copilot によるサジェスト

また、Copilot のインラインチャットも利用できます。

図 2-2 インラインチャットの利用

この辺の編集支援だけでもやりやすくなるので「もうデフォルトのままでもいいんじゃないかな」という気にもなってきます。

コミットメッセージ生成機能に近づける

「もうデフォルトのままでもいいんじゃないかな」と言いましたが、やはり隣の芝生は青く見えてきます。

対応として git commit でエディターを開くときに最初から生成されたテキストが挿入される方法を探したのですが、見つかりませんでした。

その代わりでもないのですが、サジェストなどの精度を上げる方法として、git commit に -v を指定することでコミットメッセージの編集時に diff の内容を挿入してみます。

https://qiita.com/magicant/items/f66528f83fccd1b1fdbb
https://git-scm.com/docs/git-commit#Documentation/git-commit.txt--v

図 3-1 git commit -v による diff の挿入

前述のように COMMIT_EDITMSG の内容をコンテキストにしているようなので、diff の挿入によりサジェストやインラインチャットの応答が具体的になったと感じています。 (「なった」と言い切りたいところですが、やはりバラ付きはあります)

また、この状態になればインラインチャットで “make commit message” のように指示すると、生成機能ぽい感じになります。 (以下の例は上手くいっている方なので、あまり過度な期待はしないでください)

図 3-2 生成機能とインラインチャットの比較(diff なし)

• 生成機能: Add readline functionality to index.mjs
• インラインチャット: Add new feature

図 3-3 生成機能とインラインチャットの比較(diff あり)

• 生成機能: Add readline functionality to index.mjs
• インラインチャット: Add readline functionality to index.mjs

このような感じになるので、コミットメッセージ生成への影響を確認できたら、Git の設定で -v をデフォルトにもできます。

リスト 3-1 ~/.gitconfig または ~/.config/git/config へ以下を追加

[commit]
  verbose = true

あとは、まだ試行錯誤中ですが、コミットテンプレートなどから指示を埋め込んでおくとより精度が良くなるかなと考えています。

そして、ここまで書いておいてアレなのですが、それでも生成機能に頼りたくなることもあります。その場合は普通に生成してから「コピペしちゃうんだな、これを」という対応にしています。

ターミナル内で git commit した後

GitHub を利用している場合、git commit した後はプルリクエストを作成することになるかと思います。話はそれてしまいますが、プルリクエストの説明などもエディターで記述する利点を少しだけ。

プルリクエスト作成は GitHub Pull Requests and Issues を使う方法もありますが、ターミナル内で操作を継続するなら GitHub CLI(gh コマンド)もおすすめです。

たとえば、コマンドラインから gh pr create を実行すると、ボディ(プルリクエストの説明)を Markdown として記述するので、こちらもエディターから Copilot を利用できます。

図 4-1 gh pr create で編集時にインラインチャットを利用

図 4-2 作成されたプルリクエスト

ただし、こちらもエディターでの記述がベストと一概には言えないのが悩み所です。

• GitHub Pull Requests and Issues にも Copilot による生成機能がある
• コメント記述時に @ などの入力補完を利用できない

私は gh pr checks --watch なども使いたいので Git 関連の操作はターミナルに寄せていますが、それでも場合によってツールを使い分けているといった感じです^[2]。

おわりに

コミットメッセージを VS Code のエディターで記述するとき、GitHub Copilot の生成機能をできるだけ利用してみました。

Copilot はなんとなくデフォルトのままで使っていましたが、コンテキストとなる情報を少し追加するだけでも生成物の精度が向上することを体験できました。

今後も生成 AI におまかせするだけでなく、工夫しながら利用できればと思っています。