Webstorm使用技巧

模板語法（強烈推薦使用，開發效率快到飛起）

WebStorm集成了對各個前端語言的快捷語法支持，這裏以Vue（Angular，React同樣支持）爲例，在.vue文件的template標籤內輸入v-for然後按下tab鍵，工具會自動生成如下代碼

輸入完成後繼續按tab光標會切換到對應的語法區域，方便修改。

該功能還支持自定義語法模板（敲重點！），基本上組件夠完善的話，一般的頁面都不需要寫代碼了

先看看完整示例：
已分頁組件爲例，下面開始操作步驟：
1、打開模板語法設置：File | Settings | Editor | Live Templates
2、新建一個模板組

3、新建一個組件模板，填寫內容（以html爲例）

$變量$ 這個符號在第5步需要用到，相當於告訴開發工具這個是變量，用戶自己填的

4、選擇模板使用範圍（這個必須要設置）

5、填寫第三步設置的值（記得需要雙引號），當然工具也給我提供了例如當前日期類的變量，這個可自行搜索查看
6、完成

配置好之後就可以愉快的使用了，已html爲例，在vue文件的template標籤內，輸入jpage-html按下tab鍵，工具會自動生成配置好的內容

7、順便帶上我最喜歡的console.log打印的寫法

下面看效果

這樣能夠在你輸入this.message的時候，後面字符串內容會自動加上this.message，很快捷的一種打印方式。