首先通过yo code初始化VSCode插件项目，接着定义TextMate语法实现高亮，然后使用vscode-languageserver构建语言服务器支持智能提示，最后测试并打包发布插件。
想让你的语言在编辑器里“活”起来？Visual Studio Code 提供了强大的 API，让开发者能轻松为自定义语言添加语法高亮、智能提示、代码跳转等核心功能。本文带你一步步从零开始，构建一个支持简单 DSL（领域特定语言）的 VSCode 插件。
1. 初始化插件项目
VSCode 官方提供 yo code 脚手架工具，可快速生成插件模板。确保已安装 Node.js 和 npm，然后执行：
- 安装 Yeoman 和 VSCode 生成器：
npm install -g yo generator-code - 运行生成器：
yo code - 选择“New Language Support”类型，填写语言名、文件扩展名等信息
完成后会生成包含 package.json、syntaxes/、snippets/ 等目录的基础结构。
2. 定义语法高亮（TextMate 规则）
VSCode 使用 TextMate 语法规则实现语法着色。在 syntaxes/ 目录下创建 yourlang.tmLanguage.json 文件。
以一个配置语言为例，匹配关键字和键值对：
{
"scopeName": "source.yourlang",
"patterns": [
{
"match": "\b(if|else|while)\b",
"name": "keyword.control.yourlang"
},
{
"match": "^\s*([a-zA-Z_][\w]*)\s*=",
"captures": {
"1": { "name": "entity.name.function.yourlang" }
}
},
{
"begin": """,
"end": """,
"name": "string.quoted.double.yourlang"
}
],
"repository": {},
"fileTypes": ["your"]
}
保存后，在 package.json 的 contributes 字段中注册该语法：
WordPress API Pro
下载
生产级WordPress REST API集成，用于管理文章、页面、媒体、WooCommerce产品、Elementor内容、SEO元数据、ACF及JetEngine字段
"grammars": [
{
"language": "yourlang",
"scopeName": "source.yourlang",
"path": "./syntaxes/yourlang.tmLanguage.json"
}
]
3. 实现语言服务器（LSP）功能
要支持补全、跳转、悬停提示等功能，需集成语言服务器协议（LSP）。使用 vscode-languageserver 库构建服务端。
- 安装依赖：
npm install vscode-languageserver - 创建
server.js，监听客户端请求：
const { createConnection, TextDocuments } = require('vscode-languageserver');
const connection = createConnection();
const documents = new TextDocuments();
connection.onInitialize(() => ({
capabilities: {
textDocumentSync: documents.syncKind,
completionProvider: { triggerCharacters: ['.'] }
}
}));
connection.onCompletion((params) => {
return [
{ label: 'startService', kind: 2 },
{ label: 'timeout', kind: 5 }
];
});
documents.listen(connection);
connection.listen();
在 package.json 中声明激活事件和服务器入口：
"activationEvents": [
"onLanguage:yourlang"
],
"main": "./extension",
"contributes": {
"languages": [{
"id": "yourlang",
"extensions": [".your"]
}]
}
并在 extension.js 中启动语言服务器进程。
4. 测试与打包发布
F5 启动调试模式，VSCode 会打开一个新窗口加载你的插件。创建一个 .your 文件测试高亮和补全是否生效。
确认无误后，使用 vsce 工具打包：
- 安装：
npm install -g vsce - 登录 Microsoft Marketplace
- 执行：
vsce publish直接发布，或vsce package生成 .vsix 文件本地安装
基本上就这些。掌握语法定义和 LSP 集成后，你可以逐步加入诊断检查、格式化、重命名等高级功能。自定义语言支持看似复杂，拆解后每一步都很清晰。
