html - VS Code indention and prettier - Stack Overflow

admin管理员组

文章数量:1122846

I just have one question, currently I am using prettier and it formats on save but there are just things I don't understand that when I format the spaces or indetion are not equal. Is there a setting I don't know in VS Code ?. How do or what do we set to make it consistent ? Specially the spacing. Thank you.

For example, when I format some button formatted this way

#example 1

   <button
    (click)="delete()"
    mat-button
    color="primary"
    [mat-dialog-close]="true"
  >
    Proceed
  </button>

and sometimes when I format it is formatted this way

      <button (click)="add()" mat-flat-button style="color: #007dff">
        Submit
      </button>

#Another example is this one i formatted this using prettier and as you can see it looks bad and the spacing is too much.

I just have one question, currently I am using prettier and it formats on save but there are just things I don't understand that when I format the spaces or indetion are not equal. Is there a setting I don't know in VS Code ?. How do or what do we set to make it consistent ? Specially the spacing. Thank you.

For example, when I format some button formatted this way

#example 1

   <button
    (click)="delete()"
    mat-button
    color="primary"
    [mat-dialog-close]="true"
  >
    Proceed
  </button>

and sometimes when I format it is formatted this way

      <button (click)="add()" mat-flat-button style="color: #007dff">
        Submit
      </button>

#Another example is this one i formatted this using prettier and as you can see it looks bad and the spacing is too much.

• html
• visual-studio-code
• prettier

Share Improve this question Follow edited yesterday Peter Macej 5,5372929 silver badges5151 bronze badges asked yesterday Mr. Mark TawinMr. Mark Tawin 8111 silver badge66 bronze badges 5

• Why is the spacing too much? The browser certainly doesn't care. Doing automatic indentation for HTML is problematic because we are all very lazy about closing <p> tags. – Tim Roberts Commented yesterday
• so the question sir based on example 1 and example 2 is why is that they are formatted in different ways ? when they are both buttons ? – Mr. Mark Tawin Commented yesterday
• what i mean is that the indention does not look clean – Mr. Mark Tawin Commented yesterday
• Prettier does that for code readability. If the length exceeds a certain threshold, it will try to wrap it. You can read the related documentation: Print Width & Bracket Line – Vinayak Vohra Commented yesterday
• Apps like that are usually hyper-configurable. I'll bet you can make it do what you want. – Tim Roberts Commented yesterday

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I was struggling to get around when I was getting started with Prettier as well. Here are some simple changes you can do to ensure you get what you are looking for:

1. Keeping the JSX attributes on the same line- if you are looking for a cleaner way (the way your example is shown), keeping those attributes in a single line would make it look cleaner and much shorter. For this, you have to un-check Prettier: Single Attribute Per Line from your Settings -

2. Change your Prettier Print Width to something like 1000.

This should work as you are expecting.

本文标签： htmlVS Code indention and prettierStack Overflow