I would like to format my html code in VS Code

Question

my html code in my angular component, i automatically have :

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

While I would like that :

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

I search on my settings.json but i don't know where i can't change that... Any Suggestions ?

https://stackoverflow.com/questions/29973357/how-do-you-format-code-in-visual-studio-code-vscode — , May 04 '20 at 14:00
If you're fine with third party solutions, I'd recommend this extension: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify — ruth, May 04 '20 at 14:02
Yes i know how to format a document, but how to change the behaviour of it ? — Tim, May 04 '20 at 14:02

score 0 · Answer 1 · answered May 04 '20 at 14:03

For a better and current pattern, go in your extensions tab and download Prettier and ESLint.

So, in your settings you can add:

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

Or edit for any language you want to vscode act.

This will make the code always as readable as possible regardless of the length of the code line.

it does't work, my code always format in the wong way :/ Tks you — Tim, May 04 '20 at 14:06

score 0 · Answer 2 · answered May 04 '20 at 14:13

0

I find the solution ! Add this lines in settings.json

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

answered May 04 '20 at 14:13

Tim

162
2
10

I would like to format my html code in VS Code

2 Answers2