Visual Studio Code | スクロールバーをカスタマイズする

2022-09-02Visual Studio Code 設定,Visual Studio Code

Visual Studio Code

Visual Studio Code(VScode)でエディター、タブ下、エクスプローラーの各スクロールバーの色、太さ、表示・非表示のカスタマイズ方法を紹介しています。

確認環境

Windows10 デスクトップPC
Visual Studio Code バージョン1.68

スクロールバーの色を変更する

スクロールバーの色はエディター、タブ下、エクスプローラーで共通設定となっています。

変更するには「settings.json」では以下のように設定する事が可能です。

"workbench.colorCustomizations": {
	"scrollbarSlider.activeBackground": "#4169e1",
	"scrollbarSlider.background": "#4169e1",
	"scrollbarSlider.hoverBackground": "#4169e1"
  }
キー名備考
scrollbarSlider.backgroundスクロールバー背景色
scrollbarSlider.activeBackgroundアクティブ時の背景色
scrollbarSlider.hoverBackgroundマウスホバー時の背景色
スクロールバーの色を変更
スクロールバーの色を変更する
スクロールバーの色を変更する

エディターのスクロールバーを非表示にする

エディターでミニマップを表示している場合、スクロールバーは不要かもしれません。

関連:Visual Studio Code | 右側にあるミニマップの表示を切り替える | ONE NOTES

エディターのスクロールバーを非表示にするには「設定」にて垂直スクロールバーの場合「Editor › Scrollbar: Vertical」、水平スクロールバーなら「Editor › Scrollbar: Horizontal」「hidden」にします。

「settings.json」では以下のように設定する事が可能です。

"editor.scrollbar.vertical": "auto"
"editor.scrollbar.horizontal": "auto"

エディターのスクロールバーの太さを変更する

エディターのスクロールバーの太さを変更するには「設定」にて垂直スクロールバーの場合は「Editor › Scrollbar: Vertical Scrollbar Size」、水平スクロールバーの場合は「Editor › Scrollbar: Horizontal Scrollbar Size」のサイズを数値で入力します。
初期値は垂直スクロールバー「14」、水平スクロールバー「12」です。

「settings.json」では以下のように設定する事が可能です。

"editor.scrollbar.verticalScrollbarSize": 14
"editor.scrollbar.horizontalScrollbarSize": 12

タブ下スクロールバーの太さを変更する

タブ下のスクロールバーの太さを変更するには「設定」にて垂直スクロールバーWorkbench › Editor: Title Scrollbar SizingEditor › Scrollbar: Vertical Scrollbar Size」の値を「Default」「Large」から選択します。

「settings.json」では以下のように設定する事が可能です。

"workbench.editor.titleScrollbarSizing": "large"
タブ下のスクロールバーの太さを変更
タブ下のスクロールバーの太さを変更