在Visual Studio代码中创建自定义语言

Question

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

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

Answer 1

新版本0.9.0可以实现.有一个关于如何添加自定义语言的官方文档:https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.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代码

将扩展文件夹复制到扩展目录.这是:

• 在Windows上 %USERPROFILE%\.vscode\extensions

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

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

Answer 2

为了扩展Wosi 的.tmLanguage答案，使用.tmLanguage文件是可选的。使用正则.json是一个完全有效的 - 在我看来 - 更好的可读性替代方案。

有关示例，请参阅 VSCode_SQF：sqf.json

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

Answer 3

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

您可以在 plugins 文件夹中定义一个新插件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.registerexcept 的每个调用monaco.Modes.DeclarationSupport.register。

现在在 VSCode 中打开一个包含 .mylang 文件的目录，并通过 .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 行。

自己试试吧;-)

Answer 4

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

1. 按照Wosi 的回答中的选项 2 进行操作。您只需要两个文件即可开始。只需直接在扩展目录中创建文件夹结构即可。
   • 设置"path": "./syntaxes/your_language.plist"于package.json
2. 使用IRO构建您的正则表达式。
   • 确保在“范围信息”屏幕中，与 Textmate 有关的任何内容均呈绿色。不用担心其他编辑。
   • 将“Textmate”选项卡的内容保存到上面的路径中，即.syntaxes/your_language.plist
3. 重新加载 VSCode

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

Answer 5

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

https://github.com/microsoft/vscode/tree/main/extensions

您可以选择与您的语言语法接近的扩展名，并根据需要进行更改。（例如，您可以对 JavaScript 扩展进行一些修改，并将其重新命名以与 jQuery 一起使用！）

需要注意的是，如果您选择的语言与您想要的语言有很大不同，那么这将是一项繁重的工作！如果您未能找到与所需语言相似的语言，您可能需要从头开始创建一个全新的扩展 - /sf/answers/2309734801/ -。