Although my question may seem familiar, I have yet to find a solution after reading through numerous similar queries.
For my project development, I utilize Visual Studio Code with Angular, Typescript, and external libraries. With many lengthy lines of HTML (and more) in the project, I am looking to ensure well-formatted code. Here's a brief example:
Before formatting:
<grid-column field="formatCode" title="Format" width="65" class="status-column cell-with-button" *ngIf="width > 1" [class]="{ codeColumn: true }" [hidden]="columns[7].hidden"></grid-column>
Expected result:
<grid-column field="incoTermCode" title="Incoterm" width="65"
class="status-column cell-with-button" *ngIf="width > 1"
[class]="{ codeColumn: true }" [hidden]="columns[7].hidden"
></grid-column>
The desired behavior is to wrap lines when exceeding the max length but without moving each attribute/property to a new line individually. Instead, keeping the line going until reaching the max length, then proceeding to the next line as needed.
Previously, I used Prettier code formatter, but it doesn't offer the exact option I desire as explained here(scroll down for answers). So this is how Prettier formats the above example:
Prettier formatting:
<grid-column
field="formatCode"
title="Format"
width="65"
class="status-column cell-with-button"
*ngIf="width > 1"
[class]="{ codeColumn: true }"
[hidden]="columns[7].hidden"
></grid-column>
This format is acceptable, but let's consider another example:
Expected:
<div class="valid" *ngIf="form.get('pieces').get([i]).get('quantity').valid>
<img alt="Validity icon - valid" src="assets/common/images/icons/ValidIcon.svg">
</div>
Prettier output:
<div
class="valid"
*ngIf="
form
.get('pieces')
.get([i])
.get('quantity').valid
"
>
<img alt="Validity icon - valid" src="assets/common/images/icons/ValidIcon.svg" />
</div>
Considering these examples are relatively short, imagine the formatting challenges presented by much longer lines in my project. While I appreciate Prettier's efficiency, I aim to avoid bloating my files unnecessarily.
Any suggestions or recommendations would be greatly appreciated!