我相信基本上每一個在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 } },總結
以上所述是小編給大家介紹的vscode下的vue文件格式化問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
