因为实验室最近在更改自己的前端框架。类型类似于vue/react，但是用法简单，主要是源码简单通俗易懂hhh。
于是自己打算写一个vscode插件来辅助开发。于是我就照着网上的教程自己做了一个。
下面是全过程。
语法高亮
先来个我插件的效果图：
大家注意字符串里的标签颜色。对标签 属性 表达式 括号 注释 都进行了上色。
相信大家用过react或者vue插件的，对.vue文件以及.jsx文件都比较熟悉。vue的template标签里是有语法高亮的。 jsx写法也有语法高亮。我们框架的模板来源就是模板字符串。然后进行编译解析。
我的做法：
新建一门语言比如.vue .jsx，我是搞不了的。我看了vscode的英文api，简直痛苦，终于试出来方法了。
我将我的语法嵌入到js文件或者ts中。编写正则匹配的json文件。而且字符串vscode在分词中是不会单独处理的。需要设置作用域的tokenTypes为others。通过正则去给匹配到的字符设置作用域。每个作用域会根据主题设置的颜色上色。
vscdoe的词法是textmate语法。我根据语法，先抓取到template函数的内部。然后抓取每个模板字符串。在字符串里匹配html标签。以及注释等等。再根据细节设置每个匹配结果的作用域名称。vscode根据作用域名称上色。
代码提示
照例先看效果：
我为框架的事件、指令、表达式提供了代码提示。并补全代码。关键字为：
x-
e-
x-=
e-=
.
- 当输入x-时，显示所有nodom支持的指令列表。
- 当输入e-时，显示常用的nodom事件列表。
- 在指令后输入=时，显示当前模块中model已定义的数据名。
- 在事件后输入=时，显示当前模块中methods内已定义的方法名。
- 在当前模块中model已定义数据后,在任意地方输入.可快速生成表达式。
示例：
如果我们的数据源model对象（参考vue的data,react的state）内有如下数据
model = {
num: 0,
AA:1,
add:'aa'
}
在模板中输入'.'，即可根据选择快捷生成表达式
{{num}} 或者{{AA}} 或者{{add}}
在使用指令时可以快捷编写代码
x-if={{AA}}
实现方法：判断当前输入的字符是是不是需要的字符。然后返回指令或者事件的列表。表达式需要用字符串遍历代码，拿到当前这个类的代码。使用newfucntion函数。将其转成js对象，那么对象内的属性和方法都可以取到了。
代码片段
比如生成一个模块，在js/ts中输入ncm,待提示框显示，选择ncm(tab或回车)。即可生成如下代码：
import {Module} from '../js/nodom.js'
export class extends Module {
model = {
}
methods = {
}
template() {
return `
`
}
}
代码片段实现起来比较简单，只需要在json里配置你的键名以及键名产生的代码片段即可生成。
自动闭合标签
在模板字符串中，可以自动闭合标签，包括自闭合标签与常规标签。这个功能参照的插件库里别人的代码。只是为了在字符串里也可以自动闭合标签。
这就是我为我们的前端框架写的vscode插件。功能不多，有机会再改一改。
想看源码的点这：github.com/leslieder19…
之前框架的官网：www.nodom.cn/webroute/ho… 新版还在改。
第一次写掘金，希望大家多多指教`
