• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
I would like to format my html code in VS Code
#1
my html code in my angular component, i automatically have :
Code:
<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 :

Code:
<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 ?
  Reply
#2
Method 1:
For a better and current pattern, go in your extensions tab and download Prettier and ESLint.
So, in your settings you can add:
Code:
"[javascript, angular, html, css, json]": {
        "editor.formatOnSave": true
    },
    "eslint.quiet": true,
    "editor.codeActionsOnSave": {
        "eslint.autoFixOnSave": true,
    },
Or edit for any language you want to vs code act.
This will make the code always as readable as possible regardless of the length of the code line.

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

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


Forum Jump:


Users browsing this thread: 1 Guest(s)