最近有個(gè)項(xiàng)目使用了 Vue.js 谢澈，本來一直使用的是 PHPStorm 來進(jìn)行開發(fā)煌贴，可是遇到了很多問題。
后來锥忿，果斷放棄收費(fèi)的 PHPStorm 牛郑，改用 vscode (Visual Stdio Code).
當(dāng)然 vscode 對(duì) vue 也不是原生支持的，今天來扒一扒如何配置 vscode 以便優(yōu)雅地編輯 vue 文件
先來扒一扒使用 PHPStorm 遇到的問題：
vue文件雖然可以通過插件來解決高亮問題敬鬓，但是 <script> 標(biāo)簽中的 ES6 代碼的識(shí)別老是出問題淹朋，箭頭函數(shù)有的時(shí)候能正確識(shí)別笙各，有的時(shí)候會(huì)報(bào)錯(cuò)
無法正確識(shí)別 vue 文件中的 jsx 語法
無法正確識(shí)別和高亮 vue 文件 <style> 標(biāo)簽中使用的 less 語法
vue文件中 <template> 部分使用了大量的自定義標(biāo)簽（自定義組件）和自定義屬性，會(huì)報(bào)一堆 warning
經(jīng)常性卡死
webpack實(shí)時(shí)編譯的錯(cuò)誤不能直接展示在代碼編輯器內(nèi)础芍，還得自己到控制臺(tái)中查看
如何安裝 vscode
很簡單杈抢，傳送門：官網(wǎng)下載安裝
第一步，要支持 vue 文件的基本語法高亮
這里仑性，我試過好3個(gè)插件： vue, VueHelper 和 vetur 春感，最終選擇使用 vetur 。
安裝插件： Ctrl + P 然后輸入 ext install vetur 然后回車點(diǎn)安裝即可虏缸。
p.s: vscode 的插件安裝比 PHPStorm 的插件安裝更快捷方便鲫懒，安裝完成后還不用重啟整個(gè)程序，只要重新加載下工作區(qū)窗口就可以了刽辙。
安裝完 vetur 后還需要在文件=>首選項(xiàng)=>設(shè)置里面用戶設(shè)置加上這樣一段配置：
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
這時(shí)可以打開一個(gè)vue文件試試窥岩，注意下右下角狀態(tài)欄是否正確識(shí)別為 vue 類型：
如果被識(shí)別為 text 或 html ，則記得要點(diǎn)擊切換下宰缤。
第二步颂翼，要支持 vue 文件的 ESLint
可能還有人會(huì)問為什么要 ESLint ？沒有 lint 的代碼雖然也可能可以正確運(yùn)行慨灭，但是 lint 作為編譯前的一道檢測成本更小朦乏，而且更快。此外氧骤， ESLint 還有很多規(guī)范是幫助我們寫出更加優(yōu)雅而不容易出錯(cuò)的代碼的呻疹。
jshint 本來也是個(gè)不錯(cuò)的選擇，但是 ESLint 對(duì) jsx 的支持讓我還是選擇了 ESLint.
安裝插件： Ctrl + P 然后輸入 ext install eslint 然后回車點(diǎn)安裝即可筹陵。
ESLint 不是安裝后就可以用的刽锤，還需要一些環(huán)境和配置：
首先，需要全局的 ESLint , 如果沒有安裝可以使用 npm install -g eslint 來安裝朦佩。
其次并思，vue文件是類 HTML 的文件，為了支持對(duì) vue 文件的 ESLint 语稠，需要 eslint-plugin-html 這個(gè)插件宋彼。可以使用 npm install -g eslint-plugin-html 來安裝
接著仙畦，安裝了 HTML 插件后输涕，還需要在 vscode 中配置下 ESLint：
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
},
最后，別忘了在項(xiàng)目根目錄下創(chuàng)建 .eslintrc.json , 如果還沒創(chuàng)建议泵，還可以使用下面快捷命令來創(chuàng)建：
這樣一來 vue 中寫的 js 代碼也能正確地被 lint 了占贫。
要是不小心少個(gè)括號(hào)之類的都可以有對(duì)應(yīng)的報(bào)錯(cuò):
多余 import 也都能報(bào)錯(cuò):
還是蠻智能的。
