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 界面深色模式和主题化开发》