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

Post on:2022年9月12日

sponsors

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

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

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

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

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

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

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

"editor.stickyScroll.maxLineCount": 5

1	"editor.stickyScroll.maxLineCount": 5

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

command(ctrl) + クリック

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

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

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

背景色を変更

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

{
  "workbench.colorCustomizations": {
    "editorStickyScroll.background": "#332765",
    "editorStickyScrollHover.background": "#504083"
  }
}

{

"workbench.colorCustomizations": {

"editorStickyScroll.background": "#332765",

"editorStickyScrollHover.background": "#504083"

}

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