VSCode中格式化.vue文件时如何保留空行？

我之前也碰到过一模一样的糟心事！Vetur在处理.vue文件的空行时确实有点轴，明明其他格式文件都正常，偏偏Vue文件用来分隔代码块的空行每次格式化都没了。给你几个亲测有效的解决办法：

方法1：给Vetur添加HTML空行保留配置 #

你已经设置了vetur.format.defaultFormatter.html": "vscode.html-language-features"，但还需要额外配置空行保留的参数。打开VSCode的用户设置（快捷键Ctrl+,），在settings.json里添加以下内容：

"vetur.format.options.html": {
  "preserveNewlines": true,
  "maxPreserveNewlines": 3 // 可以根据自己的需求调整允许保留的最大空行数
}

这个配置会强制Vetur在格式化HTML部分时保留你手动添加的空行，不会把它们全部清空。

方法2：排查插件冲突 #

如果你同时安装了Prettier这类格式化插件，它可能会悄悄覆盖Vetur的设置，删掉空行。可以试试：

• 在.vue文件中右键选择「格式化文档」，然后选择「Vetur」作为默认格式化工具
• 或者直接在settings里禁用Prettier对Vue文件的处理：

"prettier.disableLanguages": ["vue"],
"[vue]": {
  "editor.defaultFormatter": "octref.vetur"
}

方法3：切换到Volar插件（推荐） #

现在官方已经推荐用**Vue Language Features (Volar)**替代Vetur了，它对Vue文件的格式化逻辑更贴合VSCode的原生规则，空行保留的问题基本不会出现。操作步骤：

1. 在VSCode扩展市场安装Volar
2. 禁用Vetur插件
3. 在settings里配置：

"[vue]": {
  "editor.defaultFormatter": "Vue.volar"
}

之后再用Shift+Alt+F格式化，你设置的代码分隔空行就能完美保留了！

内容的提问来源于stack exchange，提问作者Nils Riga