niuhe 插件官方教程已经上线, 请访问: http://niuhe.zuxing.net

先来总结一下: vscode 编辑器本质上是一个运行在本地的 chrome webview 程序

在开发 niuhe 插件 的过程中, 有时需要打印变量信息进行调试, 比如使用console.log(entry); 查看变量enter 的值,以此了解程序的运行情况,在 debug 模式下, 这些输出信息可以在调试控制台上清晰看到,如下截图所示:
调试模式下
调试控制台查看 console.log 日志
然而,当插件在非调试模式下运行时,查看日志信息就成了一个难题。在网上搜索相关方法,却很难找到有效的解决方案。此前,公司 CTO 在使用 VS CodeLua Debug 插件调试 Lua 脚本时,就遇到了编辑器莫名卡死的情况。重启编辑器也无济于事,更换项目目录后,问题又偶尔自行恢复。在这种情况下,想要查看插件运行日志来定位问题,却遍寻无果,只能暂时搁置。

转机

事情出现转机是在一次调试 niuhe 插件 的过程中。当时,编辑器左下角弹出了一个警告提示框(此处截图仅作展示用途)
提示窗

出于好奇,点击该提示框后 vscodeDevTools 面板被打开,这一发现令人惊喜:原来 VS Code 编辑器竟然基于 Chrome 浏览器运行!DevTools 面板的打开入口并非难以寻觅,我们可以通过 帮助 -> 切换开发人员工具 来打开它。有了 DevTools 面板,之前 Lua Debug 插件的问题也就有了解决的方向。
vscode DevTools面板

联想和展望

回顾一下,在 VS Code 编辑器出现之前,Web IDE 的概念并不普及。而在 VS Code 问世后,各种 Web IDE 如雨后春笋般涌现。当时我略感惊奇,Web IDE 开发工程庞大,为何各大公司愿意投入大量人力去开发体验似乎并不出色的 Web IDE。在发现 VS CodeDevTools 面板后,这个疑问也就有了答案:各大公司推出的 Web IDE 实际上都是 VS Code 的线上版本,而 VS Code 本身就是运行在 Chrome WebView 套壳内的本地 Web 程序。

当下,CursorTrae 等 AI IDE 火爆异常。实际上,它们都是基于 VS Code 进行开发的。这也就意味着,能在 VS Code 上安装使用的插件,在 Cursor 和 Trae 中同样适用。

这些 AI IDE 所具备的 AI 功能,在 VS Code 上借助现有的插件,比如 Continue 等,也能够实现与之类似的 AI 编程功能。此外,MarsCode AI也即将推出 Builder 功能,届时它将拥有与 Cursor 相同的功能。

VS Code 为开发者提供了极为出色的基础,凭借其开放性和扩展性,吸引了众多开发者参与插件开发,构建起了一个丰富多样的生态系统,有力地推动了相关技术的发展和创新。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐