Peacock 插件可为 VS Code 多个工作区设置不同颜色以实现视觉区分:安装插件后,可通过命令面板选择自定义色值、预设语义色(如 dev/blue、prod/red)、编辑 settings.json 文件批量配置,或执行重置命令恢复默认灰色主题。

如果您希望在 Visual Studio Code 中通过视觉区分多个工作区,Peacock 插件可为每个工作区标题栏、活动栏和状态栏赋予独特颜色。以下是实现该效果的具体操作步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、安装 Peacock 插件
Peacock 是一个轻量级扩展,需先从 VS Code 扩展市场安装并启用,才能对工作区进行颜色定制。
1、打开 VS Code,点击左侧活动栏中的扩展图标(四个方块组成的图标)。
2、在扩展搜索框中输入 Peacock,找到由 John Papa 发布的官方插件。
3、点击“安装”按钮,等待安装完成,随后点击“重新加载”使插件生效。
二、为当前工作区设置颜色
安装完成后,可通过命令面板快速调用 Peacock 的颜色设置功能,为当前打开的工作区应用专属色彩。
1、按下 Cmd + Shift + P(macOS)或 Ctrl + Shift + P(Windows/Linux)打开命令面板。
2、输入 Peacock: Change Color 并回车。
3、在弹出的颜色选择器中,点击任意色块,或输入十六进制颜色值(如 #FF6B6B)确认应用。
三、使用预设颜色方案
Peacock 内置多组语义化颜色名称,便于记忆与复用,例如 dev、test、prod 等环境对应色系,避免手动选色偏差。
1、再次打开命令面板,输入 Peacock: Change Color from List 并回车。
2、从下拉列表中选择预设项,例如 dev (blue) 或 production (red)。
3、确认后,当前工作区界面元素将立即更新为对应色调。
四、通过配置文件批量设置颜色
若需在团队协作中统一工作区颜色策略,可直接编辑工作区的 .vscode/settings.json 文件,以声明方式固定颜色值。
1、在当前工作区根目录下,确保存在 .vscode 文件夹;若无,则新建该文件夹。
2、在其中创建或打开 settings.json 文件。
3、添加键值对:"peacock.color": "#4ECDC4",保存文件后颜色自动生效。
五、重置当前工作区颜色
当需要恢复默认外观时,Peacock 提供专用命令清除自定义颜色,避免残留样式干扰其他工作区。
1、打开命令面板,输入 Peacock: Reset Color 并回车。
2、确认执行后,标题栏、活动栏与状态栏将还原为 VS Code 默认灰色主题。










