VSCode 2024.1 Updates 紹介

Visual Studio Code の新機能紹介

VSCode はおよそ月次で New Feature たちがリリースされているみたいで、最新の2024年1月の新機能の中からいくつかピックアップして簡単な例を添えて紹介したいと思う。
なお、以下 json の設定は全て settings.json で行うものとする。今回私の方では User settings により動作を確認したが、Workspace settings でも同様に行えるはずなので好きな方を選ぶべし。また、リリースされた全機能を網羅しているわけではないのでご了承いただきたい。

動作確認環境

• Mac: Apple M1 Pro/macOS Sonoma バージョン 14.0
• VSCode: version 1.86.0

参考: January 2024 (version 1.86)

それでは、レッツ Cmd + Shift + P > Preferences: Open User Settings(JSON)♪

Flexible Auto Save options

言語やフォルダ種別ごとに、保存タイミングを設定する。
Markdown ファイルを編集していて、他のタブに移動したり、VSCode 以外のウィンドウにフォーカスしたタイミングで保存する場合は以下の設定を行う。

settings.json

{
	"[markdown]": {
	    "files.autoSave": "onFocusChange" // default: off
	}
}

通常の能動的なファイル保存に加えて、以下のタイミングで保存されるようになる。

value	保存タイミング
afterDelay	編集と同時
onFocusChange	現在のタブから離れたとき
onWindowChange	VSCode に画面のフォーカスが入った時
off	なし

Source Control input

コミットメッセージ入力欄の行数デフォルト値調整

VSCode でコミットを行う際、デフォルトのコミットメッセージ入力欄の高さ（行数）を設定する。

settings.json

{
	"scm.inputMinLineCount": 5,// default: 1
}

デフォルトではそんなに行数は不要かもしれないが、3行くらいはあっても余裕があって良いかもしれない。

エディタのルーラー表示

以下の例では、コミットメッセージ入力欄の 10, 20, 30 列目に表示している。

settings.json

{
	"[scminput]": {
		"editor.rulers": [10, 20, 30]// default: null
	},
}

コミットメッセージの文字数を厳密に管理したい方にはいいかもしれない。

Configure zoom levels per window

Window の Zoom In/Out について、アクティブな window にのみ適用ができる。

settings.json

{
	"window.zoomPerWindow": true,// default: true
}

この設定をオンにした状態で Zoom In(Cmd + '+') や Zoom Out(Cmd + '-') を行うと、VSCode フッター部分に現在のズームレベルのインディケーターが表示される。

これは、アクティブな window にのみ有効な zoom level で、- と + をクリックすることでも調整できるようになる。
また、このインディケーターは window.zoomLevel の設定値とアクティブな window での zoom level が異なる場合にのみ表示される。

まとめると、アクティブな window に対して Zoom In/Out できるようになりました、ということだろう。

Review multiple files in diff editor

Source Control によりファイルの差分を見るとき、1つのビューで複数ファイルを確認できる。
画像赤枠の multi file diff icon をクリックすることで、画面右側に差分が表示される。
local changes, staged changes, incoming/outgoing changes, stashes などのグループごとにビューは切り替わる。すなわち、staged changes と local changes のファイルの差分を同一ビューで見ることはできない。

Sticky Scroll in tree views

ファイルの Tree view において、表示ファイルやフォルダ数が多い場合、View スクロール時に現在フォルダを固定表示することができる(workbench.tree.enableStickyScroll)。また、workbench.tree.stickyScrollMaxItemCount の設定値によって、フォルダの何階層まで固定表示するかも設定可能だ。
例えば画像のように、workbench.tree.stickyScrollMaxItemCount: 3 の場合には、3階層まで固定表示し、4階層目以降は固定表示の裏に隠れる形となる。

settings.json

{
	"workbench.tree.enableStickyScroll": true, // default: true
	"workbench.tree.stickyScrollMaxItemCount": 3 // default 7
}

Markdown paste options

コピーしてきた URL を Markdown ファイルにペーストすると、Markdown 形式のリンクを自動挿入してくれる。

settings.json

{
	"markdown.editor.pasteUrlAsFormattedLink.enabled": "smart"// default: smartWithSelection
}

次の4つのタイプを設定可能。

value	挙動
smartWithSelection	テキスト選択状態でペーストする。コードブロックなどの中では使用不可。
smart	テキスト選択なしでペーストでもOK。コードブロックなどの中では使用不可。
always	ペーストすると無条件で Markdown link 生成
never	Markdown link 生成なし

smart と always でテキスト選択なしの状態でペーストすると[text](URL) の形で Markdown link 挿入され、さらに text にフォーカスが当たった状態となるため、結構使いやすいように感じた。

手元の確認では、上記表での記載内容通りには作動しておらず、例えば 「never 設定、テキスト選択した状態でペースト」時にも Markdown link は生成された。

所感

ソフトウェアエンジニアとして最も重要なツールの一つであろう VSCode。その新機能やバグ修正などにはこれまであまり関心を持ってこなかったが、開発の生産性を上げるため、また楽しく仕事するためにも今後はこのような情報にアンテナを張っていきたい。できれば次回以降も簡単なまとめを継続して打ち出していければと思っている。