如何在 VS Code 中重新格式化 Vue.js 组件？
How to reformat a Vue.js component in VS Code?
我正在使用 Visual Studio 代码编写 Vue.js 组件，需要重新格式化该组件的代码。
我没有找到任何内置的格式化程序，插件的首选是 vue-buetify 安装后通知
There are many bugs in the extension, please do not use it, the better choice is vetur
然后我通过安装 Vetur 进行了尝试，但是我没有看到美化编辑器中当前代码的选项。 Shift + Alt + F 无效。
我怎样才能真正美化（重新格式化）Vue 组件的代码？
自从我以前工作的项目有一天停止格式化以来，我一直在摆弄格式化。以下是我认为当前最先进的技术：
使用扩展 vetur 和 prettier（具体来说，esbenp.prettier-vscode Prettier - 代码格式化程序）。 （您通过 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 月），更漂亮的格式 HTML 作为 JSX。提到了许多细微之处，但我已经掌握的一个问题是 JSX 将 begin/empty/end 标签转换为空标签，例如转换为 .显然 React 和（我相信）Vue 不喜欢这样，因此 vetur 为 HTML.
禁用了 Prettier
因此，我将继续在 vetur 设置中启用 js-beautify-html，希望一切顺利并保持警惕。但我是一个肤浅的编码员，我可能永远不会被它的已知问题绊倒。
如果你已经在 VS Code 上安装了 Vetur 扩展，
- 转到 VS Code 扩展区。
- 找到 Vetur 和 select 齿轮图标以进入 Vetur 的设置。
- 向下滚动直到找到
Vetur › Format › Default Formatter: JS
Default formatter for <script> region
- Select
pretter-eslint 来自下拉菜单
（如果您没有看到该选项，您可以安装 Prettier 扩展）。
- 现在您可以看到它会在您保存时自动格式化您的代码。
2022 年， 盛行的 Vue 文件格式化情况有了很大改善。
Vetur 仍然是在 VS Code 中管理 .vue 文件的实际解决方案，但在提出这个问题后，Prettier added full support for them (and HTML proper)。这意味着如果您愿意，您可以使用不带 Vetur 的 Prettier 来格式化它们。
请注意，Vetur 不支持 VS Code 的“格式选择”功能，尽管 Prettier 支持（a small set of languages）：
Vetur only has a "whole document formatter" and cannot format arbitrary ranges. As a result, only the Format Document command is available.
The Format Selection command does not work.
如果您决定使用 Vetur，则不需要任何其他扩展即可使格式正常工作，因为该扩展与 all of its available formatters 捆绑在一起。只要您安装并启用了扩展程序，就可以使用“格式化文档”命令或 Shift + Alt + F 进行格式化 应该开箱即用。
Vetur 的设置允许用户配置其可用格式器中的哪个用于它支持的每种语言（Prettier 是除 Sass 和 Stylus 之外的所有语言的默认设置）。如果您更喜欢使用其他格式化解决方案，也可以按语言关闭格式化程序，or entirely。
我正在使用 Visual Studio 代码编写 Vue.js 组件，需要重新格式化该组件的代码。
我没有找到任何内置的格式化程序，插件的首选是 vue-buetify 安装后通知
There are many bugs in the extension, please do not use it, the better choice is vetur
然后我通过安装 Vetur 进行了尝试，但是我没有看到美化编辑器中当前代码的选项。 Shift + Alt + F
我怎样才能真正美化（重新格式化）Vue 组件的代码？
自从我以前工作的项目有一天停止格式化以来，我一直在摆弄格式化。以下是我认为当前最先进的技术：
使用扩展 vetur 和 prettier（具体来说，esbenp.prettier-vscode Prettier - 代码格式化程序）。 （您通过 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 月），更漂亮的格式 HTML 作为 JSX。提到了许多细微之处，但我已经掌握的一个问题是 JSX 将 begin/empty/end 标签转换为空标签，例如转换为 .显然 React 和（我相信）Vue 不喜欢这样，因此 vetur 为 HTML.
禁用了 Prettier因此，我将继续在 vetur 设置中启用 js-beautify-html，希望一切顺利并保持警惕。但我是一个肤浅的编码员，我可能永远不会被它的已知问题绊倒。
如果你已经在 VS Code 上安装了 Vetur 扩展，
- 转到 VS Code 扩展区。
- 找到 Vetur 和 select 齿轮图标以进入 Vetur 的设置。
- 向下滚动直到找到
Vetur › Format › Default Formatter: JS Default formatter for <script> region
- Select
pretter-eslint来自下拉菜单
（如果您没有看到该选项，您可以安装 Prettier 扩展）。 - 现在您可以看到它会在您保存时自动格式化您的代码。
2022 年，
Vetur 仍然是在 VS Code 中管理 .vue 文件的实际解决方案，但在提出这个问题后，Prettier added full support for them (and HTML proper)。这意味着如果您愿意，您可以使用不带 Vetur 的 Prettier 来格式化它们。
请注意，Vetur 不支持 VS Code 的“格式选择”功能，尽管 Prettier 支持（a small set of languages）：
Vetur only has a "whole document formatter" and cannot format arbitrary ranges. As a result, only the Format Document command is available. The Format Selection command does not work.
如果您决定使用 Vetur，则不需要任何其他扩展即可使格式正常工作，因为该扩展与 all of its available formatters 捆绑在一起。只要您安装并启用了扩展程序，就可以使用“格式化文档”命令或 Shift + Alt + F 进行格式化 应该开箱即用。
Vetur 的设置允许用户配置其可用格式器中的哪个用于它支持的每种语言（Prettier 是除 Sass 和 Stylus 之外的所有语言的默认设置）。如果您更喜欢使用其他格式化解决方案，也可以按语言关闭格式化程序，or entirely。