vetur 很多人知道，但在 vscode 下沒辦法格式化 .vue 里的 html, js 很是頭疼，代碼風(fēng)格無法統(tǒng)一。

所以不少人直接拆分開，然后在 .vue 中引入，雖然方法很好，但這有違 .vue 單文件組件的初衷。

本文詳細(xì)介紹 vscode 下使用 vetur + prettier + eslint 來統(tǒng)一 vue 編碼風(fēng)格。

vetur 插件

vetur 經(jīng)過多個版本迭代，算是目前 vscode 下最好用的 vue 插件了，甚至支持 ts, webpack alias 等特性。

但有幾個功能不是直接支持，需要手動配置，而且有幾個功能需要其他插件配置后才能配合他完成。

這就有點(diǎn)麻煩了，新手同學(xué)們往往就是死在這里。

1. 配置 eslint

prettier 覆蓋 vscode 默認(rèn)格式化快捷鍵，但沒有針對 eslint 配置進(jìn)行格式化，所以需要單獨(dú)配置用戶設(shè)置開啟。

找到 首選項(xiàng) -> 設(shè)置 菜單，在右側(cè) 用戶配置 中添加 "prettier.eslintIntegration": true 開啟 eslint 支持。

至此，可以對 js 文件采用 eslint 規(guī)范進(jìn)行格式化了，但 .vue 文件還不行，因?yàn)樗徽J(rèn)識這是個什么東西。

在 用戶設(shè)置 中添加如下配置，以支持 .vue 文件。

"eslint.validate": [ "javascript", "javascriptreact", {  "language": "vue",  "autoFix": true }]

現(xiàn)在 eslint 認(rèn)識 vue 了，但這只是 eslint 認(rèn)識，prettier 依然不認(rèn)識這是什么東西。

所以我們要加上 "eslint.autoFixOnSave": true 配置，在保存文件時，自動fix里面的js代碼。

2. 配置 prettier

雖然 eslint 可以處理 vue 文件了，但卻跟 prettier 的格式化沖突，因?yàn)?prettier 不知道這是什么東西。

安裝了 vetur 插件后，prettier 知道 .vue 原來是一個 html 格式文件的，但依然沒辦法很好的格式化。

PS：目前 vetur 不支持 prettier 的 eslint。

因?yàn)?html 包括了 html+script+style 3部分，prettier 只能采用默認(rèn)的格式化規(guī)范去格式化，不支持eslint，而且默認(rèn)也不格式化 html。

剛才開啟的 "prettier.eslintIntegration": true 只是針對 .js 文件的，而不是針對 .vue 文件。

所以當(dāng)你格式化 .vue 文件時候，stript 部分可能會跟你的 eslint 風(fēng)格不一致，你需要單獨(dú)配置。

例如我的eslint 規(guī)范，字符串單引號，對象末尾項(xiàng)也有逗號。

// 強(qiáng)制單引號"prettier.singleQuote": true,// 尾隨逗號"prettier.trailingComma": "all",

如果你是雙引號，而且不加末尾逗號的，就不必配置了。

或者你覺得無傷大雅，也不用配置這個，反正保存時 eslint 自動fix了。

3. 配置 vetur 對 html 的格式化

因?yàn)?vetur 就是把 .vue 中的 html+script+style 3部分拆分，然后交給對應(yīng)的語言處理器去處理。

例如:

html 可以是 html，也可以是 pug, jade 等。

script 可以是 es5, es6, ts, coffee。