我用 AI，20 分钟做了一个 VSCode 股票摸鱼插件

相信作为一个程序员 + 股民，每天都有同一个痛点：

看股票要切屏。

打开网页看行情，老板路过以为我在摸鱼；用手机看，低头抬头脖子疼。能不能直接在看代码的地方看股价？毕竟 VSCode 才是程序员真正的"工位"。

于是我决定：做一个 VSCode 插件，把股价钉在底部状态栏。

但我没打算自己写------我让 AI 帮我写。

过程：我只说了几句话

第一句话：描述需求

"帮我生成一个可以实时查看股票价格的 VSCode 插件，具有以下功能：1、配置股票代码显示股价，可以配置多个；2、在底部栏显示。"

我用的是阿里的Qoder，就这么一句话。AI 开始干活了。

不到两分钟，项目骨架就搭好了：

package.json --- 插件清单，包含配置项、命令注册、激活事件
tsconfig.json --- TypeScript 编译配置
src/extension.ts --- 核心代码：腾讯财经 API 拉数据、状态栏渲染、定时刷新
.vscode/launch.json --- F5 一键调试

我甚至没告诉它用哪个 API，它自己选了腾讯财经的 qt.gtimg.cn，免费、稳定、不用注册。

第二句话：加个配置界面

插件跑起来后，我发现每次改股票都要去 JSON 配置文件里手敲代码，太不优雅了。

"能不能把配置股票也做到配置界面上？"

AI 二话不说，生成了一个完整的 Webview 配置面板：

股票列表的增删改查
自定义确认弹窗（因为 VSCode 的 webview 不支持原生 confirm()）
刷新间隔设置
涨跌幅显示开关
适配 VSCode 深色/浅色主题

点击底部状态栏的股价，直接弹出配置面板。这个交互，比我自己想的还周到。

第三句话：修复中文乱码

跑起来后发现股票名称全是乱码。我截图告诉 AI：

"这个是乱码。"

AI 立刻定位到原因：腾讯 API 返回的是 GBK 编码，Node.js 默认按 UTF-8 解析，中文必然乱码。

它先尝试了 TextDecoder('gbk')，但在 VSCode 的 Electron 环境里这个 API 对 GBK 支持不稳定。最后用 iconv-lite 纯 JS 库完美解决，零依赖、跨平台、稳定可靠。

最终成品

这里是用trae测试，把股票名字修改一下，隐藏涨幅，只显示价格，是不是很隐秘

支持的市场

🇨🇳 沪市：sh600519（贵州茅台）
🇨🇳 深市：sz000001（平安银行）
🇭🇰 港股：hk00700（腾讯控股）

我的感受

AI 编程真正改变的不是速度，是门槛

以前做 VSCode 插件，我得先去翻官方文档：怎么注册命令、怎么写 package.json 的 contributes、Webview 怎么通信、StatusBarItem 的 API 是什么......

现在，我只需要知道我要什么。

AI 擅长的事

你仍然需要做的事

你从"写代码的人"变成了"审代码的人"。

如何使用这个插件

复制代码

# 克隆项目
git clone <项目地址>
cd stock_unit
 
# 安装依赖
npm install
 
# 编译
npm run compile
 
# 打包
npm run package
 
# 安装到你的 VSCode，或者手动添加插件
code --install-extension stock-unit-1.0.0.vsix --force

重启 VSCode，底部状态栏就会出现股票行情。

按 Ctrl+Shift+P → Stock Unit: 打开配置面板或者点击下方股票名称，添加你关注的股票。

写在最后

这个插件从需求到成品，我和 AI 总共对话了不到 10 轮。

它不是玩具------我现在每天都在用它。

AI 编程不是替代程序员，而是让程序员可以把精力放在真正重要的事情上。

比如，研究下一只该买的股票。

如果这个项目对你有帮助，欢迎点赞、在看、转发三连 👍

项目已开源，源码见：https://gitee.com/moreairmore/stock_unit

可以在gittee上下载stock-unit-1.0.0.vsix安装