webstorm中vue語法的支持

俗話說，要想攻其玉，必先利其器。工做中總是在用angular開發，但慢慢會有vue的業務，因此須要學習學習vue。今天開始折騰vue，我是用webstorm開發前端的，當使用vue-cli建立好一個項目後，使用webstorm打開簡直不能入目啊，卻是沒有啥錯誤提示，卻是一大堆的各類編輯器警告，無奈，還得去搞好IDE對vue的支持啊。

前提

vue的官方文檔上建議新手是先不要使用vue-cli，而是直接先用相似於JQuery同樣的方式引入vue來學習。鑑於前面已經搞過了angular的cli，因此我仍是直接從cli入手。

假定咱們已經安裝好了node和npm。

全局安裝vue-cli

在終端中運行命令：

npm install --global vue-cli

全局安裝vue-cli。而後使用vue-cli建立咱們的項目：

vue init webpack my-project

這樣咱們就有個完整的項目，而且裏面會有個示例的組件，運行：

npm run dev

而後在瀏覽器裏面訪問http://localhost:8081/就能夠看到項目的運行狀況。

折騰webstorm

在webstorm打開vue項目的時候，差點就想放棄vue了，實在不忍直視，但仍是得發揚一向的探索精神啊，遇到問題就要解決唄！🙂

.vue類型的文件

首先得從文件類型上入手，在目前的版本中是沒有.vue這種文件類型的，因此沒法識別也沒法高亮，就算識別了也都是亂的。查了下，有些說是在文件類型上加上*.vue就行了，但我加了反而更亂套了。

谷歌了半天，發現了這篇文章，是webstorm官方網站的文章https://www.jetbrains.com/help/webstorm/vue-js.html。webstorm已經支持vue了，可是我在本地的webstorm徹底沒找到這個選項啊，這是爲啥？

看了下，發現webstorm的版本是2018版的，而個人webstorm是2017.2。因此我須要更新到最新版。

得，備份下webstorm的設置，而後下載最新的webstorm而後更新。順便找了個激活碼：http://hb5.s.osidea.cc:1017（熱乎的，親測可用）。

果真安裝後，發現了vue的標記，的確新版的是支持的。

可是發現.vue的文件的高亮仍是沒有的。看來仍是得加個文件支持（不知道是否是我前面操做的時候刪除了）：

preferences > editor > file types

拉下來選擇vue.js templates，點擊而後在下面的registered patterns裏面點擊加號，而後輸入*.vue，而後點擊肯定，點擊apply應用，而後能夠看到webstorm底下有個進度條，走滿後，.vue的高亮就正常了。

unused export default

在vue的組件裏面的js中有個export default，上面是灰色的提醒，鼠標移上去後發現提示unused export default，這是由於沒有具體的使用這個導出，是JavaScript的一個語法提示。咱們能夠在IDE的configure inspection檢查配置中進行配置。

快速的方法是：點擊右下角的小人頭 》 configure inspection。在彈出的界面中選擇：JavaScript 》 General。去掉選項：unused global symbol。而後點擊ok，能夠看到灰色的提醒消失了。

---

如今看起來就神清氣爽了。開始coding吧~🙂