Void 代码编辑器 TypeScript Web/WASM 语言服务器浏览器内类型获取与虚拟 node_modules 架构解析【免费下载链接】void开源AI代码编辑器Cursor的替代方案。项目地址: https://gitcode.com/GitHub_Trending/void2/void导读本文深入剖析 Void 代码编辑器VS Code 开源分支中 TypeScript 语言服务器在 Web/WASM 环境下运行的实现方案聚焦 extensions/typescript-language-features/web/README.md 所描述的两大核心技术基于 tsserver 自身Automatic Type AcquisitionATA的全局类型缓存以及用AutoInstallerFs 虚拟文件系统按需构造node_modules的模拟依赖解析。读完本文你将掌握如何在浏览器中完整跑起 TS/JS 智能感知IntelliSense开发环境如何开启TypeScript Experimental Tsserver Web: Enable Project Wide Intellisense等实验性配置以及vscode-global-typings、vscode-node-modules、memfs等虚拟文件系统 scheme 之间的映射与回退原理。一、背景为什么浏览器里的 TypeScript 语言服务器需要一套全新文件系统传统的 tsserver 进程运行在 Node.js 环境中可以直接访问磁盘上的node_modules、读取package.json、监听文件变化。但在浏览器/Web Worker 环境中这些能力统统不存在没有进程、没有本地磁盘、没有fs模块。Void 的 TypeScript 扩展因此在 Web 端采用了WASM 化的 tsserver——把typescript/lib/tsserverlibrary编译进浏览器通过同步 APIvscode/sync-api-client桥接扩展主线程与 Web Worker让 tsserver 的ServerHost所有文件系统回调都重定向到虚拟文件系统提供方FileSystemProvider。这段架构可以从 web/src/serverHost.ts 看到createServerHost接收ts、apiClient、args等参数构建出一个实现ts.server.ServerHost接口的对象其readFile、fileExists、directoryExists、readDirectory、getModifiedTime等全部经由apiClient.vscode.workspace.fileSystem转发到扩展侧注册的虚拟文件系统。而整个 worker 的入口在 web/src/webServer.ts它监听message事件获取args与三个MessagePortsync、tsserver、watcher解析启动参数后创建PathMapper、FileWatcherManager与createSys最终setSys(sys)并startWorkerSession(...)启动会话。文档给出三条快速上手命令用于在本地同时启动 VS Code 本体、Web 侧编译产物与浏览器开发服务器npm i # 安装 vscode 本身仓库根目录 npm run watch-web # 编译 Web 侧产物 node root/scripts/code-web.js --coi # 以 COOP/COEP 启动 Web 服务最后一条命令会打开浏览器窗口此时需要在地址后追加?vscode-coi以启用Shared Array Buffer跨源隔离完整地址形如http://localhost:8080/?vscode-coi--coiCross-Origin-Isolated与?vscode-coi是 Web Worker 场景下共享内存通信的前提缺失会导致同步文件读取与类型获取无法正常工作。二、全局类型缓存基于 tsserver ATA 的vscode-global-typings2.1 适用场景与开启方式Web 端项目级智能感知默认不开启需要手动打开实验性开关。在 VS Code 设置Ctrl-,中搜索TypeScript Experimental Tsserver Web: Enable Project Wide Intellisense对应底层配置项为typescript.tsserver.web.projectWideIntellisense.enabled默认值为true见 package.json但其真正生效还依赖启动参数--enableProjectWideIntelliSenseOnWeb的传递。修改后可能需要刷新页面reload才能生效。该功能主要服务于普通.js文件中对没有类型声明依赖的补全场景。文档给出的例子是在一个依赖未内置类型的项目里新建file.js并在文件顶部写入import lodash from lodash;稍等片刻后lodash的补全、跳转定义Go To Def / Source Def等智能感知能力即可正常工作。这个场景完全依托 tsserver 自身的Automatic Type Acquisition能力tsserver 在 Node 端会调用 npm 安装types/*包而在 Web 端这一安装动作被替换为下载类型包并写入内存文件系统。2.2 类型缓存的落盘位置与 scheme 设计ATA 产出的类型包被模拟成一个全局类型缓存存储位置为/vscode-global-typings/ts-nul-authority/project这是一个以vscode-global-typings为 scheme 的虚拟文件系统路径背后由内存文件系统MemFs支撑。注册代码位于 src/filesystems/ata.tsregisterAtaSupport会先检查浏览器是否支持ReadableByteStreams不支持则直接禁用然后通过conditionalRegistration依赖typescript.tsserver.web.typeAcquisition.enabled配置默认true见 package.json满足条件后同时注册两个FileSystemProvidervscode-global-typings→new MemFs(global-typings, logger)ATA 写入的全局类型缓存vscode-node-modules→new AutoInstallerFs(logger)模拟node_modules的按需安装文件系统下文详述。MemFs的实现位于 src/filesystems/memFs.ts它维护一棵以FsDirectoryEntry目录与FsFileEntry文件为节点的内存树提供stat、readDirectory、readFile、writeFile、createDirectory、delete、watch等完整的FileSystemProvider接口。文件内容以Uint8Array形式保存mtime/ctime用Date.now() / 1000打时间戳所有写操作都会通过_emitter派发onDidChangeFile事件——这正是文档所说的in-memoryMemFsFileSystemProvider。2.3 tsserver 与 ATA 的桥接细节从 web/src/serverHost.ts 的createSys可以看到两个关键启动参数--enableProjectWideIntelliSenseOnWeb开启 Web 项目级智能感知才会创建ClientConnection与ApiClient并注入fs--experimentalTypeAcquisition开启实验性类型获取此时serverHost的readFile、fileExists、getFileSize、directoryExists、getModifiedTime、readDirectory等文件系统回调在常规 URI 读取失败后都会回退到mapUri(uri, vscode-node-modules)映射的虚拟路径再读一次见 serverHost.ts 等处的 try/catch 回退逻辑。这两个参数的传递在 src/tsServer/serverProcess.browser.ts 完成当配置webTypeAcquisitionEnabled且浏览器支持ReadableByteStreams时追加--experimentalTypeAcquisition否则追加--disableAutomaticTypingAcquisition。而 tsserver 侧的类型安装请求由 web/src/typingsInstaller/typingsInstaller.ts 的enqueueInstallTypingsRequest承接接收 tsserver 传出的Project、TypeAcquisition配置与unresolvedImports列表——即哪些import需要触发类型获取完全复用了 tsserver 内置的 ATA 机制。三、模拟node_modulesAutoInstallerFs 的按需虚拟依赖安装3.1 为什么.ts文件不直接走 ATA对于普通.ts文件以及依赖解析过程中的常规路径文档明确说明不会走 tsserver 的 ATA而是使用一个独立的AutoInstallerFs来创建虚拟的node_modules按需把需要的包解压/提取到内存MemFs中。触发条件是工作区中任何项目在任何时间对node_modules目录发起的文件系统操作。依赖树的解析使用真实的package.json并在存在时结合package-lock.json锁定版本。3.2 URI 重定向的完整链路文档给出的关键映射链如下当访问memfs:/path/to/node_modules/lodash/lodash.d.ts时该 URI 会被重定向为vscode-node-modules:/ts-nul-authority/memfs/ts-nul-authority/path/to/node_modules/lodash/lodash.d.ts并最终送达AutoInstallerFs处理。这个映射由 web/src/pathMapper.ts 的mapUri完成把任意 scheme 的 URI 统一改写成目标 scheme如vscode-node-modules若原 URI 没有 authority 则补上占位ts-nul-authority路径部分则拼接为/${原scheme}/${原authority}${原path}从而完整保留原始 URI 的三段信息。在 tsserver 侧的反向映射由filePathToResourceUripathMapper.ts完成tsserver 暴露的路径形如/vscode-node-modules/ts-nul-authority/...会被解析回scheme/authority/path三段ts-nul-authority会被特殊处理为空 authority。AutoInstallerFs内部的MappedUri类src/filesystems/autoInstallerFs.ts同样负责这种双向解析并从扁平路径中还原出原始 URI。3.3 按需安装的触发与缓存AutoInstallerFs实现了完整的FileSystemProvider但writeFile、rename、delete、createDirectory四个写操作直接抛出not implementedautoInstallerFs.ts——它是只读的写入工作由内部MemFs与PackageManager完成。核心逻辑在ensurePackageContentsautoInstallerFs.ts快速路径过滤路径不包含node_modules直接抛FileNotFound标准库相关路径node_modules/typescript、node_modules/types/typescript__同样直接拒绝这些文件由扩展自身的 lib 文件dist/browser/typescript/*.d.ts见 pathMapper.ts提供不走虚拟安装。定位项目根getProjectRoot通过正则^(.*?)\/node_modules截取项目根并在该根下验证真实存在package.jsonautoInstallerFs.ts。并发去重_projectCacheMaproot, Promise按项目根缓存正在进行的安装同一项目根的并发读取会复用同一个安装 Promise避免重复解析。解析并还原用vscode/ts-package-manager的PackageManager.resolveProject(root, opts)读取真实package.json必需、package-lock.kdl可选、package-lock.json可选见getInstallOptsautoInstallerFs.ts随后调用proj.restore()把整个依赖树解压进内存MemFs。3.4 假装存在的目录技巧AutoInstallerFs.stat还有一个细节autoInstallerFs.ts凡是路径 basename 为node_modules或types的目录一律无条件返回一个目录 stat大小 0、类型 Directory也就是说假装这些目录总是存在。这是为了让 tsserver 的模块解析器在尚未真正安装任何包之前就能把node_modules当作可遍历目录从而顺畅地发起对内部条目的访问触发后续的按需安装。四、文件监听在 Web 端如何工作浏览器没有fs.watch因此 tsserver 的文件监听也被替换为FileWatcherManagerweb/src/fileWatcherManager.ts。tsserver 的watchFile/watchDirectory回调被转成watchFile/watchDirectory/dispose消息通过watcherMessagePort 投递到扩展主线程主线程收到事件后回调updateWatch把create/change/delete事件翻译成ts.FileWatcherEventKindCreated0 / Changed1 / Deleted2再按注册的 file/directory watcher 分发回调。值得注意的两点lib 文件不监听looksLikeLibDtsPath的路径/lib.*.d.ts直接返回 noop watcher因为 Web 上这些只读文件不会变化fileWatcherManager.ts。类型获取双监听当enabledExperimentalTypeAcquisition开启且路径命中node_modules且非vscode-global-typingsscheme时watchFile会对同一个文件同时注册两个 watcher——原始 URI 与映射后的vscode-global-typingsURIfileWatcherManager.ts从而让全局类型缓存里的变更也能驱动 tsserver 的增量更新。五、从配置到运行的完整参数链路综合 package.json、src/configuration/configuration.ts 与 web/src/serverHost.tsWeb 类型获取相关配置可归纳如下配置项默认值scope说明typescript.tsserver.web.projectWideIntellisense.enabledtruewindow启用/禁用 Web 端项目级智能感知需 VS Code 运行在可信上下文中对应启动参数--enableProjectWideIntelliSenseOnWebtypescript.tsserver.web.projectWideIntellisense.suppressSemanticErrorsfalsewindow即使开启项目级智能感知也压制语义错误在未开启/不可用时总是生效typescript.tsserver.web.typeAcquisition.enabledtruewindow启用/禁用 Web 端包获取对 import 的包提供智能感知依赖projectWideIntellisense.enabled当前 Safari 不支持配置的读取链路在 configuration.tsreadProjectWideIntellisenseEnabled返回configuration.get(typescript.tsserver.web.projectWideIntellisense.enabled, true)readWebTypeAcquisition读取typescript.tsserver.web.typeAcquisition.enabled默认true而suppressSemanticErrors的最终值等于webTypeAcquisitionEnabled configuration.get(...suppressSemanticErrors, false)——即语义错误压制只在类型获取开启时按用户意愿生效。这些配置最终在 serverProcess.browser.ts 与 webServer.ts 汇合主线程根据配置拼装启动参数worker 侧读取--enableProjectWideIntelliSenseOnWeb与--experimentalTypeAcquisition两个标志前者决定是否建立同步文件系统桥接后者决定是否在常规读取失败后回退到vscode-node-modules虚拟文件系统二者共同决定 Web 类型获取整条链路是否激活。六、两条类型获取路径的分工总结场景触发机制落盘位置底层文件系统.js文件 无类型声明的依赖如import lodash from lodashtsserver 内置 Automatic Type AcquisitionATA/vscode-global-typings/ts-nul-authority/projectMemFsvscode-global-typingsprovider.ts文件 任何对node_modules的文件系统操作AutoInstallerFs按需解析package.json/package-lock.json并还原依赖树内存中的虚拟node_modulesAutoInstallerFsvscode-node-modulesprovider内部仍是MemFs两条路径均以按需为核心前者由 tsserver 的 ATA 自行决定拉取哪些types包后者由实际的文件系统访问触发解析并缓存到_projectCache。它们共同解决了浏览器端没有 npm registry 安装能力的前提下TypeScript/JavaScript 智能感知对第三方类型声明的基本需求。读者可在 extensions/typescript-language-features/web/README.md 之外结合 src/filesystems/ata.ts、src/filesystems/autoInstallerFs.ts、src/filesystems/memFs.ts 与 web/src/serverHost.ts 四个文件完整还原该机制的每一处细节。【免费下载链接】void开源AI代码编辑器Cursor的替代方案。项目地址: https://gitcode.com/GitHub_Trending/void2/void创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考