我想在 VS Code 中格式化我的 html 代码

Question

我的 angular 组件中的 html 代码，我自动拥有：

     <a
        class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white"
        href="#pablo"
      >
        pink Color
      </a>
      <button
        class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
        type="button"
      >
        <span class="block relative w-6 h-px rounded-sm bg-white"></span>
        <span
          class="block relative w-6 h-px rounded-sm bg-white mt-1"
        ></span>
        <span
          class="block relative w-6 h-px rounded-sm bg-white mt-1"
        ></span>
      </button>

虽然我想这样：

      <a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
        pink Color
      </a>
      <button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
        <span class="block relative w-6 h-px rounded-sm bg-white"></span>
        <span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
        <span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
      </button>

我在我的 settings.json 上进行搜索，但我不知道在哪里无法更改...有什么建议吗？

Answer 1

要获得更好和最新的模式，请在扩展选项卡中的 go 并下载 Prettier 和 ESLint。

因此，在您的设置中，您可以添加：

"[javascript, angular, html, css, json]": {
        "editor.formatOnSave": true
    },
    "eslint.quiet": true,
    "editor.codeActionsOnSave": {
        "eslint.autoFixOnSave": true,
    },

或者编辑任何你想要 vscode 行为的语言。

无论代码行的长度如何，这将使代码始终尽可能地可读。

Answer 2

我找到了解决方案。 在 settings.json 中添加这一行

"[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
}