VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」

8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。

JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。

VS Codeの新機能「スティッキー スクロール」

「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。

エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。

Visual Studio Code July 2022 (version 1.70)

「スティッキー スクロール」を使用するのは、簡単です。
VS Codeの設定（command + ,）を開き、「Editor > Experimental > Sticky Scroll: Enabled」のチェックをオンにします。「sticky」で検索するとすぐ見つかります。

チェックをオン

settings.json（設定の上部のアイコン）に記述する場合は、下記の通り。

まずは、JavaScriptで試してみました。
上部に関数やメソッドがくっつくので、分かりやすいですね。

vue.jsを「スティッキー スクロール」で表示

CSSにも対応しています。
とはいえ、CSSではそれほど深い階層になることはないので、恩恵は少ないかもしれません。

reboot.cssを「スティッキー スクロール」で表示

スティッキーさせた行の背景色を変更することもできます。
パープルに変更してみました。背景色を変えた方が見やすいですね！

背景色を変更

背景色を変更するには、settings.jsonに下記を記述します。1行目が背景色の設定で、2行目はホバーです。
参考: Document new color keys