如何根据文件路径设置VS Code编辑器背景色？

问题描述 #

我正在使用VS Code，希望根据打开文档的文件路径设置editor.background颜色。目前已安装Peacock插件，并完成如下配置：

{
    "settings": {
        "peacock.favoriteColors": [
            {
                "name": "Flutter",
                "value": "#0C1E28FF"
            },
            {
                "name": "Server",
                "value": "#240A0AFF"
            }
        ]
    }
}

请问能否通过为editor.background指定特定颜色，区分不同文件夹下的打开文件？注：因各文件夹共享资源，我不想创建不同工作区。

解决方案 #

完全可以实现，不需要创建多个工作区，通过Peacock插件的路径规则功能就能按文件夹匹配设置编辑器背景色，具体配置步骤如下：

• 指定要修改的元素为编辑器背景
  在配置中添加peacock.affectedElements，明确只修改editor.background，避免影响其他UI元素：

"peacock.affectedElements": ["editor.background"]

• 添加路径匹配规则
  使用peacock.pathRules配置项，通过正则表达式匹配文件路径，为不同文件夹绑定对应颜色。比如：

"peacock.pathRules": [
    {
        "regex": ".*/flutter_project/.*",
        "color": "#0C1E28FF" // 对应你定义的Flutter颜色
    },
    {
        "regex": ".*/server_project/.*",
        "color": "#240A0AFF" // 对应你定义的Server颜色
    }
]

• 把.*flutter_project/.*替换成你实际的Flutter项目文件夹路径正则，.*server_project/.*替换成服务端项目的路径正则

• 正则支持模糊匹配，比如只要文件路径包含flutter就匹配的话，可以写成.*flutter.*

• 完整配置示例
  整合后的settings.json配置如下：

{
    "settings": {
        "peacock.favoriteColors": [
            {
                "name": "Flutter",
                "value": "#0C1E28FF"
            },
            {
                "name": "Server",
                "value": "#240A0AFF"
            }
        ],
        "peacock.affectedElements": ["editor.background"],
        "peacock.pathRules": [
            {
                "regex": ".*/flutter_project/.*",
                "color": "#0C1E28FF"
            },
            {
                "regex": ".*/server_project/.*",
                "color": "#240A0AFF"
            }
        ]
    }
}

• 生效说明
  保存配置后，VS Code会自动应用规则，打开对应文件夹下的文件时，编辑器背景会切换到指定颜色。如果规则不生效，可以检查正则表达式是否正确匹配文件路径，或者重启VS Code尝试。

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