如鱼饮水
·
使用 Vibe Coding 编写一个属于自己的 VSCode 插件
内容提要
作者比较了VSCode和Typora的优缺点，Typora支持实时预览和图片引用，而VSCode在数学公式输入上更便捷。为了解决VSCode无法预览图片的问题，作者开发了插件，通过手动搭建框架实现了动态加载图片路径和支持图片链接的功能，最终代码基本满足个人需求。
关键要点
-
作者比较了VSCode和Typora的优缺点，Typora支持实时预览和图片引用，VSCode在数学公式输入上更便捷。
-
为了解决VSCode无法预览图片的问题，作者开发了插件，通过手动搭建框架实现动态加载图片路径和支持图片链接的功能。
-
Typora支持通过YAML Front Matter指定图片路径，而VSCode的图片路径设置与Hexo不兼容。
-
作者尝试使用opencode项目和vibe coding来开发插件，最初的尝试未能成功，主要问题在于插件的注册和文档内容获取方法错误。
-
作者手动搭建项目架构，成功实现了markdown-it插件，能够修改图片的路径。
-
通过动态获取YAML Front Matter中的typora-root-url，解决了图片路径的滞后性问题。
-
作者实现了在编辑界面预览图片和链接跳转的功能，但在图像预览和链接下划线长度上遇到了一些问题。
-
最终的代码放在了vscode-markdown-hexo仓库，虽然存在一些bug，但基本满足个人需求。
-
作者对vibe coding的经历持正面评价，认为AI在逻辑上强于事实核查，未来可以尝试让AI分析VSCode源代码。
延伸解读
VSCode与Typora的比较
在选择编辑工具时，VSCode和Typora各有优劣。Typora的实时预览和图片引用功能使其在视觉编辑上更具优势，而VSCode在数学公式输入方面更为便捷。用户应根据自己的需求选择合适的工具，尤其是在处理图片和公式时，考虑到两者的不同路径设置和功能特性。
插件开发的挑战
开发VSCode插件时，作者遇到了注册和文档内容获取的困难。这表明，尽管有现成的工具和框架，开发者仍需深入理解其工作原理。对于初学者来说，建议在开发前仔细阅读官方文档，以避免常见的错误和陷阱。
动态加载图片路径的解决方案
作者通过动态获取YAML Front Matter中的typora-root-url，解决了图片路径滞后性的问题。这一方法展示了如何灵活应对插件开发中的实际问题，强调了在开发过程中不断调整和优化的重要性。
AI在插件开发中的应用
作者对使用AI进行插件开发的体验持正面评价，认为AI在逻辑推理上表现优于事实核查。这提醒开发者在依赖AI时，仍需保持批判性思维，尤其是在处理复杂功能时，结合官方文档和源代码分析可能会更有效。
延伸问答
VSCode和Typora各自的优缺点是什么？
Typora支持实时预览和图片引用，而VSCode在数学公式输入上更便捷。
如何解决VSCode无法预览图片的问题？
通过开发插件，手动搭建框架，实现动态加载图片路径和支持图片链接的功能。
作者在开发VSCode插件时遇到了哪些问题？
主要问题在于插件的注册和文档内容获取方法错误，导致插件无法正常工作。
作者是如何实现动态加载图片路径的？
通过动态获取YAML Front Matter中的typora-root-url，解决了图片路径的滞后性问题。
插件的最终代码存放在哪里？
最终的代码放在了vscode-markdown-hexo仓库。
作者对vibe coding的评价是什么？
作者对vibe coding的经历持正面评价，认为AI在逻辑上强于事实核查。
