在vscode中vue編碼風格統一的方法介紹

本篇文章主要介紹了在vscode中統一vue編碼風格的方法，內容挺不錯的，現在分享給大家，也給大家做個參考。

vetur 很多人知道，但在 vscode 下沒辦法格式化 .vue 裡的 html, js 很是頭疼，程式碼風格無法統一。

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

本文詳細介紹 vscode 下使用 vetur prettier eslint 來統一 vue 編碼風格。

vetur 外掛程式

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

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

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

1. 配置 eslint

prettier 覆蓋 vscode 預設格式化快速鍵，但沒有針對 eslint 配置進行格式化，所以需要單獨配置使用者設定開啟。

找到 首選項 -> 設定 選單，在右側 使用者設定 中新增 "prettier.eslintIntegration": true 開啟 eslint 支援。

至此，可以對 js 檔案採用 eslint 規格進行格式化了，但 .vue 檔案還不行，因為他不認識這是個什麼東西。

在 使用者設定 中新增如下配置，以支援 .vue 檔案。

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

現在 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 只能採用預設的格式化規範去格式化，不支援eslint，而且預設也不格式化 html。

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

所以當你格式化 .vue 檔案時候，stript 部分可能會跟你的 eslint 風格不一致，你需要單獨設定。

例如我的eslint 規範，字串單引號，物件末尾項目也有逗號。

// 强制单引号
"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",
  }
 }
}

現在你可以在.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 有本質區別，但 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

Guides
Import Cost
#npm intellisense

18. ##Path Autocomplete

Prettier############Settings Sync############TODO Highlight############Vetur# ###########vscode-icons############我就不一一解釋了。 ###

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

Vue.js結合Ueditor富文本編輯器的使用方法

vue的專案最佳化之透過keep-alive資料快取的方法

Vue元件選項props的使用介紹

##

以上是在vscode中vue編碼風格統一的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！