如何在 Visual Studio Code 中使滚动条更宽？答案

【问题标题】：How to make scrollbars wider in Visual Studio Code?如何在 Visual Studio Code 中使滚动条更宽？
【发布时间】：2018-04-30 19:29:18
【问题描述】：

有没有办法让 Visual Studio Code 的窗口滚动条变宽？我发现它们与其他应用程序相比太窄了几个像素，而且我的鼠标经常错过我试图点击的精确位置。

【问题讨论】：

你可能想看这个：github.com/Microsoft/vscode/issues/30191
查看 stackoverflow.com/a/68233096/836330 以获取有关 vscode v1.58 中 editor.scrollbar.verticalScrollbarSize 设置的更新。

标签： visual-studio-code vscode-settings

【解决方案1】：

@andr 仅用于垂直，整套

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

和 workaround 使用特别有意义的 extension ，用于标签组滚动条

（插入 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;
}
*/

【讨论】：

注意：上面最新的 VSC 不起作用。特别是这部分：.monaco-workbench>.part.editor 没有工作，需要稍作修改：.monaco-workbench.part.editor
@armyofda12mnkeys , .monaco-workbench .part.editor 并删除所有 > 仍然不起作用

【解决方案2】：

从 VS Code 1.48.0 开始，settings.json 中的以下行帮助我使水平滚动条变大：

"workbench.editor.titleScrollbarSizing": "large"

【讨论】：

【解决方案3】：

您需要编辑文件 %APPDATA%\Code\User\settings.json 并添加

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

【讨论】：

并忽略 VS Code 向您抛出的“未知配置设置”，它无论如何都可以工作。

【解决方案4】：

我在 Windows 10 操作系统上使用 Visual Studio Code 1.58.2。

打开菜单：文件 -> 首选项 -> 设置。
“设置”选项卡将打开。在搜索框中，输入title scrollbar sizing。
将下拉列表值从 default 更改为 large。
关闭设置标签。
完成！恭喜。

如果你想测试一下，打开多个文件，你会看到顶部的水平滚动条更宽，很容易被鼠标指针选中。

【讨论】：

【解决方案5】：

感谢 Dai 提供链接。未记录的属性editor.scrollbar.verticalScrollbarSize 为代码窗口处理此问题。它不会影响文件浏览器上的滚动条，但现在没关系。

【讨论】：

【解决方案6】：

自 VSCode 于 2021 年 6 月发布（版本 1.58）以来，可以直接在设置中编辑滚动条（按 ctr+, 可以更快地到达那里）并搜索 editor.scrollbar。您可以在那里更改垂直滚动条的大小。

【讨论】：

谢谢！我不知道为什么这个默认没有设置成这个大小来匹配其他的。

【解决方案7】：

你也可以让打开的标签换行而不滚动：

"workbench.editor.wrapTabs": true

【讨论】：