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

Question

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

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

  

扩展中有很多错误，请不要使用它，效果更好   选择是vetur

然后我通过安装它尝试了Vetur但是我没有看到一个选项来美化目前编辑器中的代码。 Shift + Alt + F command无效。

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

Answer 1

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

使用扩展程序vetur更漂亮（特别是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禁用Prettier for HTML。

因此，我开始在vetur环境中启用js-beautify-html，希望能够做到最好，并保持眼睛睁开。但是，我是一个肤浅的编码员，我可能永远不会绊倒已知的问题。

Answer 2

如果你已经在 vscode 上安装了 Vetur 扩展，

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

<块引用>

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

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