はじめに
みんな大好き VSCode はおよそ月次で New Feature たちがリリースされる。
最新の 2024 年 5 月の新機能の中からいくつかピックアップして簡単な例を添えて紹介したいと思う。
なお、以下 json の設定は全て settings.json で行うものとする。User settings か Workspace settings かは、設定項目によって適宜調整するべし。また、リリースされた全機能を網羅しているわけではないのでご了承いただきたい。
動作確認環境
- Mac: Apple M1 Pro/macOS Sonoma バージョン 14.4
- VSCode: version 1.90.0
主な基本操作
- Quick Open を開く:
⌘(Cmd) + P - コマンドパレットを開く:
⌘(Cmd) + Shift + P- 設定ファイル (settings.json) を開く: Preferences: Open User Settings(JSON) / Preferences: Open Workspace Settings(JSON) 選択
Updates 内容
1. Editor tabs multi select
🎉できるようになったこと
複数タブを選択し、同時に操作をできるようになった。
操作の内容は、タブの移動・ピン留め・クローズなど。
使用感としては、Google Chrome でのタブ操作と同じイメージである。
⚙️設定方法
特になし
🪛操作方法
-
Cmd + Click: タブの選択 -
Shift + Click: タブの範囲選択
2. Always show editor actions
🎉できるようになったこと
アクティブでないエディタに対しても editor title actions が表示されるようになった。
editor title actions とは、画像のような、ファイルの差分を開いたときの操作用アイコンである。
⚙️設定方法
{
"workbench.editor.alwaysShowEditorActions": true // default: false
}
🪛操作方法
確認条件として、複数のエディタを開いていること。
3. Set disable-lcd-text as a runtime argument
🎉できるようになったこと
RGB subpixel rendering を無効にできるようになった。
⚙️設定方法
- コマンドパレットを開く
- Preferences: Configure Runtime Arguments を選択
-
argv.jsonが開くので、以下を追記
{
"disable-lcd-text": false
}
🪛操作方法
前提条件として、Windows マシンであることだった！残念！
4. Configure custom profile for new window
🎉できるようになったこと
新しい Window を開いた時に適用されるプロファイルを指定できるようになった。
⚙️設定方法
前提条件として、User settings の方でのみ設定可能である。（workspace では不可）
{
"window.newWindowProfile": <fancy_profile_name>
}
🪛操作方法
5. GitHub Copilot extension 関係
GitHub Copilot の機能を利用する上での前提条件
- サービス を subscribe していること
- extension をインストールしていること
- Chat の機能に関するものは
GitHub Copilot Chat - Editor の機能に関するものは
GitHub Copilot
- Chat の機能に関するものは
5-1. Attach context to chat
🎉できるようになったこと
chat prompt へ与えられるコンテキストが増えた。
これまでは、# によりファイルの指定やエディタでの選択範囲などをコンテキストとして与えていたが、今回のアップデートにより、コンテキストの種類やインターフェースが強化された。
⚙️設定方法
特になし
🪛操作方法
-
📎アイコンをクリックもしくはCmd + /でコンテキスト選択ウィンドウが表示される - 所望のコンテキストを選択し、chat prompt を作成・送信する
操作感はリンク元の公式に動画が掲載されているので参照していただくとして、これを試行中に別の便利な操作を思い浮かんだので共有したい。（今回のアップデートによる新機能ではない）
あるコードブロックの説明を生成する（マウス操作なし）
まずはこの gif を見ていただきたい。
- コードブロックの選択
- 選択箇所の説明をしてもらう prompt を送信(
@workspace /explain)
というのを、キーボード操作のみで完結するようにしている。
GitHub Copilot の機能を使用する上で、マウス操作による紹介がされることが多いが、コマンドに適切なキーバインディングをマップすることで、よりシームレスで時短な作業が可能となる。
上で使用したコマンドは、
- コードブロックの選択:
Select to Bracket - chat ウィンドウへのフォーカス移動:
Chat: Focus on GitHub Copilot View
である。キーバインディングの設定は、⌘(Cmd) 押しながら K -> S で画面を開き、上のコマンド名で検索して設定する。
5-2. Ask questions using Bing search and enterprise knowledge bases
🎉できるようになったこと
prompt に対する返答として、ウェブ検索結果 (Bing) や企業の ナレッジベース の内容を考慮して答えてくれるようになった。
⚙️設定方法
GitHub Copilot Enterprise 版の利用が前提となるため、個人利用では確認できず。
🪛操作方法
-
#webを prompt に含めることで、ウェブ検索結果を考慮する -
#kbを prompt に含めることで、所属企業のナレッジを考慮する
5-3. IntelliSense in chat code blocks
🎉できるようになったこと
Copilot が生成したコード（chat ウィンドウに表示されている状態）にインテリセンスが効くようになった。以下の機能が有効:
- Go to definition
- ホバー
- Go to implementation
- Go to type definition
なお、本機能は TypeScript, JavaScript, HTML, and CSS について有効とのこと。それ以外は各言語の extension をインストールすること。
⚙️設定方法
特になし
🪛操作方法
コードブロックが返信されるような prompt を送信する。
以下の例では生成されたコード中のある関数から実際のエディタでの定義にジャンプしている。
5-4. Improved links in chat responses
🎉できるようになったこと
chat 内容の中で、ファイルやシンボルへのリンクが追加されるようになった。
それらをクリックすることで、エディタの実際のファイル等へ遷移する。
🪛操作方法
特になし
⚙️設定方法
特になし
5-5. Automatic rename suggestions
🎉できるようになったこと
エディタにて、symbol(関数、変数、定数etc)のリネームの名前を提案してくれる。
⚙️設定方法
特になし
🪛操作方法
- リネームしたい symbol を選択し右クリック
-
Rename Symbolを選択し、提案されるものを確認する
動画にあるように、同一とみなされる箇所は複数まとめて変更してくれるのでありがたい。
getXXX はダメだってじっちゃんが言ってた><
所感
Copilot 祭りが続いている。この地味な改善が、チリツモで気づいたら大きな生産性の向上につながると思っている。
そして、AI によるコード生成系のソリューションが世に出回っているが、あくまでも完全なる自動化ではなく、「AI がサポート役としていい感じに働いてくれ、そのための指示をエンジニアが的確に出す」というのがしばらく今後の流れになるのであろう。