VSCode的Peacock插件:为你的每个工作区设置不同颜色

13次阅读

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

VSCode的Peacock插件:为你的每个工作区设置不同颜色

如果您希望在 visual studio Code 中通过视觉区分多个工作区,Peacock 插件可为每个工作区标题栏、活动栏和状态栏赋予独特颜色。以下是实现该效果的具体操作步骤:

本文运行环境:macBook air,macOS Sequoia。

一、安装 Peacock 插件

Peacock 是一个轻量级扩展,需先从 VS Code 扩展市场安装并启用,才能对工作区进行颜色定制。

1、打开 VS Code,点击左侧活动栏中的扩展图标(四个方块组成的图标)。

2、在扩展搜索框中输入 Peacock,找到由 John Papa 发布的官方插件。

3、点击“安装”按钮,等待安装完成,随后点击“重新加载”使插件生效。

二、为当前工作区设置颜色

安装完成后,可通过命令面板快速调用 Peacock 的颜色设置功能,为当前打开的工作区应用专属色彩。

1、按下 Cmd + Shift + Pmacos)或 Ctrl + Shift + Pwindows/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 默认灰色主题。

text=ZqhQzanResources