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」で検索するとすぐ見つかります。

VS Codeの設定

チェックをオン

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

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

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

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

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

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

背景色を変更

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

sponsors

top of page

©2022 coliss