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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章