如何在VS Code中重新格式化Vue.js组件？

Question

我正在使用Visual Studio Code编写Vue.js组件，并需要重新格式化该组件的代码。

我没有找到任何内置的格式化工具，第一个选择是vue-buetify插件，但在安装后提示：

扩展中有许多错误，请不要使用它，更好的选择是vetur。

然后我尝试安装Vetur，但我没有看到任何选项可以美化编辑器中当前的代码。快捷键Shift+Alt+Fcommand没有效果。

我应该如何实际地为Vue组件美化（重新格式化）代码？

- WoJ

Answer 1

自从之前一个项目突然停止格式化以来，我一直在尝试修改格式。以下是我认为当前技术水平的总结：

使用扩展名为vetur和prettier（特别是esbenp.prettier-vscode Prettier - Code formatter）。（你可以通过 Vue.js Extension Pack esbenp.prettier-vscode等预安装这些扩展）。

Vetur是Vue的（当前）强制默认工具。不接受替代品。

Prettier不直接支持.vue文件，所以该文件类型默认被禁用：https://github.com/prettier/prettier-vscode/issues/338。

但是Vetur理解其限制，并将.vue文件的除HTML部分之外的所有内容委派给潜在的不同格式化程序进行格式化。虽然按默认情况下，除了 HTML 部分，它把所有东西都代理给。https://vuejs.github.io/vetur/formatting.html。对于 HTML 部分，它禁用了格式化。

Vetur开发人员不喜欢js-beautify-html，尽管它似乎仍然可以使用：https://vuejs.github.io/vetur/formatting.html。但他们目前没有提供替代建议。

Prettier对HTML的支持本应是显而易见的选择，但这是一个长期而悲惨的故事。目前（2018年5月），prettier将HTML格式化为JSX。有提到很多微妙之处，但我掌握的一个问题是，JSX将开始/空/结束标签转换为空标签，例如<br>变成<br />。 显然React和（我相信）Vue不喜欢这样做，因此vetur禁用了Prettier的HTML部分。

因此，我在vetur设置中启用js-beautify-html，希望一切顺利，并保持警惕。但我只是一个表面编码工程师，我可能永远不会遇到已知的问题。

- BobHy

Answer 2

如果您已在VS Code上安装了Vetur扩展，

1. 进入VS Code扩展区。
2. 找到Vetur并选择齿轮图标以进入Vetur的设置。
3. 向下滚动直到找到

Vetur › Format › Default Formatter: JS
Default formatter for <script> region

4. 从下拉菜单中选择pretter-eslint。
   （如果您没有看到该选项，可以安装Prettier扩展程序。）
5. 现在，您会发现每当您保存时，它会自动格式化您的代码。

- HeshanHH

Answer 3

2022年，关于Vue文件格式的问题，已经在另一个答案中得到了极大的改善。

Vetur仍然是在VS Code中管理.vue文件的事实标准解决方案，但在此问题被提出后的这段时间里，Prettier也添加了对它们的全面支持（以及HTML）。这意味着您可以使用Prettier格式化它们，而无需Vetur。

请注意，尽管Prettier对一小部分语言支持VS Code的“格式选定内容”功能，但Vetur不支持该功能：

Vetur只有“整个文档格式化程序”，不能格式化任意范围。因此，只有“格式化文档”命令可用。“格式选定内容”的命令不起作用。

如果您决定使用Vetur，在获取格式化功能工作时不需要安装其他扩展，因为该扩展已绑定了所有可用的格式化程序。只要安装并启用了该扩展，使用“格式化文档”命令或Shift+Alt+F键就可以开箱即用。

Vetur的设置允许用户为其支持的每种语言配置使用哪个可用格式化程序（默认情况下，除Sass和Stylus外都是Prettier）。这些格式化程序也可以按语言进行切换，或者完全禁用，如果您更喜欢使用其他格式化解决方案。

- zcoop98