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

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

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

vetur 插件

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

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

這就有點麻煩了，新手同學們往往就是死在這里。

1. 配置 eslint

prettier 覆蓋 vscode 默認格式化快捷鍵，但沒有針對 eslint 配置進行格式化，所以需要單獨配置用戶設置開啟。

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

至此，可以對 js 文件采用 eslint 規(guī)范進行格式化了，但 .vue 文件還不行，因為他不認識這是個什么東西。

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

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

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

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

2. 配置 prettier

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

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

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

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

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

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

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

// 強制單引號
"prettier.singleQuote": true,
// 尾隨逗號
"prettier.trailingComma": "all",

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

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

3. 配置 vetur 對 html 的格式化

因為 vetur 就是把 .vue 中的 html+script+style 3部分拆分，然后交給對應的語言處理器去處理。

例如:

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

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

style 可以是 css, less, sass, postcss 等。

除了 html 部分，其他都默認采用 prettier 格式化。

如果需要 html 的格式化，則需手動配置。

// 使用 js-beautify-html 插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  // 屬性強制折行對齊
  "wrap_attributes": "force-aligned",
 }
}

完成收工

至此，配置完成，完整配置如下：

{
 // 強制單引號
 "prettier.singleQuote": true,
 // 盡可能控制尾隨逗號的打印
 "prettier.trailingComma": "all",
 // 開啟 eslint 支持
 "prettier.eslintIntegration": true,
 // 保存時自動fix
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 // 使用插件格式化 html
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // 格式化插件的配置
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   // 屬性強制折行對齊
   "wrap_attributes": "force-aligned",
  }
 }
}

現(xiàn)在你可以在 .vue 中格式化 html+js+css 了。

但 js 部分格式化不是根據 eslint 格式化的，上面有解釋。

js 部分只能采用 prettier 默認格式，然后保存的時候自動 fix，來達到 prettier+eslint 的效果。

如果需要詳細配置，可以訪問 vetur 官方文檔 https://vuejs.github.io/vetur

小結

主要解決了 prettier 不格式化 .vue 內的 js 問題，以及 prettier 格式化時跟 eslint 自動 fix 風格沖突問題。

當然，prettier格式化 和 eslint的fix 有本質區(qū)別，但 prettier + 自動fix，就完美了。

對于 .js 來說，prettier 開啟 eslint 支持，直接完美。

但 .vue 只能這樣配置了，因為目前 vetur 也沒支持，官網只給了這個解決方案。

或許之后就支持了呢。

其他插件推薦

1. Auto Close Tag
2. Auto Rename Tag
3. Bracket Pair Colorizer
4. Code Runner
5. Document This
6. EditorConfig
7. ESLint
8. gitignore
9. GitLens
10. Guides
11. Import Cost
12. npm intellisense
13. Path Autocomplete
14. Prettier
15. Settings Sync
16. TODO Highlight
17. Vetur
18. vscode-icons

我就不一一解釋了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。