VS Codeの新機能がすごく便利! JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
Post on:2022年8月8日
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(設定の上部のアイコン)に記述する場合は、下記の通り。
1 |
"editor.experimental.stickyScroll.enabled": true |
まずは、JavaScriptで試してみました。
上部に関数やメソッドがくっつくので、分かりやすいですね。
vue.jsを「スティッキー スクロール」で表示
CSSにも対応しています。
とはいえ、CSSではそれほど深い階層になることはないので、恩恵は少ないかもしれません。
reboot.cssを「スティッキー スクロール」で表示
スティッキーさせた行の背景色を変更することもできます。
パープルに変更してみました。背景色を変えた方が見やすいですね!
背景色を変更
背景色を変更するには、settings.jsonに下記を記述します。1行目が背景色の設定で、2行目はホバーです。
参考: Document new color keys
1 2 3 4 5 6 |
{ "workbench.colorCustomizations": { "editorStickyScroll.background": "#332765", "editorStickyScrollHover.background": "#504083" } } |
sponsors