はじめに
みんな大好き VSCode はおよそ月次で New Feature たちがリリースされる。
最新の2024年2月の新機能の中からいくつかピックアップして簡単な例を添えて紹介したいと思う。
なお、以下 json の設定は全て settings.json で行うものとする。今回私の方では User settings により動作を確認したが、Workspace settings でも同様に行えるはずなので好きな方を選ぶべし。また、リリースされた全機能を網羅しているわけではないのでご了承いただきたい。
動作確認環境
- Mac: Apple M1 Pro/macOS Sonoma バージョン 14.0
- VSCode: version 1.87.0
参考: February 2024 (version 1.87)
それでは、レッツ Cmd + Shift + P > Preferences: Open User Settings(JSON)♪
インライン補完が、カーソル複数選択時に対応
できるようになったこと🎉
Alt を押しながらエディタ上をクリックして複数選択した状態で入力すると同時に複数箇所で入力が反映されるが、それら複数選択箇所に対して補完がそれぞれ効くようになった。
補完内容はグレーでサジェストされ、その状態で tab を押すと全てに適用される👍
設定方法⚙️
特になし
sticky scroll in editor
できるようになったこと🎉
エディタでの Sticky Scroll 機能がデフォルトで on となった。
また、Sticky にする行数を最大数を 10 から 20 に増加した。
e.g. 以下のコードの場合、
const a = {
b: {
c: {
d: {
e: {
f: {
g: 'h'
}
}
}
}
}
};
sticky 行が5行目まで有効で、それ以降は折り畳まれる。
設定方法⚙️
{
// 機能の on/off を設定
"editor.stickyScroll.enabled": true,// default: true
// sticky にする最大行数を設定する
"editor.stickyScroll.maxLineCount": 7,// default: 5
}
Window タイトルを変更する
できるようになったこと🎉
VSCode Window のタイトル部分に任意のテキストを表示できるようになった。
リポジトリ名: grpc-codegen, ブランチ名: main の場合、下の画像のように表示できたりする。
設定方法⚙️
{
"window.title": "${activeRepositoryName}/${activeRepositoryBranchName}",// default: "${activeRepositoryName}"
}
使用可能な変数は、以下の通り1。（翻訳放棄）
activeEditorShort: the file name (e.g. myFile.txt).
activeEditorMedium: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).
activeEditorLong: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).
activeFolderShort: the name of the folder the file is contained in (e.g. myFileFolder).
activeFolderMedium: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).
activeFolderLong: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).
folderName: name of the workspace folder the file is contained in (e.g. myFolder).
folderPath: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).
rootName: name of the workspace with optional remote name and workspace indicator if applicable (e.g. myFolder, myRemoteFolder [SSH] or myWorkspace (Workspace)).
rootNameShort: shortened name of the workspace without suffixes (e.g. myFolder, myRemoteFolder or myWorkspace).
rootPath: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).
profileName: name of the profile in which the workspace is opened (e.g. Data Science (Profile)). Ignored if default profile is used.
appName: e.g. VS Code.
remoteName: e.g. SSH
dirty: an indicator for when the active editor has unsaved changes.
focusedView: the name of the view that is currently focused.
activeRepositoryName: the name of the active repository (e.g. vscode).
activeRepositoryBranchName: the name of the active branch in the active repository (e.g. main).
separator: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.
コミットメッセージにバリデーションをかける
できるようになったこと🎉
Source Control にてコミットを行う際、コミットメッセージの入力文字数に関して設定値を超えると warning を表示する。あくまで warning のため、強制するものではない。
表示されるポップアップのQuick Fix... から Hard wrap line などを選択してこれを修正することができる。
ちなみに、コミットメッセージのうち、最初の行が Subject で、2行目以降が body となっており、それぞれに対して設定値を設けられる。
設定方法⚙️
{
"git.inputValidation": true,// default: false
// Subject 用設定
"git.inputValidationSubjectLength": 30 // default: なし
// Body 用設定
"git.inputValidationLength": 50 // default: なし
}
[Github Copilot] Explain This がより操作しやすく
できるようになったこと🎉
Github Copilot の機能の一つで、関数や変数などの symbol に対してそれが何をしているものなのかを詳述してもらう「Explain This」というものがある。
以前は説明対象となる symbol を選択した状態で Explain This する必要があったが、今回のアップデートにより、symbol にカーソルが当たった状態でも可能になった。
e.g. 以下の関数(myFunction)に対して行う
const myFunction = () => {
const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = a.reduce((acc, val) => acc + val, 0);
return sum;
};
右クリック > Copilot > Explain This 選択
GitHub Copilot は以下の返答をくれた。めちゃめちゃ詳細にブレークダウンしてくれる。（読んではいない）
The code you've shared is written in TypeScript, a statically typed superset of JavaScript. It defines a function named [`myFunction`](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html "src/clients/test.ts") that calculates the sum of all numbers in an array.
Let's break it down:
1. `myFunction = () => {...}`: This is an arrow function assigned to the constant [`myFunction`](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html "src/clients/test.ts"). Arrow functions are a more concise syntax for writing function expressions in JavaScript and TypeScript. They are particularly useful when you want to keep the context of `this` from the parent scope.
2. `const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];`: Inside the function, a constant [`a`](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html "src/clients/test.ts") is declared and assigned an array of numbers from 1 to 10. The `const` keyword means that the variable cannot be reassigned.
3. `const sum = a.reduce((acc, val) => acc + val, 0);`: This line uses the `reduce` method of the array to calculate the sum of its elements. The `reduce` method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single output value. In this case, the function is `(acc, val) => acc + val`, which takes the accumulator (`acc`) and the current value (`val`), and returns their sum. The second argument to `reduce` is the initial value of the accumulator, which is `0` in this case.
4. `return sum;`: Finally, the function returns the sum of all numbers in the array.
So, when you call [`myFunction()`](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html "src/clients/test.ts"), it will return the sum of all numbers in the array [`a`](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html "src/clients/test.ts"), which is 55.
設定方法⚙️
GitHub Copilot および GItHub Copilot Chat の拡張のインストールが必要である。
[Github Copilot] Rename で変更名の候補を出してくれる
できるようになったこと🎉
Github Copilot の機能の一つで、関数や変数などの symbol に対してそれが何をしているものなのかに基づいてリネームの候補を suggest してくれる「Rename」というものがある。
対象となる symbol にカーソルを当てた状態で、F2 クリックまたは、右クリック→Rename Symbol 選択で行う。
設定方法⚙️
-
GitHub CopilotおよびGItHub Copilot Chatの拡張のインストールが必要である。 GitHub Copilot Chatの方は、Pre-Release 版を利用する必要がある。
所感
- 前回に引き続き、Source Control 関連のアップデートが結構あるが、コミット作業に VSCode を使っている人はどれくらいいるのだろう？
- GitHub Copilot 機能の強化は今後もどんどんでてきそう。
- Accessibility 系のアップデートにはイマイチときめかない。大事なのはわかっているのだけども。。