我开发了一个利用 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. 执行初始化项目命令: 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. Fn5 进行调试,VS Code 会自动打开一个新窗口用于调试。

  2. 在新窗口 Cmd + Shift + P 打开 Command Palette,输入 hello 找到 Hello World 命令并执行它:

我开发了一个利用 Bun 执行 .ts / .js 文件的 VS Code 插件_第1张图片

可以看到右下角输出了信息:

我开发了一个利用 Bun 执行 .ts / .js 文件的 VS Code 插件_第2张图片

运行成功

接下来来了解一下 VS Code 插件。

Vscode 插件有三大核心要素:

  • Activation Events:激活事件,在插件被激活后触发事件。
  • Contribution Points:投放点,在 package.json 中静态声明去扩展 VS Code 的插件清单。
  • VS Code API:插件用到的 API。

VS Code 插件实现机制:

我开发了一个利用 Bun 执行 .ts / .js 文件的 VS Code 插件_第3张图片

总体来说,VS Code 插件实现机制不算复杂,想要深度开发,那需要熟悉官网和 API 调用。

目前个人开发的 Bun 插件已经发布到 MarketPlace,可以下载体验一下。

我开发了一个利用 Bun 执行 .ts / .js 文件的 VS Code 插件_第4张图片
安装之后,在任意一个 .ts 或者 .js 文件,在 command palette 执行 Bun Run 命令:

我开发了一个利用 Bun 执行 .ts / .js 文件的 VS Code 插件_第5张图片

REFERENCE

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

我是 Pandy,一个喜欢英语的程序猿 ‍

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

你可能感兴趣的:(Bun,javascript,前端,Bun)