VS Codeの新機能「スティッキー スクロール」がさらに便利に! 追従行数の変更、関数やクラスをリスト化できます

先日アップデートされた、VS Code v1.71で「スティッキー スクロール」がさらに便利になったので紹介します。

「スティッキー スクロール」はv1.70で実験的な機能として実装されましたが、v1.71で正式に実装され、さらに追従行数を設定できるようになり、スティッキースクロールで関数やクラスをリスト化して移動もできるようになりました。

VS Codeの新機能「スティッキー スクロール」がさらに便利に

August 2022 (version 1.71) -VS Code

「スティッキー スクロール」はJavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつく機能です。詳しくは前回の記事をご覧ください。

関数やクラスなどを上部にスティッキーさせる「スティッキー スクロール」

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

v1.71での「スティッキー スクロール」のアップデートは、2つです。

  • 表示する追従行の最大数を設定できる
  • 関数やクラスをリスト化・移動できる

まず、追従行の最大数を設定するには、VS Codeの設定(command + ,)を開き、「Editor > Sticky Scroll: Max Line Count」で行数を設定します。
デフォルトでは「5」になっていました。

VS Codeの設定

行数を設定
「Sticky Scroll: Max Line Count」で検索するとすぐ見つかります。

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

関数やクラスをリスト化して表示するには、スティッキースクロールで関数やクラスを command(ctrl) + クリック します。

VS Codeのキャプチャ

command(ctrl) + クリック

CSSだとどうなるかなと思ったので、試したら、idセレクタがリスト化されました。

VS Codeのキャプチャ

CSSファイル内のidセレクタがリスト化された

あとは、前回の記事で追記したのですが、スティッキーさせた行の背景色を変更することもできます。

背景色を変更

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

sponsors

top of page

©2022 coliss