我相信基本上每一個在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文件格式化問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！