我想在 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"
}