vscode 关闭typescript红色_VS Code 一些有意思的新特性 - Web Worker

本文介绍了VS Code利用Web Worker扩展线程以实现插件在纯浏览器环境运行的尝试。通过重构文件系统并利用BrowserFS、MemoryFS等,插件可以在不依赖Node.js的情况下运行。VS Code的Enable web worker extension host设置预示着官方也在探索这一方向。尽管不是所有插件都适合Web Worker,如Debugger和Terminal,但TypeScript的tsserver.web已支持Web Worker,预计在ts 4.2版本可体验。
摘要由CSDN通过智能技术生成
前几个月拿到了 GitHub Codespaces 的 beta 版测试资格,正好这段时间也一直在做 KAITIAN 的架构改造,也参考了一些 VS Code 的实现,由于内容比较杂,所以把遇到的一些有意思的点分享一下(水一篇)。

Web Worker 扩展线程

看过专栏第一篇文章的同学应该知道,VS Code 插件运行在一个独立的 Node.js 进程中,这一架构也是社区开源的 Thiea 以及我所在的团队自研的 KAITIAN IDE 所采用的。在这个背景下,要想使用扩展能力,就必须在为每一个会话启动一个容器环境,以便能运行扩展以及实现文件编辑。在过去的一年,我们遇到了一些更个性化的定制需求,例如期望在没有容器的环境下能够复用编辑器+插件的能力,这有点类似早期的 CodeSandbox。

在这个过程中,我们将 KAITIAN 的文件系统进行重构并抽象成一层可替换的底层接口。这样一来便可以在不使用 Node.js 能力的情况下使用诸如 BorwserFS、MemoryFS 来为编辑器提供文件读写能力。

而对于插件我有个模糊的想法,是否可以将插件借助这个能力运行在纯浏览器环境下,例如 Web Worker 这种浏览器原生的多线程能力。经过短暂的尝试,将第一个插件(vscode-html-language-features)移植到 Web Worker 版本的过程中,偶然发现 VS Code 官方也有类似的方案,而经过更多的挖掘(啃源码),VS Code 也正在试图将编辑器与一些核心插件改造为纯浏览器可用的版本。

如果你打开最新版本(1.52 + )的 VS Code 设置并搜索 Worker ,则会发现在 Extensions 设置项中,有一个 Enable web worker extension host 选项。但实际上即便开启了这个选项,也不会有任何作用,不知道是不是实验性特性忘记关闭了。

09fa123d4ccb1a63ba7d7fd816dbec24.png

不过你仍然可以通过这个 VS Code Web Playground 来体验 Web Worker 扩展。

7e688a88b0d4b3529c0e2465a5915688.png

怎么判断加载的是 Web Worker 扩展呢?打开 Dev Tools - Network 标签,可以看到加载了很多 web worker 脚本。这其中就包含 Emmet、Merge Conflict、以及 TypeScript Language Features 插件。

bfdf333093c411ea06e72231c7374603.png

当然这只是测试版本,预计不久的未来就可以在 GitHub Codespaces 里体验到 Web Worker 版本的插件了。

TypeScript 的 tsserver.web

带着好奇心,我在 TypeScript 仓库里搜了一圈,发现了一个来自 VS Code 团队的 Pull Request。

Adds experimental support for running TS Server in a web worker #39656​github.com

目前这个 PR 经过 TypeScript 团队的 Review 已经合入了主分支,预计在 ts 4.2 版本就可以体验到。

关于具体的原理性解析有空我会写一篇文章来介绍(一定不鸽),当然略微熟悉 TypeScript 架构的同学从这个 PR 的内容应该也可以理解个大概。

所有的插件都可以运行在 Worker 线程吗?

很可惜答案是否定的,诚然 Web Worker 插件在 VS Code Web(或者说 Cloud IDE)环境下相比传统的 Node.js 插件有较大的优势,大幅度减小了 B/S 架构下的通信消耗,但也并不代表 Worker 插件可以完全替代所有 Node.js 插件。

Worker 能替代的是那些仅依赖或者完全不依赖文件读写的插件,但对于 Debugger、Terminal 这类插件,无论如何都无法通过 Worker 来模拟。

PS: 题图终于可以用我自己拍的照片了 ^_^

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值