好用到飞起！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，或者直接发送反馈邮件到liuyongqi@pku.edu.cn。您将被咱们视为重要的贡献者，咱们会在这个功能开发结束后给予您一份记念品，感谢您的参与！

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团队，欢迎来这里和咱们一块儿打造优雅高效的人机设计/研发体系。招聘邮箱：muyang2@huawei.com。

---

做者: 动次打次咚咚咚

责编: DevUI团队

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

往期文章推荐

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

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

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