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 也沒支持，官網只給了這個解決方案。
或許之后就支持了呢。
其他插件推薦
我就不一一解釋了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
