我开发了一个利用 Bun 执行 .ts / .js 文件的 VS Code 插件
站长
· 阅读数 19
在 《 还在用 Node.js 吗？试试 Bun.js 》 文章中，看到了一个更快、更强的 JavaScript 运行时的出现，在使用 Bun 过程中，确实感受到了 Bun 运行快速方便，不过每次都从终端执行 bun run xxx.ts 确实有点蠢，刚好一直想尝试 VS Code 插件开发，那就 Action！
- 全局安装创建 VS Code 插件脚手架：
npm install -g yo generator-code
- 执行初始化项目命令:
yo code
➜ ~ yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? xxx
? What's the identifier of your extension? xxx
? What's the description of your extension? xxx
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? npm
-
按
Fn5进行调试，VS Code 会自动打开一个新窗口用于调试。 -
在新窗口
Cmd + Shift + P打开Command Palette，输入hello找到Hello World命令并执行它：
可以看到右下角输出了信息：
运行成功 🥳
接下来来了解一下 VS Code 插件。
Vscode 插件有三大核心要素：
- Activation Events：激活事件，在插件被激活后触发事件。
- Contribution Points：投放点，在 package.json 中静态声明去扩展 VS Code 的插件清单。
- VS Code API：插件用到的 API。
VS Code 插件实现机制：
总体来说，VS Code 插件实现机制不算复杂，想要深度开发，那需要熟悉官网和 API 调用。
目前个人开发的 Bun 插件已经发布到 MarketPlace，可以下载体验一下。
安装之后，在任意一个 .ts 或者 .js 文件，在 command palette 执行 Bun Run 命令：
