VSCode插件开发实战_构建自定义语言支持-VSCode-PHP中文网

VSCode插件开发实战_构建自定义语言支持

betcha

发布： 2025-11-23 19:44:02

原创

163人浏览过

首先通过yo code初始化VSCode插件项目，接着定义TextMate语法实现高亮，然后使用vscode-languageserver构建语言服务器支持智能提示，最后测试并打包发布插件。

vscode插件开发实战_构建自定义语言支持

想让你的语言在编辑器里“活”起来？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 字段中注册该语法：

"grammars": [
  {
    "language": "yourlang",
    "scopeName": "source.yourlang",
    "path": "./syntaxes/yourlang.tmLanguage.json"
  }
]

登录后复制

3. 实现语言服务器（LSP）功能

要支持补全、跳转、悬停提示等功能，需集成语言服务器协议（LSP）。使用 vscode-languageserver 库构建服务端。

FUDforum论坛

FUDforum(FUD论坛)是一个基于PHP+MySQL/PostgreSQL构建的开源论坛系统，支持多种语言包括简繁中文；采用模板系统来控制界面外观；基于角色的权限控制系统；提供短消息发送平台；提供审查和回收站系统；支持附件/投票/全文搜索/IP跟踪/用户禁用/电子报/自定义Tag/排列用户等级等。该版本支持静态论坛页、全局的通知、嵌套的子论坛和爬虫检测等功能；新增对DB2、SQL

119

查看详情

安装依赖：
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 中启动语言服务器进程。