vscode下的vue檔案格式化

摘要： 我相信基本上每一個在vscode上面碼Vue程式碼的都會下載Vetur外掛用來格式化等操作，今天Vetur更新了0.14.2 版本，最近在使用的時候，感覺格式化總是出問題，去Vetur上面看了下，發現Vetur的配置做了下面的改動，看到幾個社群都沒有人說明，我就先說下，預設的格式化配...

我相信基本上每一個在vscode上面碼Vue程式碼的都會下載Vetur外掛用來格式化等操作，今天Vetur更新了0.14.2 版本，最近在使用的時候，感覺格式化總是出問題，去Vetur上面看了下，發現Vetur的配置做了下面的改動，看到幾個社群都沒有人說明，我就先說下，預設的格式化配置是：

{
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier"
}
複製程式碼

不需要修改的話就不管他，我的建議是跟著使用預設的格式化工具就行

預設的html格式化工具變為prettyhtml

下面是原來使用js-beautify-html 格式化的配置，現在官方已經不推薦了，我準備跟著變為prettyhtml

原來的：

"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 160,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
複製程式碼

新的配置：

"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
// 單行超過160個長度的時候開始換行顯示各種引數和事件
"printWidth": 160
}
},
複製程式碼

關於prettier 的設定規則改變

1. 專案的根目錄不能有.prettierrc 、.prettierrc.js 等配置檔案，否則會覆蓋掉vscode上面的配置
2. 新的配置項寫法變化： 原來只能設定全域性js的配置的：

"prettier.singleQuote": true,
"prettier.disableLanguages": [ "vue" ]
複製程式碼

可以設定vue檔案裡面的，和js檔案不衝突：

// js檔案
"prettier.singleQuote": true,
"prettier.disableLanguages": [ "vue" ]，
// vue檔案裡面的js
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"proseWrap": "never",
"printWidth": 130
}
},
複製程式碼

和html的格式化寫在一起就是：

"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 160
},
"prettier": {
"singleQuote": true,
"proseWrap": "never",
"printWidth": 130
}
},
複製程式碼

沒什麼技術含量，但是對程式碼格式有要求的還是有不小的幫助的