vscode下的vue文件格式化问题
我相信基本上每一个在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文件格式化问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！