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)](https://code.visualstudio.com/updates/v1_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
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/87de3aac-1556-f779-57e4-d11cade5177e.png" width="400">



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

### エディタのルーラー表示

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

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


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/b5037af6-0e51-c1c7-04b9-2fc819a8b7b2.png" width="400">


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


## Configure zoom levels per window

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

```settings.json
{
	"window.zoomPerWindow": true,// default: true
}
```

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


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/63a003ed-d4d0-6323-956b-595a27fc38d0.png" width="400">


これは、アクティブな 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 のファイルの差分を同一ビューで見ることはできない。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/5bc5c059-a5dd-bf62-c849-7c81cc55e659.png" width="600">


## 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
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671630/46160d37-db6b-a381-072d-cc1cb8d89548.png" width="400">


## 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` にフォーカスが当たった状態となる**ため、結構使いやすいように感じた。

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

## 所感

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