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"