其实，

前言

在编写 VS Code 插件时你可能会遇到两类常见痛点：

• 插件代码可以调用 vscode.commandsvscode.window却根本操不了编辑器的 UI。
• 某个插件出现死循环或异常，导致整个工作台卡顿、甚至崩溃。

这并不是因为 VS Code 功能不足，而是它采用了进程隔离 + RPC 协议的设计理念。

为什么 VS Code 必须支持插件？

痛点：如果把所有功能都写进编辑器本体。VS Code 会变得臃肿、启动慢，且难以满足各种语言的需求。

• 功能拓展需求：使用者想要的功能千差万别，单靠内置实现根本不可能覆盖全部。老实说，
• LSP 的历史渊源：最初 VS Code 团队只支持少数语言。通过 Language Server Protocol 把语言服务交给插件，实现了「代码跳转、语法诊断、代码高亮」等能力的外包。不过，

插件为什么不能直接跑在 renderer 里？

主要痛点：第三方插件若直接运行在 UI 主线程，就会出现以下风险：

1. 稳定性问题：死循环或大量 CPU 占用会导致编辑器卡顿甚至崩溃。老实说，
2. 安全/边界问题：插件可以随意访问 DOM、React 组件。绕过官方 API 任意修改内部状态。

extensionHost 到底隔离了什么？

• 运行环境：插件代码在独立的 utilityProcess/extensionHost 进程中执行。
• UI 实现：插件没有直接操作 React/DOM 的权限。
• 插件出错只会影响自身，不会拖垮整个工作台。
• 只能通过官方提供的

为什么 extensionHost 与 renderer 必须通过 RPC 协作？

Pain point: 你在调试时经常看到「调用了 .executeCommand,但没有任何响应」。这正是因为跨进程调用需要统一协议来包装成「本地方法」的形式。

• `postMessage` 只能搬运数据；RPC 在此之上提供「请求‑响应」模型，让跨进程调用看起来像普通函数调用。
• `RPC` 把方法名、参数、返回值封装为消息，实现了可等待和错误传播。

RPC 到底是怎么通信的？

P1这方面。利用 Proxy 捕获方法调用

const proxy = new Proxy({},{
get {
console.log;return => {
console.log;说起来，console.log;}，}
});proxy.sayHello;proxy.openFile;其实，

*这里展示了 Proxy 的两步拦截：先拦截属性读取。再返回一个实际执行时发送远端请求的函数。按理说，*

从P2来看。在 extensionHost 中创建本地对象并暴露给 RPC

const rpc = new RPCProtocol;const extHostCommands = rpc.set);

`rpc.set` 把本地实例登记到一个 . 在这张表里找到实例并执行对应方法。

至于P3，Renderer 侧获取代理对象并调用远端方法

class ExtensionService {
async start {
const rpc = new RPCProtocol;this._extHostCommands = rpc.getProxy;// 注册命令时使用代理
this.commandService.registerCommand({
id,handler: => this._extHostCommands.$executeContributedCommand
});}
}

`rpc.getProxy` 返回一个 Proxy。对任意属性都会走 `_remoteCall` → `protocol.send` → `postMessage` 的方法，把请求发给 extensionHost。

P4这方面，消息收发细节

// 发起请求
_remoteCall {
const id = ++this._lastId;return new Promise => {
this._pending.set;this._protocol.send;})，}
// 接收端处理
_receive{
if {
const target=this._locals.get;const fn=target?.，if{
return this._protocol.send;}
try{
const result=await fn.apply;this._protocol.send;}catch{
this._protocol.send;}
}else{
// reply
const pending=this._pending.get;话说回来，ifreturn;if pending.reject);else pending.resolve;按理说，}
}

*主要每一次 `proxy.method` 都会变成一条跨进程请求——而且支持异步返回。*

package.json 中的 contributes 声明了什么？不过，

Pain point: 当你打开命令面板却找不到自己写的命令时大多数情况下是忘记在 `package.json` 中声明。按理说，

{
"contributes": {
"commands":
}
}

• This does **not** execute command.
• The editor now knows:
  • a command ID exists → show it in palette;
  • The ID can be referenced by or extensions.

The actual implementation lives in activation code:

vscode.commands.registerCommand => {
vscode.window.showInformationMessage;})，

The two‑step design enables **lazy loading** – VS Code can list all commands without activating every extension.

activationEvents：何时激活

{
"activationEvents":
}

• If a command is invoked or a language file opens → corresponding extension is loaded.
• This prevents dozens甚至上百个 在启动时全部被加载，从而避免启动慢、内存使用爆炸的问题。说起来，

一个插件命令从声明到可执行。完整经历哪些步骤，

1. #加载插件 & 扫描静态说明： 主进程创建 `utilityProcess` 并启动 `extensionHost`。老实说，随后扫描使用者目录与内置目录。把每个 `package.json` 中的 `contributes` 与 `activationEvents` 收集到内存中。
2. #渲染层注册代理命令： Renderer 向自己的 `#commandService.registerCommand` 注册 **占位** 命令。这些占位仅包含 ID 与标题，真正的处理函数指向后面将要创建的 RPC proxy。
3. #使用者触发命令 → 命令面板执行： 当使用者在命令面板选择 `"demo.sayHello"` 时：
   1. `commandService.executeCommand` 找到对应占位 handler；说起来，
   2. `handler` 通过 `$activateByEvent` 懒激活对应
   3. {激活完成后} 调用 `$executeContributedCommand` → RPC 请求发送至 extensionHost。
4. #extensionHost 接收请求并执行实际逻辑： 收到 `$executeContributedCommand` 后：
   1. `ExtHostCommands.$executeContributedCommand` 在本地查找已经注册好的 handler；

深入看 Extension Host 如何加载 & 激活

#加载入口文件

const req = createRequire);const mod = req;// 自动把 plugin 根目录设为模块解析根
if await mod.activate;

#注入专属 vscode API

const originalLoad = Module._load;Module._load = function{
if{
return extensionApis.get || {};}
return originalLoad.call;}，...
extensionApis.set(ext.id,createVSCodeApi
);currentExtensionId = ext.id;其实，// 为后续 require 做上下文绑定

#createVSCodeApi：把 VS API 包装成 RPC 调用

export function createVSCodeApi{
const mainCmd = rpc.getProxy;return {
commands:{
registerCommand{
extHostCommands.registerCommand;mainCmd.$registerCommand;// 同步到 renderer
return {dispose{extHostCommands.unregister;mainCmd.$unregisterCommand;} }，},executeCommand{
return mainCmd.$executeCommand;老实说，}
}，// window、languages、workspace 等子对象同理省略…}，}

Renderer 层如何把“占位”命令映射到真实实现？

private _registerCommands{
for{
const disposable=this.commandService.registerCommand({
至于id。cmd.command,title:cmd.title,handler: async =>{
await this._extHostExtensions.$activateByEvent;return this._extHostCommands.$executeContributedCommand;}
})，disposables.push;}
}

从*关键点*来看，即使忘记在代码里 注册。只要声明了 `"contributes.commands"`，Renderer 已经帮你做好“占位”。真正业务逻辑仍然由 Extension Host 完成。这保证了 UI 与业务解耦，也防止因 UI 改动导致所有旧插件失效。

为何 Main 不做中间人？

为什么 VS Code 能支持海量语言？

*Pain point*: 当你打开一个不常见的文件类型，却发现没有任何补全或诊断信息。 这正是因为语言服务被外包给了独立的 而不是硬编码进编辑器主要。

​​ ​ ​ ​ ​ ​ ​ ​ ​ ​​ ​ ​​ ​​ ​​ ​​ ​ Oops. Need to correct final section. Let's rewrite that part correctly.
• Pain point 1: Extension code can call ,but it cannot directly modify editor UI.
• Pain point 2: A misbehaving third‑party plugin may freeze or crash whole workbench.
• The root cause is **process isolation + RPC** – extensions run in a separate extensionHost 。while UI lives in renderer process.
• If every possible feature were baked into core editor it would become huge and slow to start.
• The original driver was language support – only a few languages were built‑in. By exposing LSP y let anyone write a language server as an extension.
• A language service includes jump‑to‑definition,diagnostics,syntax highlighting…all provided by extensions rar than by core.

---

插件为何不能直接跑在 renderer 中？

Pain Point  :   如果让第三方代码直接运行在 UI 主线程，它可能

Sorry for that glitch—let's continue cleanly.

---

隔离内容概览

隔离维度	目的与好处
运行环境	\u2026 插件运行于独立 \u003Ctt\u003EutilityProcess\u003C/tt\u003E。话说回来，
\u2026 没有直接访问 React / DOM 权限。
\u2026 出错只影响自身，不拖垮工作台。
\u2026 所有能力必须走 \u003Ctt\u003Evscode API\u003C/tt\u003E 请求。
\u2026 主进程仅负责创建通道。不参与业务逻辑，以免成为瓶颈。<\/table> 为什么必须使用 RPC 而非裸 \u0060postMessage\u0060? \u0060postMessage\u0060 vs \u0060RPC\u0060 postMessage RPC 关注点 “怎么把数据搬过去？” “怎么像本地函数一样调用远端，并得到返回值？” 特性 单向/双向消息，无关联上下文 请求–响应模型、Promise 支持、错误传播、自动序列化/反序列化 实现方式 浏览器原生 API 基于 postMessage 封装的一层协议。用 Proxy 拦截成员访问后发送请求 好处 简单快速 开发者可以像普通 JavaScript 调用一样使用跨进程对象 RPC 工作流程简图 mermaid sequenceDiagram Renderer->-Extension Host: proxy.method Note right of Renderer: _remoteCall -> send Extension Host-->Renderer: reply 深入解析 RPC 实现细节 再看第一步先，Proxy 捕获方法调用 javascript const proxy = new Proxy({},{ get{ // ←读取属性名，例如 sayHello return =>{ // ←返回真正发送请求的方法 console.log;/* 此处会走 _remoteCall */ };} })，按理说，proxy.sayHello;*关键点*：属性读取 与实际调用 `) 是两步分开的。这正好匹配“先拿到方法名，再把参数一起发送”的需求。 至于接下来，Extension Host 注册本地实现并暴露给 RPC javascript const rpc = new RPCProtocol;rpc.set)，// 本地 Map 保存实例 从内部结构类似来看，typescript class RPCProtocol{ private readonly _locals=new Map;其实，set:T{ this._locals.set;return instance;} } ：Renderer 获取 代理对象 并调用远端方法 javascript class ExtensionService{ async start{ const rpc=new RPCProtocol;this._extHostCommands=rpc.getProxy<'ExtHostCommands'>;话说回来，// 使用示例： await this._extHostCommands.$executeContributedCommand;} } getProxy 实现 javascript getProxy:T{ return new Proxy,{ get{ return =>this._remoteCall;} }) as T，} 从第四步来看，_remoteCall 将请求封装为消息 javascript _remoteCall{ const id=++this._lastId;怎么说呢，return new Promise=>{ this._pending.set;this._protocol.send;// postMessage });} 再看第五步，接收端的 _receive 完成实际执行 javascript _receive{ if{ const target=this._locals.get;const fn=target?.，if{ return this._protocol.send;} try{ const result=await fn.apply;this._protocol.send;其实，}catch{ this._protocol.send;按理说，} }else{ // reply const pending=this._pending.get;ifreturn，msg.error?pending.rej):pending.res;} } 再看*结论*，一次 `proxy.xxx` 完全等价于一次跨进程函数调用。而且通过 Promise 可以自然地进行异步等待。 痛点示例 当你打开命令面板却找不到自己写好的命令，大多数情况是忘记在 `package.json` 声明。json { "contributes": { "commands": } } 这段配置仅告诉 VS Code： 有这样一个 command ID → 它应该出现在 Command Palette。 主程序能够识别这个 ID 并为其分配唯一位置。 真正的业务实现仍需在激活阶段手动注册： javascript vscode.commands.registerCommand=>{ /* …*/ })， 为什么要拆成两步？ 懒加载 – 编辑器可以列出所有命令而不必立即激活每个 从而保持启动速度。说起来， 解耦合 – 当 UI 实现改变。只要 API 不变，所有已注册的命令依旧有效。话说回来， activationEvents —— 控制何时激活 json { "activationEvents": } 只有满足上述条件之一时Extension Host 才会加载对应入口文件并执行 activate。 一个插件命令从声明到可执行——完整流程图 1️⃣ 扫描阶段 • Electron 主进程启动独立 utilityProcess 并建立 MessagePort 通道。• Extension Host 扫描使用者目录 & 内置目录，把每个 的 package.json 信息放入 _extensions 数组。 2️⃣ Renderer 注册占位命令 • 渲染层收到已安装 列表后遍历其 contributes.commands使用如下代码注册“占位”： javascript this.commandService.registerCommand({ 从id来看。cmd.command,title: cmd.title,handler:=>this.handleCmdFromRenderer }); 其中 handler 会先懒激活对应 接下来通过 RPC 调用真实实现。 3️⃣ 使用者触发 javascript commandService.executeCommand;// → 找到占位 handler → 激活 → $executeContributedCommand via RPC 4️⃣ Extension Host 接收并执行 javascript // ExtHostCommands.ts async $executeContributedCommand{ const handler=this._handlers.get;if throw new Error;return await handler;// 真正业务逻辑，如 showInformationMessage } 5️⃣ 结果回传 & UI 展示 RPC 自动把返回值或错误包装为 reply 消息送回 Renderer。随后 Promise resolve 并完成最终 UI 更新。 示例最小化入口 typescript import * as vscode from 'vscode';export function activate{ ctx.subscriptions.push( vscode.commands.registerCommand('myHello.sayHello',=>vscode.window.showInformationMessage) );} export function deactivate{} 说到两大技术难点。 1️⃣ 相对方法解析 – Extension Host 使用 Node 的 createRequire 创建一个基于 根目录的新 require，使得内部相对导入始终指向正确位置。 javascript const req=createRequire);const mod=req;话说回来，// 自动以 plugin 根目录为基准解析其它文件 if await mod.activate; 2️⃣ 注入专属 vscode API – 在 CommonJS 加载阶段拦截 'vscode' 请求。返回当前 专属的 API 对象，而不是全局共享实例。 javascript const origLoad=Module._load;Module._load=function{ if return extensionApis.get||{};return origLoad.call;}，// 为每个 准备独立 API 实例： extensionApis.set(ext.id,createVSCodeApi);currentExtId=ext.id;按理说， createVSCodeApi 主要片段 javascript export function createVSCodeApi{ const mainCmd=rpc.getProxy;return { commands:{ registerCommand{ extHostCmds.registerCommand;// 本地登记 mainCmd.$registerCommand;// 同步到 renderer return {dispose{…}}，},executeCommand:id=>mainCmd.$executeCommand }。window:{ /* showInformationMessage 等均走 proxy */ },…话说回来，// languages/workspace 等同理省略 };} 渲染层如何映射“占位”→真实实现？ javascript private _registerCommands{ for{ this.commandService.registerCommand({ 从id来看。cmd.command,title:cmd.title,handler: async =>{ // ★ 懒激活 ★ await this._extHostExtensions.$activateByEvent;// 调用真实实现 return this._extHeadCommands.$executeContributedButton;} })，按理说，} } 即使忘记手动 注册，只要声明了 "contributes.commands"Renderer 已经帮你做好“占位”。真正逻辑仍然由 Extension Host 完成，这保证了 UI 与业务解耦，也防止因 UI 改动导致旧插件失效。 性能调整 – Direct Renderer ↔︎ Extension Host communication removes an unnecessary hop. 实现复杂度 – If Main forwarded every message it would need to maintain two independent protocol stacks. 频繁通信负载 – Extensions exchange many messages . 把这些都压在 Main 上会拖慢整个 IDE 启动和渲染速度。怎么说呢， Pain point: 打开某种罕见语言文件却没有补全或诊断信息。从答案是来看，主要只负责识别文件类型并加载对应语言服务器 具体补全、跳转等功能全部交给这些独立 完成。这种“网站 + 插件”模式让编辑器保持轻量，而环境可以无限增长。 The isolation rule: extensionHost ≠ renderer<\/tt>. Plugins never touch DOM directly. The communication contract: All intents are expressed via stable \ vscod e api<\/kbd><\/tt>. The host decides how to fulfill m. The transport layer: RPC over postMessage<\/tt>. It turns remote calls into local‑like Promise APIs. This design protects against: • Plugin crashes causing whole IDE freeze. • Future internal refactors breaking third‑party plugins. • Startup bloat caused by eager loading all extensions. The combination of strict process boundaries and a well‑defined protocol is *** VS Code can safely host thousands of extensions while staying fast and stable. Understanding se layers lets you debug “*** my command isn’t running”。“*** my plugin hangs”,or “how to build a custom bridge” without digging blindly into source code.

。

---