好用到飛起！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界面深色模式和主題化開發》