visual studio code的语法高亮分为两部分:一部分是使用textmate的语法规则把自己的DSL分割成不同的Tokens,如果我们给Token起的名字是符合它的一套规范的话,vs code会根据当前的Theme来渲染我们的DSL。
也就是说,如果一般我们只需要完成第一步,就可以让vs code,来渲染我们的语法高亮了。
更进一步的是,vs code还允许我们给已经有的语言语法高亮做扩展,这样我们需要做的东西就更少了。
下面我以我们的DSL为例子,来进行说明。
我们的语言是以Python为base的,所以我只需要给我们的语言中的keyword加上语法高亮就可以了。
- Install Node.js and Git, then install Yeoman and VS Code Extension Generator
- Install vs code
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"
}
]
}
}
- 修改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"
}
]
}
}
}
- 如何debug
用vs code打开上面的目录,转到Debug视图,点击下面这个三角,启动debug就可以了;
如果我们当中改动了上面的两个配置文件,只有在debug启动的vs code中,使用Ctrl+R,来使我们的改动生效,就可以了。
- 完成后的效果如下,Version,include和Import被高亮了。