VSCode插件: 自动临时分配Theme以区分不同窗口

VSCode插件:自动临时分配Theme或者状态栏以区分不同窗口

日常开发中经常同时打开多个项目,多个VS Code窗口堆在任务栏,每次切换都要一个个点开看看到底是哪个项目。尤其是在利用AI写项目时,多个窗口管理同一个程序的多个版本实现,同名同主题就容易写乱了。

想着能不能找到一个办法来帮助我区分不同的窗口与不同的项目,在我打开多个窗口的时候,能够自动分配状态帮我区分。感觉可以通过VSCode插件来做到这个功能,于是诞生了Auto Themer这个项目。

marketplace.visualstudio.com/items?itemN...

Auto Themer是什么?

简单来说,这就是一个自动给不同VS Code窗口分配不同视觉标识的插件,检查到多个窗口并且主题相同时,采用不同的策略来辅助区分窗口。它有两种工作模式:

模式一:主题区分法

给每个窗口自动分配不同的配色主题,一眼就能看出区别:

  • 当前窗口打开项目A用默认主题,再新开以窗口的项目B时主题冲突,会自动更换别的主题
  • 可以自己选择主题,也可以随机分配主题
  • 支持通过工作区路径将主题持久化,下次打开项目会自动切换
  • 关闭窗口或者切换工作区时,设置的主题状态会被重置------意味着同一个项目每一次打开可能都是不同的主题配置

模式二:状态栏魔法

有的人不喜欢更改Theme,插件提供第二种方式:修改底部状态栏。会给每个窗口的底部状态栏设置不同的颜色和文字标签:

  • 当前窗口打开项目A用默认主题,再新开以窗口的项目B时主题冲突,会自动修改窗口B的底部状态栏与文字标签
  • 可以自己选择底部状态栏的颜色,也可以点击自动分配下一个颜色
  • 支持通过工作区路径将状态栏的文字标签持久化,下次打开项目会自动切换。比如 生产环境项目 → "PROD"标签
  • 关闭窗口或者切换工作区时,设置的底部状态栏会被重置------意味着同一个项目每一次打开可能都是不同的底部状态栏配置

怎么使用?

marketplace.visualstudio.com/items?itemN... 下载插件并安装。

  • 进入插件设置,配置autoThemer.windowsThreshold,打开的窗口数超过该阈值时才会自动分配主题。
  • 配置 autoThemer.conflictResolution ,选择theme或statusBar,分别表示通过主题或底部状态栏区分窗口。
  • 其他操作可以通过侧边栏的插件面板设置,如切换主题、切换状态栏颜色、持久化当前工作区的主题映射、持久化底部状态栏标签映射。
  • 新窗口打开工作区后,自动检测并分配主题或者状态栏到.vscode/settings.json;切换工作区或者关闭窗口时,会自动重置.vscode/settings.json的colorTheme。

插件面板功能说明

  • select theme: 选择当前窗口的主题
  • random theme: 随机为当前窗口分配主题
  • reassign theme: 重新分配当前窗口的主题
  • persist theme: 持久化当前窗口的主题映射
  • show mappings: 查看工作区与主题的映射关系
  • pick status bar scheme: 选择当前窗口的底部状态栏颜色配置(仅内置)
  • persist status bar: 持久化当前窗口的底部状态栏标签映射

配置

在 VSCode 设置中配置:

json 复制代码
{
  "autoThemer.enabled": true,
  "autoThemer.conflictResolution": "theme",
  "autoThemer.windowsThreshold": 2,
  "autoThemer.builtinThemes": [],
  "autoThemer.themeMappingsText": "/my/pro-dev: Kimbie Dark; /easy/hc: Kimbie Dark",
  "autoThemer.statusBarMappingsText": "/my/pro-dev: 自定义标签; /easy/hc: 自定义项目"
}

说明: themeMappingsText 使用分号分隔的 路径: 主题 文本,插件在内存中解析并使用该映射。 statusBarMappingsText 使用分号分隔的 路径: 标签 文本,插件在内存中解析并使用该映射。


接下来聊聊实现原理。

实现原理

插件会在VS Code的全局存储中维护一个基于磁盘文件的窗口实例协调系统,所有窗口通过这个机制来"协商"谁用什么主题/颜色。当检测到多窗口场景时,它会:

  1. 扫描当前活动窗口
  2. 检查是否有持久化映射配置
  3. 给没有映射的窗口分配唯一标识
  4. 定期检测冲突并处理
  5. 窗口关闭时自动清理配置

具体实现上,它通过修改工作区的.vscode/settings.json来应用主题或颜色配置,关闭窗口时会自动重置,不会影响项目的原始配置。

总结

Auto Themer 为了解决一个看似简单但确实很影响效率的问题------区分多个项目窗口,支持通过Theme区分或者通过StatusBar区分,可以自动切换配色以便区分,并强调临时状态管理与状态重置,也支持状态持久化。

通过简单的配置就可以启动功能,欢迎使用,也可以提PR。(------ 一个不怎么写前端的开发者:)

相关推荐
福兮说6 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
AI情绪识别开源6 小时前
HFpEF 心房-心室耦联效率无创监测方向(AVCEI)
typescript·laravel·perl
郑州光合科技余经理6 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆6667 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
凤城老人7 小时前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
Dovis(誓平步青云)7 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan8 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_8 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒8 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技9 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端