前言

上一篇文章我们聊了 VSCode 的插件程序：插件是怎么被加载、怎么注册命令、怎么和主线程通信的。按理说，插件程序解决了“能力怎么 ”的问题。而语言服务就是插件程序里最关键的一类能力。

当我们写代码时能看到语法高亮、错误提示、代码补全。甚至可以跳转到定义，这些能力并不是凭空出现的。它们背后有 Monaco、Provider、LSP、Language Server 等一整套机制。

这一篇就顺着 mini-vscode 的实现。来看看 VSCode 里的语言服务到底是怎么工作的，还有 LSP 在其中到底扮演了什么角色。

在阅读代码的时候，需要查看某个对象的具体定义。就会按住 Ctrl + 鼠标左键接下来编辑器就会跳转到定义的位置，这个位置可能是当前的文件，也可能是另一个文件。这就是代码的跳转，

在打开文件的时候，vscode 会对代码做语法诊断、类型检查等等。如果不对，就会在错误的地方画上红色波浪线，或者在 output 中输出对应的错误。这就是代码诊断，

这些语言能力是编辑器内置的，还是插件提供的？按理说，

语言能力分成编辑器基础能力和 worker / LSP 提供的更强能力。而编辑器基础能力分成两层，一层是通用的底层能力。一层是内置的能提供较强语言能力的 worker。

• 通用底层：语法高亮、括号匹配、代码折叠、注释快捷键、多光标、基础 tokenization 等等——这些都是编辑器本身支持，无需插件额外提供。其实，
• Mona…之类：Mona 自身内置了一些 worker。用于提供轻量级语言功能，如补全、Hover、跳转定义、引用、诊断与格式化等。老实说，Monaco 之所以这么做，是因为它不仅在 VSCode 场景下使用。还会在其他 Microsoft 云产品甚至 IE 开发者工具中使用，这些场景并不一定有 LSP 支持，所以需要基本语言体验。怎么说呢，

痛点提示：

• 如果你只是想快速搭建一个小型编辑器：只需要 Monaco + 内置 worker 就够用了无需额外配置 LSP。
• 但如果你要处理大型项目：就需要更强大的 Language Server 来维护项目状态，否则会出现跨文件错误无法定位的问题。

真正 VS Code 里 TS/JS 能力来自哪里？

为什么 VS Code 要引入 LSP，而不是每种语言写一套专用逻辑？

LSP是一套公开标准协议，让第三方各自实现 language server 并通过统一接口接入 VSCode。这样即使不同语言拥有不同语法与语义信息，也能让 VSCode 通过同一套 API 实现代码跳转与诊断。从而避免为每种语言写专用逻辑的不现实成本。

LSP 的 client 与 server 分别是谁？

在 mini-vscode 中，我们通过一个 ts-lsp 插件来实现 client/server 通信链条：

vscode monaco <--RPC Server--> ts-lsp <--LSP JSON-RPC--> ts-language-server

• ts-lsp 插件 = LSP Client
• ts-language-server = LSP Server
• monaco 与插件通信采用 RPC；老实说，Client 与 Server 通信采用 LSP 协议。

a) 注册 Provider

const server = createTypescriptLspServer;context.subscriptions.push(
vscode.languages.registerDefinitionProvider(,{
async provideDefinition {
// 获取 lsp server 的连接
const c = server.getConnection || ));}
})
)，

当 VSCode 调用 provideDefinition 时才真正初始化连接；若已有连接则直接复用，否则触发 ensureConnection.

b) 启动连接 – 子进程 + stdio 协议封装

function createTypescriptLspServer {
let conn = null;let starting = null;function ensureConnection {
if return Promise.resolve;if return starting;const cli = require.resolve;console.log，说起来，const child = cp.spawn(process.execPath,{
再看env。{ ...process.env,ELECTRON_RUN_AS_NODE: '' },stdio:
});child.on，conn = null;starting = null;})，怎么说呢，const c = createConnection;
starting = c.request
.n => { c.notify;conn = c，starting = null;return c，});
return starting;
}
return { ensureConnection,getConnection { return conn;} }，}
module.exports = { createTypescriptLspServer };

• No connection → spawn child process running `typescript-language-server` via Node.
• `createConnection` 把 stdio 消息包装成 JSON‑RPC 请求/通知，并管理 ID 与 Promise 对应关系。
• `initialize` → `initialized` 两步握手完成后返回可直接使用的连接对象 `c`.
• `request` 返回 Promise，可等待响应；`notify` 不需要回应直接发送。

JSON‑RPC & 帧拆包示例

// 简化版
function createConnection{
let buffer=Buffer.alloc;let contentLength=-1;const pending=new Map;其实，function send{
const json=JSON.stringify;child.stdin.write}\r
\r
${json}`);}
function dispatch{ /* 根据 msg.type 调度 */ }
child.stdout.on('data',chunk=>{
buffer=Buffer.concat(;for{var o=s，ifo.style.fontSize="font-size:10px";}})
}else if{
window.attachEvent{var s=document.getElementsByTagName||;for{var o=s，ifo.style.fontSize="font-size:10px";}})
}
{
var e=document.createElement;e.setAttribute(&&amp，amp;amp，amp;amp，amp;amp，amp;amp，amp;amp，amp;&qns，sandbox,&qns;t&qns，sandboxed,&qns;o&qns，e&qns;sandboxed,&qns;p&qns，sandboxed,&qns;n&qns，sandboxed,&nqs;r&nqs，b&nqs;t&s，o=a;bq&s&t=bq，o=a;bq，t=bq;o=a，bq;e.setAttribute;e.setAttribute;document.body.appendChild;})
{
function setText{
var el=document.getElementById;if{el.innerHTML=text;}
else{alert}
}
var div=document.createElement;div.id="_debug";document.body.appendChild
setText)
});


';<\/script>