首先理解LSP架构，使用TypeScript+Node.js搭建服务端与客户端，通过vscode-languageserver实现通信，注册补全等功能，再创建VSCode扩展激活服务器，配置调试环境后逐步扩展跳转、诊断等特性。
搭建一个 VSCode 语言服务器，核心是理解 Language Server Protocol (LSP) 的工作原理，并使用合适的工具实现服务端和客户端的通信。以下是一个完整、实用的实现指南，帮助你从零构建一个基础但可扩展的 VSCode 语言服务器。
1. 理解 LSP 架构
LSP 是微软定义的一套标准协议，允许编辑器（如 VSCode）与语言服务器分离。服务器负责语法分析、补全、跳转等功能，通过 JSON-RPC 与客户端通信。
关键点：
- VSCode 客户端发送请求（如“用户按了 Ctrl+Space”）
- 语言服务器处理请求并返回结构化响应
- 通信基于 stdin/stdout 的 JSON-RPC 消息格式
2. 技术选型与项目初始化
推荐使用 TypeScript + Node.js，生态成熟，调试方便。
创建项目结构：
<font face="monospace"> /my-lang-server /client # VSCode 扩展部分 /server # 语言服务器逻辑 package.json </font>
安装核心依赖：
<font face="monospace"> npm install vscode-languageserver vscode-languageserver-textdocument npm install -D typescript ts-node @types/node </font>
3. 实现语言服务器（Server）
在 /server/src/server.ts 中创建主入口：
<font face="monospace">
import {
createConnection,
TextDocuments,
ProposedFeatures,
InitializeParams,
InitializeResult
} from 'vscode-languageserver';
<p>import { TextDocument } from 'vscode-languageserver-textdocument';</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9236" title="Video To Markdown"><img
src="https://img.php.cn/upload/skill/000/000/081/179249047014013.jpg" alt="Video To Markdown" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9236" title="Video To Markdown">Video To Markdown</a>
<p>分析任意YouTube、Facebook或Instagram视频链接，结合AI视觉分析提取的画面，生成全面的Markdown参考文档。</p>
</div>
<a href="/xiazai/skill9236" title="Video To Markdown" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p>// 创建双向连接
const connection = createConnection(ProposedFeatures.all);</p><p>// 管理打开的文档
const documents: TextDocuments<TextDocument> = new TextDocuments(TextDocument);</p><p>// 初始化钩子
connection.onInitialize((params: InitializeParams): InitializeResult => {
return {
capabilities: {
textDocumentSync: documents.syncKind,
completionProvider: { triggerCharacters: ['.'] }
}
};
});</p><p>// 注册补全功能
connection.onCompletion(() => {
return [
{ label: 'hello', kind: 1 },
{ label: 'world', kind: 1 }
];
});</p><p>// 文档变更监听
documents.listen(connection);
connection.listen();
</font>4. 创建 VSCode 客户端扩展（Client）
在 /client/src/extension.ts 启动服务器进程：
<font face="monospace">
import * as cp from 'child_process';
import * as path from 'path';
import { ExtensionContext, languages, workspace } from 'vscode';
import { LanguageClient, ServerOptions, TransportKind } from 'vscode-languageclient/node';
<p>let client: LanguageClient;</p><p>export function activate(context: ExtensionContext) {
const serverModule = context.asAbsolutePath(path.join('..', 'server', 'out', 'server.js'));</p><p>const serverOptions: ServerOptions = {
run: { module: serverModule, transport: TransportKind.ipc },
debug: {
module: serverModule,
transport: TransportKind.ipc,
options: { execArgv: ['--nolazy', '--inspect=6009'] }
}
};</p><p>const disposable = new LanguageClient(
'myLang',
'My Language',
serverOptions,
{ documentSelector: [{ language: 'javascript' }] }
);</p><p>context.subscriptions.push(disposable.start());
}
</font>更新 package.json 添加激活事件：
<font face="monospace">
"activationEvents": [
"onLanguage:javascript"
],
"contributes": {
"languages": [{
"id": "javascript",
"aliases": ["JavaScript"]
}]
}
</font>5. 编译与调试配置
添加 tsconfig.json 配置：
<font face="monospace">
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"outDir": "./out",
"rootDir": "./src",
"strict": true
},
"include": ["src"]
}
</font>在 .vscode/launch.json 中设置调试：
<font face="monospace">
{
"name": "Run Extension",
"type": "pwa-extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
"outFiles": ["${workspaceFolder}/client/out/**/*.js"]
}
</font>6. 常见功能扩展示例
你可以逐步添加如下功能：
-
跳转定义：实现
connection.onDefinition() -
悬停提示：监听
onHover，返回 Markdown 内容 -
诊断错误：用
connection.sendDiagnostics标记语法问题 -
代码格式化：注册
documentFormattingProvider
例如诊断示例：
<font face="monospace">
documents.onDidChangeContent(change => {
const diagnostics = [];
const text = change.document.getText();
if (text.includes('error')) {
diagnostics.push({
severity: 1,
range: { ... },
message: 'Found "error"'
});
}
connection.sendDiagnostics({ uri: change.document.uri, diagnostics });
});
</font>基本上就这些。完成上述步骤后，F5 启动调试，新窗口中打开 JS 文件，就能看到补全建议。后续可根据具体语言需求集成解析器（如 Tree-sitter、ANTLR）。
