我开发了一个利用 Bun 执行 .ts / .js 文件的 VS Code 插件

在 《 还在用 Node.js 吗？试试 Bun.js 》 文章中，看到了一个更快、更强的 JavaScript 运行时的出现，在使用 Bun 过程中，确实感受到了 Bun 运行快速方便，不过每次都从终端执行 bun run xxx.ts 确实有点蠢，刚好一直想尝试 VS Code 插件开发，那就 Action！

1. 全局安装创建 VS Code 插件脚手架：

npm install -g yo generator-code
1

2. 执行初始化项目命令: 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 按 Fn5 进行调试，VS Code 会自动打开一个新窗口用于调试。

4. 在新窗口 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 命令：

REFERENCE

[1] https://code.visualstudio.com/api

我是 Pandy，一个喜欢英语的程序猿 👨‍💻

关注公众号 Yopth，回复「加群」，加入「英文技术翻译互助群」，我们加入一起充电英语 🔌