首先說明下，這個外掛是用idea開發的，在idea上同樣適用。有興趣的朋友可以直接git下來開發自己的小外掛。

外掛基於的

webstorm版本是2017.3.5

。所以建議升級使用最新版的webstorm。

webstorm是我非常喜歡的一款編輯器。用來開發前端程式碼，自帶的智慧提示功能我非常喜歡，能夠滿足我絕大部分編碼要求。

但在使用vue+element開發系統時，沒有找到好的程式碼提示工具。雖然透過webstorm的live template功能能夠手動新增程式碼片段提示。

但是，在編碼時，element元素上有很多屬性和事件，我是沒法記住（哈哈，也許大神的你可以全部記住。）。所以還是得常常到官網上去檢視每個屬性什麼意思。

為了能夠在開發中解決這些問題，提高開發效率，我決定做個小小的webstorm外掛。

哈哈，首先貼出外掛原始碼地址：

有興趣的朋友，可以自己在這個基礎上開發屬於自己的小外掛。

如果你想直接下載安裝可以按下面步驟操作：

接下來介紹下外掛的基本功能吧：

1、標籤文件說明檢視 （快捷鍵：ctrl + q）

透過在標籤上按下ctrl+q快捷鍵，你能夠檢視該標籤元素有哪些引數、哪些事件。哈哈，這樣就可以不用動不動就去看官網了。

2、程式碼塊提示功能（live templates）快捷鍵： ctrl + space

哈哈，這樣是不是可以提高程式碼的編寫效率。

3、標籤提示

輸入<後寫el-等會自動出現element標籤元素。哈哈，對於有些不熟悉element有哪些元素的朋友可以方便自己去找。

4、屬性編寫提示以及屬性值自動完成

帶有藍色向上箭頭的屬性屬element獨有屬性

5。 element方法提示 （以 elm 開始）

方法包括（message, alert, confirm, notify, prompt）

在標籤後打個空格，webstorm會自動提示該元素包含的屬性。本想把所有該元素自身包含的屬性放在最前面，奈何本人功底有限，沒有找到開發idea外掛元素屬性置前的方法，如果有熟悉的朋友可以告訴我哦，我再加上去。

如果大家有什麼疑問或者好的想法，可以直接聯絡我哦。

qq: 2278371826

email： [email protected]