How to make scrollbars wider in Visual Studio Code

Question

Is there a way to make Visual Studio Code's window scrollbars wider? I'm finding they're a few pixels too skinny compared to other apps and my mouse often misses the precise location that I'm trying to click.

Answer 1

You need to edit the file %APPDATA%\Code\User\settings.json and add

,"editor.scrollbar.verticalScrollbarSize": 15
,"editor.scrollbar.horizontalScrollbarSize": 15

Answer 2

Thanks to Dai for the link. The undocumented property editor.scrollbar.verticalScrollbarSize handles this for the code windows. It doesn't affect the scrollbars on the file explorer, but that's OK for now.

Answer 3

@andr its only for vertical, the complete set

,"editor.scrollbar.verticalScrollbarSize": 10
,"editor.scrollbar.horizontal": "visible"
,"editor.scrollbar.horizontalScrollbarSize": 15

, and workaround using an exceptionally meaningful extension ,for tabs group scrollbar

(to insert in custom.css):

/*tab group scrollbar;*/
.monaco-workbench>.part.editor>.content .editor-group-container>.title.tabs>.tabs-and-actions-container>.monaco-scrollable-element .scrollbar,
.monaco-workbench>.part.editor>.content .editor-group-container>.title.tabs>.tabs-and-actions-container>.monaco-scrollable-element .scrollbar .slider {
    height: 20px !important;
}

/*scrollbars;
.monaco-workbench>.part.editor>.content .editor-group-container>.editor-container .monaco-scrollable-element .scrollbar
, .monaco-workbench>.part.editor>.content .editor-group-container>.editor-container .monaco-scrollable-element .scrollbar .slider {
    height: 20px !important;
}
*/