chenshuy1 / regular-autocomplete

a vscode extension about the autocomplete of regular

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-autocomplete's Issues

更新计划

在当前，依然更新插件首先给人的感觉就是“不合时宜”。不过既然现在“将所有页面都迁移”的任务也被认为几乎不可执行的，那么继续完善开发体验势必会提高参与到其中的同学工作效率。我觉得随着时间的推移，这部分的工作意义可能会慢慢体现出来（我目前因此插件而深有体会😀），虽然它不能惠及大部分同学，但是它的意义会比现在看起来的要大。

我想将更新内容归纳为下面几项：

• 将 VSCode Marketplace 中插件进行统一，现在包括我提交的一共有三个，希望可以统一成一个。不过不知道能不能行，我感觉是不是因为之前的认证丢了才发了两份😀。统一的目的是希望有需求的同学可以尽快的找到插件本身

• 将插件支持的书写形式固定为 .rgl 文件和 JS 文件内联的两种，这样减少后续可能的工作内容，比如格式化的工作，将只支持这两种书写形式，也稍微规范一下书写形式，现在形式略多：

  • .vue 的借助 vue 相关插件来高亮的 orz
  • .tpl 的，里面单独写模板的形式
  • .rgl
  • JS 文件内联的

  我们将只支持 .rgl 和 JS 内联的两种形式，基于以下几点：

  • .rgl 和 JS 内联分别对应当前的 vue 和 jsx 的形式，实践较多，接受度也较高
  • .tpl 单独写的，数量应该不多，迁移到 .rgl 的成本应该也不大（待定，因为社交里面没有这种情况）
  • .vue 的直接将后缀修改为 .rgl 即可

• 模板格式化的功能以大致完成，待集成到插件中。不过可能需要将格式化继承为 eslint 中，这样对 JS 文件还是 .rgl 文件进行统一的格式化。