好用到飞起！VSCode插件DevUIHelper设计开发全攻略（二）

DevUI是一支兼具设计视角和工程视角的团队，服务于华为云DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。
官方网站：devui.design
Ng组件库：ng-devui（欢迎Star）
官方交流群：添加DevUI小助手（微信号：devui-official）进群
DevUIHelper插件：DevUIHelper-LSP（欢迎Star）

前言

嗨 我是devuiHelper的主力开发者。你可能看过之前的那篇文章DevUIHelper设计开发全攻略（一）,了解到我们的插件的开发过程以及架构设计。今天，我打算聊聊这个插件的特性，以方便您更方便的使用插件的所有功能。

1 基本特性

1.1 把文档装进vscode里

某种意义上来说，团队的经历决定了他们产品的特色。在接触到这个项目时,我们团队的小伙伴还在学校用着15.6寸的笔记本。当我们决定使用一个组件库的时候，我们面临着很痛苦的选择：是把小的可怜的屏幕分一半给api文档，还是在ide和插件官网中来回切换? 显然这两种都不是让人用起来舒服的选择，这便促成了我们插件的第一个特性：把api文档装进插件中，让我们即使使用小屏幕开发也能玩的很爽。

1.2 webstorm风格的提示功能

我们注意到很多人使用webstorm的原因是这个IDE真的提供了非常优秀的代码提示功能，但是，它提示的文档并没有我们完整，于是我们想：能不能用我们的插件也实现类似的提示呢?<br/> 在开发过程中，我们意识到似乎需要一个比较强大的内核支撑越来越多的需求，于是我们开始对结构进行设计，在大量的代码重写过后，我们实现了webstorm式的组件库提示：当你在tag里面按下空格，就可以看到当前能够使用的所有属性，这里面既有tag的属性，也有指令的属性，我认为这是webstorm最好用的功能。

这个功能的实现让我们的可用性上升了很大一个台阶。同时，你也可以使用vscode的snippet功能：

1.3 错误提示器

在代码补全功能逐步完善的时候，我们注意到如果使用者误删了关键属性可能会导致编译失败，而通常这种错误只有在查阅官网后才能得到解决。于是诞生了这样一个想法：如果我能够在vscode中就知道知道如何纠正错误，这应该是一件很酷的事情。<br/>
依托于我们的解析器，这个功能的实现并没有花费非常多的时间。现在，你可以在插件中了解到编译失败的问题可能出现在哪里了。

1.4 尝试着让布局输入更简单

作为一个组件库的提示插件来说，这也许足够了。又一天，我在写html文件的时候感觉到了一丝痛苦，当我需要在一个大容器里面写两个左右容器，左边的容器内放入accordion,右边的容器放一个d-data-table的时候，我在想，能不能使用某种迅速的手法清晰的写下这段代码呢?这个想法在两周之内体现在了插件中，由于它以@开头，我们叫它@表达式。您可以在第三章节阅读相关的语法，以方便您使用这一功能。

2一些细节

我们相信一些微小的功能也能大幅提升使用者的使用体验。如果您了解他们，也许会让您使用的更加舒心。

2.1 单独修改标签

我们的标签提示一般是以代码块的形式进行不全的，但是有些时候我们并不是总需要补全一整个代码块。例如：

<d-button id="avatar1" class="myavatar"></d-button>

显然 这位开发者由于一些原因将d-avater 标签错输成了d-button标签，这时，我们希望只进行对于标签的改动。devuiHelper支持这种改动，并能够进行提示：

2.2 了解属性来自哪里

当你在一个项目中即使用了标签又使用了指令的时候，提示往往变得非常复杂，这时，你也许想要知道哪些属性是被谁引起的。这一功能在最新的V4.4.1版本中上线了，这些提示将帮助您更好的理解属性的含义

2.3 个性化设置

在完成了将文档装入vscode这个功能后，我们发现越来越多的使用者减少了在文档和vscode之间辗转腾挪的次数。然而，这个功能并不是完美的，由于大片的悬浮提示遮挡了很大的页面，这也许会使得您的开发体验非常糟糕，我们希望您既可以使用丰富的文档提示，也可以在必要的时候关掉它。在V4.4.X以及之后的版本中，我们支持了用户的自定义配置，现在您可以使用自定义的配置来控制是否显示悬停提示。

在未来的版本中，我们将提供更多的可选项，例如只显示api文档/只显示介绍文档等。同时也会有更多可个性化的配置可供选择，敬请期待。

3 @表达式

@表达式是我们比较鲜明的特色之一，尽管他使用的是相对简单的语法，但某种意义上，他仍然是一门语言。注意这个功能仍然在开发中，暂时来说，表达式的功能并不是非常完善，但是我们仍然开发出了一些实用的语法，希望您可以使用愉快！<br/>
我们认为每一个在测试阶段帮助过我们的开发者都是值得尊敬的，如果您使用过这个功能，您可以在Github仓库https://github.com/sspku-yqLi...提交Issue或PR，或者直接发送反馈邮件到[e-mail]。您将被我们视为重要的贡献者，我们会在这个功能开发结束后给予您一份纪念品，感谢您的参与！

3.1 如何触发

表达式的需要在一个独立的字符串中，并且必须要以@开头。例如：

<div>
    @d.but.pri
    ...
</div>

注意:在未来的稳定版本中，我们将允许在标签名称内使用表达式，例如：<d-button.pri, 您可以更加方便的使用表达式。

3.2 简写

我们允许对标签或者指令进行简写，例如d-tree-select可以被简写为ts,dDropDown会被简写为ddd，这是因为他会被拆解为：
d Drop Down 并且取了每一个单词的第一个字母，您可能会疑惑，为什么d-tree-select不被缩写为dts呢？这与表达式的写法有关，下面将会为您进行解释。

3.3 ‘.’运算符

'.'运算符继承自一般的编程思想,'a.b'在表达式中意味着b是a的一种属性，这种属性既可以是普通的html属性，也可以是附加在标签上的指令.同时，当a是指令的时候，表达式也可以被解释为a指令下的b属性或是属性的值，因此，如果您使用的是devui组件库的组件，那么表达式必须以d.开头，这意味着是devui组件库下的内容，如果您输入的是普通html标签，则不需要以d.开头。但是一旦指定了组件库，在下次更改前都会默认使用这个组件库。<br/>
examples:
d.button->devui组件库的button组件-><d-button></d-button><br/>
d.but.pri->devui组件库的 button组件中 含有pri的某个属性-><d-button bsStyle='primiary></d-button><br/>
button.ddd->button标签 使用的ddropdown指令-><button dDropDown></button><br/>
d.button.pri.icon->devui组件库的button组件 含有有关于pri和icon的属性 -> <d-button [icon]=""></d-button><br/>
您可能发现了，在最后一个例子中，pri.icon中的icon没有被解释为pri的属性，这是因为最低的父属性(也就是a)只能是标签，当然我们可以使用一些括号来将其降为属性或指令，这将是其他运算符的内容。
另一方面，您也可能发现了，由于存在着相当多的匹配可能，那么他们的匹配优先级是什么样的呢？

当'.'运算符无法匹配的时候，他就会退化为css语法

实际上，您无需记录如此复杂的匹配规则，我们已经将冲突的可能性降到了非常低的水平，您只需要记住这个运算符可以匹配属性值，属性名以及指令就可以了。

3.4 ‘[]’运算符

'[]'运算符来自于数组的思想，用来代替css语法中的+，这使得在多个子元素之间运算成为了可能，另一方面，他也承担了一部分强制绑定的功能，使得'.'运算能在更低维度中进行。<br/>
examples:<br/>
数组用法<br/>
@d.but.[pri,com]->存在两个d-button标签，属性值分别为pri,com->`<d-button bsStyle='primary'></d-button>
<d-button bsStyle='common'></d-button>`<br/>

与后代表达式一起使用<br/>
@div>[d.ts,img]->div存在两个后代，分别是d-treeselecter和img标签->`<d-button bsStyle='primary'></d-button>
<d-button bsStyle='common'></d-button>`<br/>

绑定属性用法

@d.but.[dda.date]->使用了datepicker指令，并且使用了这个指令中关于date的属性-><d-button dDatepicker [dateConverter]=""></d-button>

3.5‘！’布尔运算符

当您想要使用的属性的值是布尔类型的时候，我们提供了一个简单的语法糖，及当您输入属性的时候，值为true，输入!属性名的时候，值为false.
@d.but.[dda.date]->使用了datepicker指令，并且使用了这个指令中关于date的属性-><d-button [showLoading]="true"></d-button>

@d.but.!sho->使用了d-button组件，并且由于使用了！showloading的值为false-><d-button [showLoading]="false"></d-button>

3.6 ‘{}’添加标签内的内容：

使用大括号想两个标签中间添加内容:这个内容可以是自增的，这将会在多个标签中发挥有趣的效果：
@d.but{mybutton}->使用了d-button组件，内容为mybutton-><d-button>mybuttom</d-button>

@d.but{mybutton(2}->使用了d-button组件，内容为mybutton,并且索引从2自增-><d-button>mybuttom</d-button>

3.7一些vscode原生支持的表达式

vscode支持使用原生的css选择器语法来进行标签的输入，同样的，devuiHelper也支持这些语法

• 当‘.’运算符无法匹配的时候，他就会退化为css语法中的class

• 使用后代选择器

• 使用乘法

• 指定id

4 祝您使用愉快

一开始，devuiHelper只是一个方便于属性补全的的插件，但是我们总是相信——这个插件可以变得更好用，更优秀。我们非常感谢正在使用devuiHelper的开发者，你们的使用是我们开发的动力！也非常推荐还没有安装devuiHelper的小伙伴前来使用，并通过Githubhttps://github.com/sspku-yqLi...联系我们，希望我们一起将这个插件变得更好！`<br/>

下一篇文章我们将会从开发者的角度入手，讲解功能开发的思路以及vscode插件开发经历。如果你想了解我们的功能是怎么实现的，欢迎您继续订阅我们的文章，最后，求一波star~,如果您用的开心，不妨在我们的git仓库中给出您宝贵的star,您的支持是我们的开发动力！

加入我们

我们是DevUI团队，欢迎来这里和我们一起打造优雅高效的人机设计/研发体系。招聘邮箱：[e-mail]。

---

作者: 动次打次咚咚咚

责编: DevUI团队

《好用到飞起！VSCode插件DevUIHelper设计开发全攻略（三）》即将出炉，敬请期待~

往期文章推荐

RxJS 源码解析（四）—— Operator II

《好用到飞起！VSCode插件DevUIHelper设计开发全攻略（一）》

《Web界面深色模式和主题化开发》