【小ネタ】 GitHub Copilot Chat でインライン差分 ( Inline Diff ) が表示されないときの対処法
はじめに
2023/6/22 現在、GitHub Copilot Chat は Technical Preview です。 アップデートにより、改善される可能性が大いにあります、必要に応じて最新情報を追ってください。 本ポストにおける環境は以下の通りです。 VS Code のみで動作の確認をしています。
Visual Studio Code - Insiders Version 1.80.0
GitHub Copilot Chat v0.3.2023062201 ( VS Code Extension )
何が問題だったか
GitHub Copilot Chat は In-Editor Chat という機能を有しており、 エディタ上でコードを範囲選択すると、その部分を対象として Copilot とやりとりができます。
（詳細は👇公式のドキュメント参照）
この In-Editor Chat は非常に便利なのですが、 Copilot からの提案内容が、現在のコードに対してどのように変更があるのかわかりづらいことがありました。 以下、具体例を画像とともに紹介します。
例 : TypeScript で username を lastName と fisrtName に分解し、それぞれ Property としてセットする。
以下のようなコードがあります。
この username を lastName と fisrtName に分解し、それぞれ Property 名を与えてセットするよう Copilot とやりとりをします。 そのため下記部分を範囲選択し、 Ctrl + I ( macOS だと Cmd + I ) で In-Editor Chat を開きます。 チャット欄に 「 username を lastName と fisrtName に更新してください。」と入力し実行します。
そうした際、以下のように差分がわかりやすく表示されるのが望ましいですが、表示されない場合もあります。
なお、これをインライン差分 ( Inline Diff ) と呼ぶようです。
差分が表示されないときの対処法
インライン差分 ( Inline Diff ) が表示されない場合はおおむね以下のように、 copilot の提案内容がすでに現在のコードに反映されておりどのような変更があったか不明瞭な状態にあります。 この提案内容を適用してよいか、それとも破棄するか判断しづらいため、インライン差分を表示したいですよね。
対処法は簡単で、 discard ボタンの隣にある👇矢印から Show Inline Diff を選択すれば表示できるようになります。
注意事項
なお、私が試した version だとバグがあるようで、クリックしてもメニューが一瞬表示されすぐ消えてしまいます。 そのため tab キーでカーソルを移動し、 Enter で開く必要があります。
また、インライン差分が表示されていなくても Show Inline Diff にチェックがついた状態でメニューが表示されるバグもありそうです。 Show Inline Diff にチェックがついていても、選択すればインライン差分が表示されるようになります。
まとめ
まだ GitHub Copilot Chat は Technical Preview ですが、どんどん使い倒していきたいので、小ネタですがまとめました。
皆さんも良い Copilot ライフを。
