VSCode中如何为活动标签页设置内联边框样式

VSCode本身没提供可视化设置改激活标签的显示样式，但可以通过注入自定义CSS的方式实现激活标签的内联边框效果，操作步骤如下：

• 安装样式修改扩展：直接在扩展面板搜Custom CSS and JS Loader安装就行，这个扩展支持加载本地自定义代码修改编辑器UI。
• 编写自定义样式：本地新建一个.css后缀的文件，把下面的代码粘进去，边框粗细、颜色、圆角都可以自己调整参数：

/* 激活标签内联边框效果 */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
    box-sizing: border-box; /* 核心属性，保证边框向内显示不挤占其他标签位置 */
    border: 2px solid var(--vscode-focusBorder); /* 2px为边框粗细，后面是边框颜色，默认取系统焦点色，也可自行写色值比如#3b82f6 */
    border-radius: 4px; /* 边框圆角，不需要直角效果可以改成0 */
}
/* 隐藏VSCode默认的激活标签上下边框，避免和自定义边框冲突 */
.monaco-workbench .tab.active .tab-border-top-container,
.monaco-workbench .tab.active .tab-border-bottom-container {
    display: none;
}

• 配置扩展加载样式：按Ctrl+Shift+P（Mac端按Cmd+Shift+P）调出命令面板，搜索「打开设置(JSON)」，在配置中添加如下内容，把路径替换为你刚才存储的CSS文件的本地绝对路径：

"vscode_custom_css.imports": [
    // Windows路径格式参考："file:///C:/Users/xxx/Documents/custom-tab.css"
    // Mac路径格式参考："file:///Users/xxx/Documents/custom-tab.css"
    "你的CSS文件本地绝对路径"
],
"vscode_custom_css.policy": true

• 生效样式：再次打开命令面板，找到Reload Custom CSS and JS选项执行，等VSCode重启完成后就能看到效果。

效果参考：

注意：VSCode自动更新之后可能会覆盖自定义样式，遇到样式失效的情况重新执行一次上述加载命令、重启编辑器即可恢复。

内容的提问来源于stack exchange，提问作者evan1783