Regular Tool

Regular插件工具

Features

Syntax-highlighting
Snippets
Auto Completion

Syntax-highlighting

支持后缀为.rgl文件的语法高亮

支持内联模板的高亮，不过需要符合特定的格式：

// 在常量声明表达式中，如果变量名符合正则表达式 `/\w*[tT]pl/` 的规则
// 且右值为模板字面量(template literals)，则该字面量中的内容将会应用
// regular 的模板语法高亮规则
const tpl = `<div></div>`
const a_tpl = `<div></div>`
const buttonTpl = `<div></div>`

Snippets

语法	生成内容	效果
`rglc→`	regular component skeleton	略
`list→`	regular list	{#list}
`if→`	regular if	{#if}
`ifelse→`	regular if else	{#if} {#else} {/if}
`ifelseif→`	regular if else if	{#if} {#elseif} {/if}
`include→`	regular include statement	{#include}
`update→`	regular update	this.$update()
`watch→`	regular watch	this.$watch()
`emit→`	regular emit	this.$emit()

Auto completion

支持js文件内使用this.进行方法的补全操作

Requirements

✅ 开启字符串补全

由于regular的模板是基于字符串的，因此大部分的补全在字符串内执行。
需要在设置(User Setting)中：

"editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
}

打开对strings补全的支持。

✅ 模板文件补全支持

由于vscode内置语言中不支持tpl为后缀作为language，因此需要用户自定义关联tpl为html。
需要在设置(User Setting)中：

"files.associations": {
    "*.tpl": "html"
}

配置tpl后缀文件到html的关联

Enjoy!

regular-tool

chenshuyi