在Visual Studio代码中创建自定义语言 [英] Create Custom Language in Visual Studio Code

查看:674
本文介绍了在Visual Studio代码中创建自定义语言的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有一种方法可以扩展Visual Studio Code中支持的语言/语法? 我想添加自定义语言语法,但是我找不到任何有关如何提供语言服务的信息.

Is there a way to extend the supported languages/grammars in Visual Studio Code? I'd like to add a custom language syntax, but I've not been able to find any information on how language services are provided.

任何人都可以指向现有语言实现的任何参考或示例吗?

Can anybody point to any references or even examples of existing language implementations?

推荐答案

使用新版本0.9.0可能.有关如何添加自定义语言的官方文档: https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

It's possible with the new version 0.9.0. There's an official documentation on how to add a custom language: https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

您需要使用.tmLanguage文件添加要添加的语言.您可以找到现有文件,例如在GitHub上,或者您可以定义自己的语言文件.查看此处以了解如何创建一个的想法: http://manual.macromates.com/zh-CN/language_grammars

You need a .tmLanguage file for the language you want to add. You can find existing files e.g. on GitHub or you can define your own language file. Look here to get an idea of how to create one: http://manual.macromates.com/en/language_grammars

找到.tmLanguage文件后,您可以通过两种方法来创建扩展名.

After finding a .tmLanguage file you have two ways to create an extension based on it.

选项1:使用Yeoman生成器

  • 安装node.js(如果尚未安装)
  • 通过执行npm install -g yo
  • 安装yo(如果尚未完成)
  • 安装Yo生成器以获取代码:npm install -g generator-code
  • 运行yo code并选择New language support
  • 按照说明进行操作(定义.tmLangauge文件,定义插件名称,文件扩展名等)
  • 生成器使用当前工作目录中的插件名称为扩展名创建目录.
  • Install node.js (if you haven't already done)
  • Install yo (if you haven't already done) by executing npm install -g yo
  • Install the Yo generator for code: npm install -g generator-code
  • Run yo code and select New language support
  • Follow the instructions (define the .tmLangauge file, define the plugin name, file extensions etc.)
  • The generator creates a directory for your extension with the name of the plugin in your current working directory.

选项2:自行创建目录

  • 使用您的插件名称(仅小写字母)创建目录.假设我们称它为mylang.
  • 添加一个子文件夹syntaxes并将.tmlanguage文件放置在其中
  • 在扩展文件夹的根目录下创建文件package.json,其内容如下所示:

  • Create a directory with the name of your plugin (only lowercase letters). Let's say we call it mylang.
  • Add a subfolder syntaxes and place the .tmlanguage file inside of it
  • Create a file package.json inside the root of the extension folder with content like this

{
    "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代码

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

Copy the extension folder to the extension directory. This is:

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

Mac/Linux $HOME/.vscode/extensions

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

Restart Code. Now your extension will run automatically everytime you open a file with the specified file extension. You can see the name of the used plugin in the down right corner. You can change it by clicking on the name of the extension. If your extension is not the only one registered for a specific file extension then Code may chooses the wrong one.

这篇关于在Visual Studio代码中创建自定义语言的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆