how to create Syntax Highlight for your DSL in visual studio code

visual studio code的语法高亮分为两部分:一部分是使用textmate的语法规则把自己的DSL分割成不同的Tokens,如果我们给Token起的名字是符合它的一套规范的话,vs code会根据当前的Theme来渲染我们的DSL。

也就是说,如果一般我们只需要完成第一步,就可以让vs code,来渲染我们的语法高亮了。
更进一步的是,vs code还允许我们给已经有的语言语法高亮做扩展,这样我们需要做的东西就更少了。
下面我以我们的DSL为例子,来进行说明。
我们的语言是以Python为base的,所以我只需要给我们的语言中的keyword加上语法高亮就可以了。

  1. Install Node.js and Git, then install Yeoman and VS Code Extension Generator
  2. Install vs code
  3. yo code to create a new language scaffold. and change some inputs to adapt your DSL
    下面是我的package.json文件, 关键是injectTo熟悉。
{
    "name": "Dummy",
    "displayName": "Dummy_highlight",
    "description": "Dummy program highlight",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.40.0"
    },
    "categories": [
        "Programming Languages"
    ],
    "contributes": {
        "grammars": [
            {
                "injectTo": [
                    "source.python"
                ],
                "scopeName": "source.Dummy",
                "path": "./syntaxes/Dummy.tmLanguage.json"
            }
        ]
    }
}
  1. 修改syntaxes目录下的Dummy.tmLanguage.json文件,加入我们的keyword就可以了
{
  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
  "name": "Dummy",
  "scopeName": "source.Dummy",
  "injectionSelector": "L:source.python",
  "patterns": [
    {
      "include": "#keywords"
    }
    
  ],
  "repository": {
    "keywords": {
      "patterns": [
        {
          "name": "keyword.control.common",
          "match": "\\b(Version|include|Import|default)\\b"
        },
        {
          "name": "keyword.other.common2",
          "match": "\\b(for|if|while)\\b"
        }
      ]
    }
    
  }
  
}

  1. 如何debug
    用vs code打开上面的目录,转到Debug视图,点击下面这个三角,启动debug就可以了;
    如果我们当中改动了上面的两个配置文件,只有在debug启动的vs code中,使用Ctrl+R,来使我们的改动生效,就可以了。
    在这里插入图片描述
  2. 完成后的效果如下,Version,include和Import被高亮了。
    在这里插入图片描述

your first extension in vs code
syntax highlight in vs code

发布了420 篇原创文章 · 获赞 29 · 访问量 94万+

猜你喜欢

转载自blog.csdn.net/lantianjialiang/article/details/103293408
今日推荐