最近有個項目使用了 Vue.js ，本來一直使用的是 PHPStorm 來進行開發(fā)，可是遇到了很多問題。

后來，果斷放棄收費的 PHPStorm ，改用 vscode (Visual Stdio Code).
當然 vscode 對 vue 也不是原生支持的，今天來扒一扒如何配置 vscode 以便優(yōu)雅地編輯 vue 文件

先來扒一扒使用 PHPStorm 遇到的問題：

vue文件雖然可以通過插件來解決高亮問題，但是 <script> 標簽中的 ES6 代碼的識別老是出問題，箭頭函數(shù)有的時候能正確識別，有的時候會報錯
無法正確識別 vue 文件中的 jsx 語法
無法正確識別和高亮 vue 文件 <style> 標簽中使用的 less 語法
vue文件中 <template> 部分使用了大量的自定義標簽（自定義組件）和自定義屬性，會報一堆 warning
經(jīng)常性卡死
webpack實時編譯的錯誤不能直接展示在代碼編輯器內，還得自己到控制臺中查看
如何安裝 vscode

很簡單，傳送門：官網(wǎng)下載安裝

第一步，要支持 vue 文件的基本語法高亮

這里，我試過好3個插件： vue, VueHelper 和 vetur ，最終選擇使用 vetur 。

image.gif

安裝插件： Ctrl + P 然后輸入 ext install vetur 然后回車點安裝即可。

p.s: vscode 的插件安裝比 PHPStorm 的插件安裝更快捷方便，安裝完成后還不用重啟整個程序，只要重新加載下工作區(qū)窗口就可以了。

安裝完 vetur 后還需要在文件=>首選項=>設置里面用戶設置加上這樣一段配置：

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}

這時可以打開一個vue文件試試，注意下右下角狀態(tài)欄是否正確識別為 vue 類型：

image.gif

如果被識別為 text 或 html ，則記得要點擊切換下。

第二步，要支持 vue 文件的 ESLint

可能還有人會問為什么要 ESLint ？沒有 lint 的代碼雖然也可能可以正確運行，但是 lint 作為編譯前的一道檢測成本更小，而且更快。此外， ESLint 還有很多規(guī)范是幫助我們寫出更加優(yōu)雅而不容易出錯的代碼的。

jshint 本來也是個不錯的選擇，但是 ESLint 對 jsx 的支持讓我還是選擇了 ESLint.

image.gif

安裝插件： Ctrl + P 然后輸入 ext install eslint 然后回車點安裝即可。

ESLint 不是安裝后就可以用的，還需要一些環(huán)境和配置：

首先，需要全局的 ESLint , 如果沒有安裝可以使用 npm install -g eslint 來安裝。

其次，vue文件是類 HTML 的文件，為了支持對 vue 文件的 ESLint ，需要 eslint-plugin-html 這個插件?？梢允褂?npm install -g eslint-plugin-html 來安裝

接著，安裝了 HTML 插件后，還需要在 vscode 中配置下 ESLint：

"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": ["html"]
    },

最后，別忘了在項目根目錄下創(chuàng)建 .eslintrc.json , 如果還沒創(chuàng)建，還可以使用下面快捷命令來創(chuàng)建：

image.gif

這樣一來 vue 中寫的 js 代碼也能正確地被 lint 了。

要是不小心少個括號之類的都可以有對應的報錯:

image.gif

多余 import 也都能報錯:

image.gif

還是蠻智能的。