如何修改Visual Studio Code编辑器左侧粗条的显示样式

你可以通过原生配置或自定义CSS两种方式实现上述效果，操作步骤如下：

方式一：原生配置实现近似效果 #

无需安装额外插件，通过修改配置文件即可实现，操作如下：

• 按下快捷键 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）唤起命令面板
• 输入 Preferences: Open Settings (JSON) 并选中，打开用户配置文件
• 在JSON文件中添加如下配置，色值可根据自己的喜好自定义：

"workbench.colorCustomizations": {
    // 左侧活动栏背景色
    "activityBar.background": "#1e1e1e",
    // 选中项左侧标识条颜色
    "activityBar.activeBorder": "#007acc",
    // 可选：设置选中项背景，强化视觉区分
    "activityBar.activeBackground": "#2d2d30"
}

• 保存配置后修改会立即生效。

方式二：自定义CSS实现更粗的标识条效果 #

如果原生的标识条宽度不符合你的需求，可以通过自定义CSS的方式调整宽度：

• 在VSCode插件市场搜索安装 Custom CSS and JS Loader 插件
• 在本地新建一个CSS文件，命名为vscode-custom.css，写入如下样式代码，可调整width和border-left-width的数值控制粗条宽度：

.monaco-workbench .activitybar>.content .monaco-action-bar .action-item.checked .active-item-indicator:before {
    width: 6px !important;
    border-left-width: 6px !important;
}

• 重新打开settings.json配置文件，添加如下配置，将路径替换为你本地CSS文件的实际路径：

"vscode_custom_css.imports": [
    // Windows路径示例，注意替换为自己的文件路径
    "file:///C:/Users/用户名/Documents/vscode-custom.css"
    // Mac路径示例
    // "file:///Users/用户名/Documents/vscode-custom.css"
    // Linux路径示例
    // "file:///home/用户名/Documents/vscode-custom.css"
],
"vscode_custom_css.policy": true

• 按下快捷键唤起命令面板，执行 Reload Custom CSS and JS 命令，重启VSCode后即可生效。

内容的提问来源于stack exchange，提问作者Luis Angel Rodríguez