vscode下的vue文件格式化 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文件格式化】
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：943129070，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。