VS Code扩展开发：如何为指定编辑器标签添加边框

一、为所有编辑器标签添加边框 #

VS Code主题色配置里没有直接的标签边框配置项，但可以通过扩展注入自定义样式实现：

• 编辑器标签的核心CSS选择器是.tab，你可以在扩展中生成并注入以下样式：

.tab {
  border: 1px solid #ccc !important;
  border-radius: 4px 4px 0 0 !important;
  margin-right: 2px !important;
}

• 注入方式：通过创建隐藏的style标签插入到编辑器DOM的head中，在扩展激活时执行该逻辑即可。

二、仅为选定的标签添加边框 #

选中的标签会带有.active类，针对这个类编写样式即可实现目标效果：

.tab.active {
  border: 2px solid #007acc !important;
  border-bottom: none !important; /* 避免和编辑器内容区边框重叠 */
}

• 若要支持用户自定义边框颜色，可以在扩展的package.json中添加配置项：

"contributes": {
  "configuration": {
    "title": "Tab Border Settings",
    "properties": {
      "tabBorder.activeBorderColor": {
        "type": "string",
        "default": "#007acc",
        "description": "选中标签的边框颜色"
      }
    }
  }
}

然后在扩展中读取配置，动态生成样式注入：

const config = vscode.workspace.getConfiguration('tabBorder');
const activeColor = config.get('activeBorderColor');
const style = document.createElement('style');
style.textContent = `.tab.active { border: 2px solid ${activeColor} !important; border-bottom: none !important; }`;
document.head.appendChild(style);

注意事项 #

• VS Code的DOM结构可能随版本更新变化，需做好兼容性测试，可监听编辑器更新事件重新注入样式。
• 因为VS Code默认样式优先级较高，可能需要用!important强制覆盖。

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