用 AI 写了个 VSCode 摸鱼插件，从开发到上架全过程

都说代码廉价了，创意才是稀缺资源。但作为程序员，有创意了往哪搁呢？

程序员想做产品，选哪个战场？

我想了想常见的路子。

小程序------品类限制多，上线流程繁琐。想搞个宽点的类目还得公司资质，我一个写代码的，搞这些行政流程真是头大。而且小程序的形态本身就很受限，能玩的花样不多。

桌面应用------上架 360 应用商店、Mac App Store，审核周期长，签名证书一堆事。你想快速验证个想法，结果光上架流程就磨一两周，说实话性价比不高。

个人网站------流量从哪来？SEO 做不做？服务器钱花不花？还没想好做什么呢，先搞个站有点本末倒置。

出海------没经验，不熟，先不考虑。

后来想想，我们程序员平时待得最久的地方是哪？编辑器啊。VSCode 插件这条路，限制少、场景熟、上架快，而且后续还能往 AI 方向探索------比如在编辑器里集成 AI 能力，这本身就是个有意思的方向。

VSCode 插件可能是被严重低估的轻量产品形态。你不需要公司资质，不需要漫长的审核等待，vsce publish 一敲就上架了。用户群体也精准：就是和你一样的开发者。别人用你的插件，觉得好就留着，不好就卸了，试错成本低到几乎为零。

做什么？SalaryBeatTime，摸鱼神器

第一个插件，我想搞简单点的。别一上来就整大活，先跑通流程再说。

就做一个 SalaryBeatTime（薪跳时刻） 💰------输入你的月薪，状态栏实时显示你已经赚了多少钱。看着数字一秒一秒往上跳，搬砖都更有劲了。至于输不输入真实月薪，看你胆子------别被同事瞄到就行。

功能拆解下来其实就几个：

状态栏展示：实时显示已赚金额和工作时长
配置项：月薪输入、每日工作时间设置
计时逻辑：工作/休息
数据持久化：关了 VSCode 再打开还能接着算

简单吧？简单就对了。第一个项目，先跑起来。

AI 开发 VSCode 插件

我之前完全没有开发过 VSCode 插件，属于纯新手入门，索性直接让 AI 帮我规划开发方案。

AI 很快给出了规整的整体规划，把功能模块和实现思路都梳理得明明白白：状态栏用 vscode.StatusBarItem，配置读取用 vscode.workspace.getConfiguration，数据持久化靠 globalState，计时功能用 setInterval，就连各个模块怎么串联、项目文件怎么组织都讲得一清二楚。

我快速检查了一遍方案，功能逻辑上没什么大问题，就直接让 AI 生成完整代码了。

实际体验下来还挺惊喜的，AI 不只是写业务逻辑代码，连调试必备的 launch.json 配置文件都一并生成好了，超出我的预期。它对完整开发流程的理解很到位，不是单纯输出函数，而是从「能本地运行、直接调试」的角度完整输出内容。

代码生成后，本地加载插件的流程也很简单：

执行 npm install 安装项目依赖
按下 F5 启动调试，VSCode 会自动打开扩展开发宿主窗口
在新窗口中就能直接测试插件功能了
在扩展商店里能看到插件完整的介绍页面，终端里一条 vsce publish 搞定打包发布。
基本功能验证通过，接下来就该上架了。

设计风格

插件状态栏可实时展示核心数据，直观显示「已赚:¥847.54 | 工作: 02:59:00」等信息，数值动态刷新、实时跳动，数据变化一目了然。同时配备休息倒计时功能，兼顾工作与休息，让编程创收更有仪式感和动力。

视觉层面也做了细节优化，状态栏配色会随工作时长动态变化，工作时间越久，配色越深，直观体现工作积淀。同时内置下班倒计时提醒，清晰掌控工作进度，高效规划办公时间。

VSCode插件多窗口计时竞态问题

插件开发完成测试后，发现一个隐蔽的功能性Bug：VSCode多窗口同时打开插件时，计时数据会出现丢秒、精度丢失问题，核心是多窗口共享globalState引发的读-改-写竞态冲突。

问题复现与根因

原有插件采用 setInterval 定时累加 模式，所有 VSCode 窗口独立运行计时任务，却共用同一份 globalState 全局存储，由此引发竞态问题。

多窗口会在同一时刻读取到相同的旧计时数据，各自独立累加计算。由于各窗口写入时机不同，后写入的数值会覆盖先写入的数值，直接导致不同窗口展示的计时数据不一致、无法同步。

核心修复思路

放弃原有「定时读取-累加计算-定时写回」的模式，改用时间戳实时计算方案，从根源杜绝读写竞态：

不再持续累加、更新存储的计时数值，仅持久化核心基准数据：开始时间戳、总暂停时长、最后暂停时间
所有计时数值不提前存储，每次UI渲染、数值更新时，通过当前时间实时计算得出结果
针对暂停场景，通过扣除累计暂停时长，保证计时结果精准无误
核心计算逻辑统一、无读写冲突，所有窗口基于同一套基准数据实时运算，天然保证多窗口数据一致性：

ini 复制代码

const accumulatedSeconds = Math.floor(
  (Date.now() - startTimestamp - totalPausedMs) / 1000
);

开发复盘

本次优化全程借助AI落地代码重构与逻辑适配，但问题发现、根因定位、方案选型均需要自主判断。AI可以高效完成代码迭代、逻辑落地、语法适配等执行层工作，但无法主动预判业务场景的隐性缺陷、识别底层原理性Bug。技术方案的核心思路、风险规避、场景适配，依旧需要开发者自主把控。

上架，比想的简单

功能验证完，开始走发布流程。先进入 Marketplace 的管理页面：

整体不复杂，但有几个坑值得提一下。大致步骤：

1. 创建 Azure DevOps 组织

这是前置条件，需要微软账号。去 dev.azure.com 注册就行，免费。

2. 创建发布者

去 marketplace.visualstudio.com/manage 创建你的发布者身份，后面所有插件都挂在这个身份下。刚创建完就是这个"It's lonely here!"的空状态。

3. ****vsce publish ****打包发布

先 npm install -g @vscode/vsce，然后 vsce publish 一条命令搞定。

看到这个 "It's live!" 弹窗，你的插件就已经上线了。

列表里出现了 "薪跳时刻 - SalaryBeatTime" v1.0.0，正式上架。

踩坑点：

icon.png 必须真实存在 ------package.json 里声明了 icon 路径，但图片文件不存在的话，发布直接报错。别问我怎么知道的，问就是踩过。
README.md 不能为空------空 README 会被 Marketplace 拒绝。其实也不该空，好歹写个使用说明，对用户负责。
Personal Access Token 要选对 scope ------创建 PAT 的时候，Organization 要选"All accessible organizations"，Scopes 里要选"Marketplace → Manage"。不然 vsce publish 会报 401。

写在最后

这就是个图一乐的项目，但做下来确实感受到了 AI 编程带来的变化。

以前"想做个东西"到"做出来"之间，隔着不少功夫。------查文档、写样板代码、配调试环境、处理各种边界情况。这些东西不难，但磨人。很多人大概就是在这些磨人的环节里把想法搁置了。

现在这条路短了很多。你负责想清楚做什么和怎么做，AI 帮你把活干了。遇到 bug 你负责定位问题，AI 帮你改。虽说是摸鱼插件，但这个开发体验本身还挺好的。

如果你也有个想做的小东西，不妨试试。先跑起来再说。想体验的话，VSCode 扩展商店搜SalaryBeatTime （薪跳时刻） 就行。