在vscode中統(tǒng)一vue編碼風(fēng)格的方法

更新時間：2018年02月22日 08:48:59 作者：樓教主

本篇文章主要介紹了在vscode中統(tǒng)一vue編碼風(fēng)格的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

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

vetur 插件

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

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

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

1. 配置 eslint

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

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

至此，可以對 js 文件采用 eslint 規(guī)范進行格式化了，但 .vue 文件還不行，因為他不認(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 的格式化沖突，因為 prettier 不知道這是什么東西。

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

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

因為 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)格不一致，你需要單獨配置。

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

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

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

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

3. 配置 vetur 對 html 的格式化

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

例如:

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

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

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

除了 html 部分，其他都默認(rèn)采用 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 部分格式化不是根據(jù) eslint 格式化的，上面有解釋。

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

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

小結(jié)

主要解決了 prettier 不格式化 .vue 內(nèi)的 js 問題，以及 prettier 格式化時跟 eslint 自動 fix 風(fēng)格沖突問題。

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

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

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

或許之后就支持了呢。

其他插件推薦