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文件格式化问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!