首先理解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，生态成熟，调试方便。
创建项目结构：
/my-lang-server /client # VSCode 扩展部分 /server # 语言服务器逻辑 package.json
安装核心依赖：
npm install vscode-languageserver vscode-languageserver-textdocument npm install -D typescript ts-node @types/node
3. 实现语言服务器（Server）
在 /server/src/server.ts 中创建主入口：
import {
createConnection,
TextDocuments,
ProposedFeatures,
InitializeParams,
InitializeResult
} from 'vscode-languageserver';
import { TextDocument } from 'vscode-languageserver-textdocument';
// 创建双向连接
const connection = createConnection(ProposedFeatures.all);
// 管理打开的文档
const documents: TextDocuments = new TextDocuments(TextDocument);
// 初始化钩子
connection.onInitialize((params: InitializeParams): InitializeResult => {
return {
capabilities: {
textDocumentSync: documents.syncKind,
completionProvider: { triggerCharacters: ['.'] }
}
};
});
// 注册补全功能
connection.onCompletion(() => {
return [
{ label: 'hello', kind: 1 },
{ label: 'world', kind: 1 }
];
});
// 文档变更监听
documents.listen(connection);
connection.listen();
4. 创建 VSCode 客户端扩展（Client）
在 /client/src/extension.ts 启动服务器进程：
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
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';
let client: LanguageClient;
export function activate(context: ExtensionContext) {
const serverModule = context.asAbsolutePath(path.join('..', 'server', 'out', 'server.js'));
const serverOptions: ServerOptions = {
run: { module: serverModule, transport: TransportKind.ipc },
debug: {
module: serverModule,
transport: TransportKind.ipc,
options: { execArgv: ['--nolazy', '--inspect=6009'] }
}
};
const disposable = new LanguageClient(
'myLang',
'My Language',
serverOptions,
{ documentSelector: [{ language: 'javascript' }] }
);
context.subscriptions.push(disposable.start());
}
更新 package.json 添加激活事件：
"activationEvents": [
"onLanguage:javascript"
],
"contributes": {
"languages": [{
"id": "javascript",
"aliases": ["JavaScript"]
}]
}
5. 编译与调试配置
添加 tsconfig.json 配置：
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"outDir": "./out",
"rootDir": "./src",
"strict": true
},
"include": ["src"]
}
在 .vscode/launch.json 中设置调试：
{
"name": "Run Extension",
"type": "pwa-extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
"outFiles": ["${workspaceFolder}/client/out/**/*.js"]
}
6. 常见功能扩展示例
你可以逐步添加如下功能：
-
跳转定义：实现
connection.onDefinition() -
悬停提示：监听
onHover，返回 Markdown 内容 -
诊断错误：用
connection.sendDiagnostics标记语法问题 -
代码格式化：注册
documentFormattingProvider
例如诊断示例：
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 });
});
基本上就这些。完成上述步骤后，F5 启动调试，新窗口中打开 JS 文件，就能看到补全建议。后续可根据具体语言需求集成解析器（如 Tree-sitter、ANTLR）。
