Skip to content

Preserve formatting of multi-line template literal values assigned to Angular attributes? Since 3.6Β #17729

@ravindUwU

Description

@ravindUwU

Prettier 3.6.2
Playground link

--parser angular

Input:

<c [a]="`1
2`" />

Output:

<c
  [a]="
    `1
2`
  "
/>

Expected output:

<c
  [a]="`1
2`"
/>

Why?

Prettier seems to move multi-line template literals assigned as attribute values into their own lines and indents them forward, i.e., formatting this πŸ‘‡,

key="value"

...as πŸ‘‡,

key="
  value
"

While this works well for 1) long template literals that exceed the print width and therefore must be wrapped and 2) more "complicated" expressions with, e.g., several parts +ed together, I think Prettier should leave "simple" multi-line template literals as-is. It looks better and is more space-efficient this way.

This would also be consistent with how Prettier formats TypeScript/TSX, rewriting this πŸ‘‡,

<c a={`1
2`} />

...as πŸ‘‡,

<c
  a={`1
2`}
/>;

...instead of something like πŸ‘‡,

<c
  a={
    `1
2`
  }
/>;

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueGood fist issue!help wantedWe're a small group who can't get to every issue promptly. We’d appreciate help fixing this issue!lang:angularIssues affecting Angular template (not general JS/TS issues used for Angular)locked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions