为何做这个插件。
本人习惯在 VSCode 里用 Markdown 来写文章然后复制发布到各个平台，虽然小红书也支持写长文，但只支持简单的格式，而且也不支持导入解析 Markdown 格式的文本。 所以萌生了想做一个 Markdown 转图片的 VSCode 插件的想法。很长时间没有使用 AI 编程做新项目了，正好拿这个小项目试试最新的 AI 编程的能力有多强大。
为什么选 Trae? 一是懒的折腾国外那些不能直接使用的工具，二是 Trae 免费的而且听说也还不错。
我是如何使用 Trae 来做这个项目的。
首先我得说明，我用 AI 编程用的不多用的也很浅，所以我的使用方式肯定有不正确的地方，仅供参考。
(1)先通过对话的方式来写一个需要文档保存在文件里。
你可以通过多次对话来完善最终的需求文档，需求文档的很多其它细节 Trae 会自动帮你写。
(2)在对话框里下达"实现需求文档里功能"的命令
下达这个命令后 Trae 就会从头到尾创建工程运行排错直到看起来能正常运行不出错，这种模式就相当省事体验非常好。
(3)通过对话的方式多次进行功能调整和迭代还有细节的优化。
这个环节就是功能和细节完善阶段了，一边描述问题和功能一边审核验证输出的代码，这块体验感觉不太好，输出的代码很多时候用不了，可能是我的提示词不太好，也可能是模型能力欠缺。
使用感受和碰到的问题
总的来说 Trae 在完成了整个项目的 70%,前面很快就把项目搭起来了，而且初步运行起来还可以。但后面随着功能的调整和细节的优化就感觉没那么好用了，也许是我用的方式不对，也许是本身模型能力不足，反正后面的代码大部分是自己写的。
总结起来碰到的问题有如下几个:
- 安装的第三方库是最新的，但生成的代码中接口的使用还是旧版本的。 比如 tailwindcss 安装的是 4.0，但集成的方式还是 3.xx 的版本的方式，导致莫名其妙的样式不生效的问题。 还有 snapdom 库，生成的代码中使用的还是旧版的接口和参数。
- 项目结构有点乱。 这个项目虽然是插件，但主要功能是在 vscode 内嵌的 webview 中显示 Markdown 的预览和转图片，所以本应该分成两个单独的工程。 然而 Trae 生成的代码直接把这两部分放在同一工程里，然后通过在 package.json 里配置不周的命令来运行插件或 web。 这种操作属实让我惊呆了，虽然也能正常运行，但我实在看不下去，于是手动调整了项目结构。
- Trae 很难发现自己犯的低级的错误 刚生成的代码启动调试时以为是正常的，但发现更改的代码无论如何都没生效，与 Trae 聊了很长时间，改了各种代码都没解决。后面只能自己慢慢摸索审核代码， 才发现 package.json 中配置的 vscode engines 版本比当前的 vscode 版本高很多，修改之后就能正常运行调试了。就这个问题花了我一天的时间。
- 稍微复杂点的算法自己写可能比 Trae 生成的更快更准确。 导出为图片时需要对预览的页面进行分页，分布算法和 Trae 沟通了很久始终无法生成比较满意的代码，后面就自己写，脑袋有想法就直接开始写，不用还想如何准确描述这个想法然后告诉 Trae 帮我实现，有时候把脑海里的想法准确的描述出来还是挺不容易的。
- Trae 会让你误以为普通功能实现起来应该是很简单很快的。
项目里有个切换代码主题的功能，代码块的样式美化是使用的 highlightjs 库，想着让 Trae 实现主题切换应该是非常容易的。
然而我竟然在这个功能上花了一天的时间，大无语。
起初 Trae 直接使用
import("xxx.css")方式动态加载不同的样式，然而运行的时候就报错。 把错误提示丢给 Trae 后就换成appendChild的方式动态加载，运行之后依然报错。 然后 Trae 就一直在这两个方案中来回切换彻底无解了。 这个时候就不得不自己仔细了解查资料分析问题了，经过谷歌搜索、github issus 搜索发现 vscode 插件中加载 webview 还是很不一样的，要实现这种功能最好是将 highlightjs 中的样式复制出来然后动态 appendChild 来切换。 就这么简单的功能花了一天时间，太不值了。
产品效果展示
首先是 Markdown 预览页,可以设置 Markdown 预览的主题和代码块的主题：
然后点击"导出预览"就可以看到 Markdown 转成图片前的分布效果，点击导出图片就可以了
功能简单，使用起来也非常简单。
打包发布上线。
打包上线就很简单了。
- 先创建发布者 去marketplace.visualstudio.com/上注册账号。 然后点击"Create a publisher"，填写发布者 ID、显示名称等信息。请记下你设置的发布者 ID。
- 在 vscode 插件工程中的 package.json 中配置创建发布者时填写的信息
- 最后打包并发布
先在插件工程根目录下执行打包命令
vsce package。 执行完后根目录下会有个xxx.vsix文件。将 vsix 文件上传到发布网站就可以了。 审核过程很快，十几分钟就审核通过并上线了。
在插件市场搜索"Markdown转图片"就可以看到并下载了。
