VS Code changes the default format of my HTML

Question

I don't really understand why VS Code changes the format of my HTML, I have already removed prettify. Any idea how to retain the format for the code that I've pulled? Because when I click save the format changes.

This is the format of the code when I pulled it

<div>
                    <ng-container *ngIf="formSnapshot">
                      <feedback-request-form-renderer [answers]="answers"
                        [canEditFeedbackForm]="canEditFeedbackForm"
                        [canEditFeedbackResponse]="canEditFeedbackResponse"
                        [formName]="templateNameDisplay()"
                        [sections]="formSnapshot"
                        (whenEditFeedbackResponse)="editFeedbackResponse($event)"
                        (whenEditNote)="editNote($event)"
                        (whenRemoveNote)="removeNote($event)"
                        (whenRemoveQuestion)="removeQuestion($event)"
                        (whenRephraseQuestion)="rephraseQuestion($event)"
                      >
                      </feedback-request-form-renderer>

                      <div fxLayout="row" fxLayoutGap="24px" *ngIf="hasReceivedResponse">
                        <div fxFlex fxLayout="row">
                          <mat-form-field appearance="outline" class="pr-4" fxFlex>
                            <mat-label>Employee's comments</mat-label>
                            <textarea
                              cdkTextareaAutosize
                              cdkAutosizeMinRows="3"
                              formControlName="comments"
                              matInput
                            >
                            </textarea>
                          </mat-form-field>
                        </div>
                      </div>

But when I save it, the format changes to

<div>
                  <ng-container *ngIf="formSnapshot">
                    <feedback-request-form-renderer [answers]="answers" [canEditFeedbackForm]="canEditFeedbackForm"
                      [canEditFeedbackResponse]="canEditFeedbackResponse" [formName]="templateNameDisplay()"
                      [sections]="formSnapshot" (whenEditFeedbackResponse)="editFeedbackResponse($event)"
                      (whenEditNote)="editNote($event)" (whenRemoveNote)="removeNote($event)"
                      (whenRemoveQuestion)="removeQuestion($event)" (whenRephraseQuestion)="rephraseQuestion($event)">
                    </feedback-request-form-renderer>

                    <div fxLayout="row" fxLayoutGap="24px" *ngIf="hasReceivedResponse">
                      <div fxFlex fxLayout="row">
                        <mat-form-field appearance="outline" class="pr-4" fxFlex>
                          <mat-label>Employee's comments</mat-label>
                          <textarea cdkTextareaAutosize cdkAutosizeMinRows="3" formControlName="comments" matInput>
                            </textarea>
                        </mat-form-field>
                      </div>
                    </div>
                  </ng-container>
                </div>

Where is the setting in VS Code for that ? I want to follow the format of the code from the team I don't want to change it

Answer 1

Click settings in your VS code in the bottom left and type in save in the search bar, untick the Editor: Format On Save box and that should do it