7

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

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

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

然后我通过安装它尝试了 Vetur，但我没有看到美化编辑器中当前代码的选项。Shift++Alt命令F 无效。_

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

4

2 回答 2

8

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

使用扩展vetur和更漂亮（特别是esbenp.prettier-vscodePrettier - 代码格式化程序）。（您可以通过 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，希望获得最好的结果并保持警惕。但我是一个肤浅的程序员，我可能永远不会被它的已知问题绊倒。

于 2018-05-19T01:13:57.420 回答
1

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

  1. 转到 vsCode 扩展区。
  2. 找到 Vetur 并选择齿轮图标进入 Vetur 的设置。
  3. 向下滚动直到找到
Vetur › Format › Default Formatter: JS
Default formatter for <script> region
  1. pretter-eslint从下拉菜单中选择。（如果您没有看到该选项，您可以安装pretter扩展。
  2. 现在您可以在保存时看到它自动格式化您的代码。
于 2021-02-17T14:23:32.197 回答