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

本文介绍了作者在《还在用Node.js吗?试试Bun.js》一文的启发下,如何使用Bun.js创建更快的JavaScript运行时,并通过VSCode插件开发将BunRun命令集成到编辑器中。作者详细记录了创建VSCode插件的过程,包括使用yo generator-code脚手架、设置激活事件、贡献点和VSCode API。最后,作者分享了已发布的Bun插件,用户可以在VSCode中通过BunRun命令运行 TypeScript 或 JavaScript 文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在 《 还在用 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 命令并执行它:

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

运行成功 🥳

接下来来了解一下 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值