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

Question

我的 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

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

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

Answer 2

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

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

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

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

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