在 Visual Studio Code 中创建自定义语言

Posted 2023-02-15

技术标签:

【中文标题】在 Visual Studio Code 中创建自定义语言【英文标题】：Create Custom Language in Visual Studio Code 【发布时间】：2015-08-21 15:48:21 【问题描述】：

有没有办法扩展 Visual Studio Code 中支持的语言/语法？我想添加自定义语言语法，但找不到任何有关如何提供语言服务的信息。

任何人都可以指出现有语言实现的任何参考资料甚至示例吗？

【问题讨论】：

【参考方案1】：

新版本 0.9.0 可以实现。有一个关于如何添加自定义语言的官方文档：https://github.com/microsoft/vscode-docs/blob/main/release-notes/v0_9_0.md

您需要一个.tmLanguage 文件，用于您要添加的语言。您可以找到现有文件，例如在 GitHub 上，或者您可以定义自己的语言文件。看这里了解如何创建一个：http://manual.macromates.com/en/language_grammars

找到.tmLanguage 文件后，您有两种方法可以基于它创建扩展。

选项 1：使用 Yeoman 生成器

安装 node.js（如果您还没有安装）通过执行npm install -g yo 安装哟（如果您还没有完成）为代码安装 Yo 生成器：npm install -g generator-code 运行yo code 并选择New language support 按照说明操作（定义.tmLangauge 文件，定义插件名称、文件扩展名等）生成器为您的扩展创建一个目录，该目录使用您当前工作目录中的插件名称。

选项 2：自行创建目录

使用您的插件名称（仅小写字母）创建一个目录。假设我们称之为mylang。

添加一个子文件夹syntaxes 并将.tmlanguage 文件放入其中

在扩展文件夹的根目录内创建一个文件package.json，内容如下

 
     "name": "mylang",
     "version": "0.0.1",
     "engines": 
         "vscode": ">=0.9.0-pre.1"
     ,
     "publisher": "me",
     "contributes": 
         "languages": [
             "id": "mylang",
             "aliases": ["MyLang", "mylang"],
             "extensions": [".mylang",".myl"]
         ],
         "grammars": [
             "language": "mylang",
             "scopeName": "source.mylang",
             "path": "./syntaxes/mylang.tmLanguage"
         ]

最后将您的扩展添加到 Visual Studio Code

将扩展文件夹复制到扩展目录。这是：

在Windows上%USERPROFILE%\.vscode\extensions

在Mac/Linux上$HOME/.vscode/extensions

重启代码。现在，您的扩展程序将在您每次打开具有指定文件扩展名的文件时自动运行。您可以在右下角看到使用的插件的名称。您可以通过单击扩展名来更改它。如果您的扩展名不是为特定文件扩展名注册的唯一扩展名，那么 Code 可能会选择错误的扩展名。

【讨论】：

我收到 languageFileName is not defined 错误。见过那个吗？需要注意的是，scopeName 必须与.tmLanguage-file 中的相同如果我为已经支持的语言编写语言支持，我应该怎么做才能确保代码使用我的扩展并禁用其他的仅功能？我们如何定义一个新的扩展名（例如.mylang），它基于已经存在的语法（比如说html文件），但有一些区别？例如。我想为 HTML 模板文件定义一个自定义语法，为此我想为我的文件创建一个新的 .mylang 扩展名。这些文件将包含 HTML + 该模板语言添加的一些结构（.mylang，例如循环、插值等的关键字）。我们怎样才能做到这一点？谢谢！【参考方案2】：

要扩展Wosi's .tmLanguage answer，使用.tmLanguage 文件是可选的。使用常规的 .json 是一种完全有效的方法，而且在我看来，它的可读性更好。

例如，请参阅 VSCode_SQF：sqf.json

在package.json 中，您只需将路径从./syntaxes/mylang.tmLanguage 更改为./syntaxes/mylang.json。

【讨论】：

您可能还会看到文件扩展名为.tmLanguage.json。我不确定是否更具可读性，但您可以在编写语言 json 时包含此架构以获得智能感知： "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json", "name": "mylang", ...【参考方案3】：

使用逆向工程，您可以向 VSCode 添加新语言。您可以查看 typescript 如何作为 javascript 插件实现以及它如何通过管道与 node.exe 通信。但这是一件困难的事情，因为它完全没有文档我将在这里提供一个非常简短的文档：

您可以在插件文件夹C:\Users\USER\AppData\Local\Code\app-0.3.0\resources\app\plugins中定义一个新插件。

复制 typescript 插件文件夹并将所有文件中提到的文件扩展名和语言名称重命名为您的新语言，以便在打开 .mylang 文件时使用您的新插件。

在typescriptServiceClient.js 中，您看到一个子进程正在分叉，并且它的stdout 与new WireProtocol.Reader 耦合。绑定你自己的mylanguage.exe（你可能需要自己编写那个exe）。 VSCode 要求该二进制文件获取更多特定于语言的信息。

在typescriptMain.js 中，您可以找到该语言的功能注册。删除对monaco.Modes.XXXXXXSupport.register 的所有呼叫，monaco.Modes.DeclarationSupport.register 除外。

现在在 VSCode 中打开一个包含 .mylang 文件的目录，并通过CTRL+P + FileName 打开其中一个。右键单击标识符并选择Go to Definition。 VSCode 现在通过 StdIn 向您的 exe 发送这样的请求

"seq":1,"type":"request","command":"definition","arguments":"file":"d:/Projects/MyProj/Source/MyFile.mylang","line":45,"offset":9

VSCode 期望得到这样的答案：

Content-Length: 251
[LINE BREAK]
 "seq" : 1, "type" : "response", "command" : "definition", "request_seq" : 1, "success" : true, "body" : [ "file" : "d:/Projects/MyProj/Source/MyOtherFile.mylang", "start" :  "line" : 125, "offset" : 3 , "end" :  "line" : 145, "offset" : 11 ]

如果一切正常，VSCode 将打开 MyOtherFile.mylang 并将光标设置为第 3 列的第 124 行。

你自己试试吧;-)

【讨论】：

【参考方案4】：

恕我直言，截至 2021 年第二季度的最简单食谱：

package.json

"path": "./syntaxes/your_language.plist"

.syntaxes/your_language.plist

就是这样。我还将 IRO（左窗格）文本保存到我自己的项目中。

【讨论】：

IRO 太棒了，感谢您的提示！现在，如何为自定义语言添加简单的智能感知？ 基于单词的补全，正如他们所说的那样。【参考方案5】：

您可以在线阅读内置语言扩展的源代码：