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

Question

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

我没有找到任何内置插件，插件的第一选择是vue-buetify在安装后通知

扩展中有很多bug，请不要使用，更好的选择是vetur

然后我通过安装 Vetur 来尝试它，但没有任何地方我可以看到一个选项来美化当前在编辑器中的代码。该Shift+ Alt+F 命令没有效果。

如何真正美化（重新格式化）Vue 组件的代码？

Answer 1

自从我以前的工作项目有一天停止格式化以来，我一直在摆弄格式。以下是我认为目前最先进的技术：

使用扩展vetur和更漂亮（特别是esbenp.prettier-vscode更漂亮 - 代码格式化程序）。（这些是由 Vue.js 扩展包esbenp.prettier-vscode和其他人预装的。）

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

Prettier 本身不支持 .vue 文件，因此默认情况下禁用文件类型：https : //github.com/prettier/prettier-vscode/issues/338。

但是 Vetur 了解它的局限性，而是将 .vue 文件的各个部分的格式化委托给一个可能不同的格式化程序。但是，默认情况下，它将 HTML 部分以外的所有内容都委托给 Prettier。https://vuejs.github.io/vetur/formatting.html。它禁用 HTML 部分的格式。

Vetur 开发人员对 js-beautify-html 感到失望，尽管它显然仍然有效：https ://vuejs.github.io/vetur/formatting.html 。他们此时不会提出替代建议。

对 HTML 的更漂亮的支持，如果它存在，这将是显而易见的选择，这是一个漫长而悲伤的故事。目前（2018 年 5 月），prettier 将 HTML 格式设置为 JSX。提到了许多微妙之处，但我掌握的一个问题是 JSX 将开始/空/结束标记转换为空标记，例如转换为 . 显然 React 和（我相信）Vue 不喜欢这样，因此 vetur 为 HTML 禁用 Prettier。

因此，我将继续在 vetur 设置中启用 js-beautify-html，希望能做到最好并睁大眼睛。但我是如此肤浅的编码员，我可能永远不会被它的已知问题绊倒。

Answer 2

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

\n

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

\n

\n

Vetur \xe2\x80\xba Format \xe2\x80\xba Default Formatter: JS\nDefault formatter for <script> region\n

\n

\n

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

\n

Answer 3

到了 2022 年，另一个答案中提到的格式化 Vue 文件的情况已经有了很大的改善。

Vetur 仍然是在 VS Code 中管理文件的事实上的解决方案.vue，但自从提出这个问题以来，Prettier 添加了对它们的全面支持（以及 HTML 本身）。这意味着如果您愿意，您可以使用 Prettier 格式化它们，而不使用 Vetur。

请注意，Vetur 不支持 VS Code 的“格式选择”功能，尽管 Prettier 支持（对于一小部分语言）：

Vetur 只有“整个文档格式化程序”，无法格式化任意范围。结果，只有该Format Document命令可用。该Format Selection命令不起作用。

如果您决定使用 Vetur，则不需要任何其他扩展即可使格式化工作，因为该扩展与其所有可用的格式化程序捆绑在一起。只要您安装并启用了扩展程序，使用“格式化文档”命令或++进行格式化就Shift应该可以立即使用。AltF

Vetur 的设置允许用户配置其支持的每种语言使用哪个可用格式化程序（Prettier 是除 Sass 和 Stylus 之外的所有语言的默认设置）。如果您更喜欢使用其他格式化解决方案，也可以按语言或完全关闭格式化程序。