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

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

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

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)過多個(gè)版本迭代，算是目前 vscode 下最好用的 vue 插件了，甚至支持 ts, webpack alias 等特性。

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

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

1. 配置 eslint

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

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

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

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

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

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

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

2. 配置 prettier

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

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

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

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

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

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

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

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

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

或者你覺得無傷大雅，也不用配置這個(gè)，反正保存時(shí) eslint 自動(dòng)fix了。

3. 配置 vetur 對(duì) html 的格式化

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

例如:

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

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

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

除了 html 部分，其他都默認(rèn)采用 prettier 格式化。

如果需要 html 的格式化，則需手動(dòng)配置。

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

完成收工

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

{
 // 強(qiáng)制單引號(hào)
 "prettier.singleQuote": true,
 // 盡可能控制尾隨逗號(hào)的打印
 "prettier.trailingComma": "all",
 // 開啟 eslint 支持
 "prettier.eslintIntegration": true,
 // 保存時(shí)自動(dòng)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": {
   // 屬性強(qiáng)制折行對(duì)齊
   "wrap_attributes": "force-aligned",
  }
 }
}

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

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

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

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

小結(jié)

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

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

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

但 .vue 只能這樣配置了，因?yàn)槟壳?vetur 也沒支持，官網(wǎng)只給了這個(gè)解決方案。

或許之后就支持了呢。

其他插件推薦