13518219792
本文将为大家详细介绍“vscode下vue文件格式化的方法”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“vscode下vue文件格式化的方法”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。
Visual Studio Code 是一个运行于 OS X，Windows和 Linux 之上的，针对于编写现代 web 和云应用的跨平台编辑器，它为开发者们提供了对多种编程语言的内置支持，并且正如 Microsoft 在Build 大会的 keynote 中所指出的，这款编辑器也会为这些语言都提供了丰富的代码补全和导航功能。
我相信基本上每一个在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文件格式化的方法”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注创新互联行业资讯频道！
