[go: up one dir, main page]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How can I get Prettier to format Angular HTML without breaking the closing </a> tag onto a new line? #16788

Open
jon9090 opened this issue Oct 26, 2024 · 1 comment
Open

How can I get Prettier to format Angular HTML without breaking the closing </a> tag onto a new line? #16788

jon9090 opened this issue Oct 26, 2024 · 1 comment

Comments

@jon9090
Copy link
jon9090 commented Oct 26, 2024

How can I get Prettier to format Angular HTML without breaking the closing </a> tag onto a new line?

The current formatting output:

<a
  class="link-menu-item"
  type="button"
  cdkMenuItem
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
  [routerLink]="['/link']">
  {{ t('body.menu.open-funds') }}</a
>

https://stackblitz.com/edit/stackblitz-starters-g4dyrm

Example code:

// Run `node index.js` in the terminal
const prettier = require('prettier');
console.log(`Hello Node.js v${process.versions.node}!`);

const html = `
<a
class="link-menu-item"
type="button"
cdkMenuItem
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[routerLink]="['/link']">
{{ t('body.menu.open-funds') }}</a>
`;

const result = prettier.format(html, {
  parser: 'angular',
  singleQuote: true,
  arrowParens: 'always',
  semi: true,
  trailingComma: 'es5',
  bracketSameLine: true,
  printWidth: 140,
});

console.log(result);
yukitakaGrid added a commit to yukitakaGrid/prettier that referenced this issue Oct 26, 2024
@yukitakaGrid
Fix Angular HTML formatting to keep closing </a> tag on the same line
4242987 
Related to prettier#16788

Modify Prettier to format Angular HTML without breaking the closing `</a>` tag onto a new line.

* Update `src/language-html/print/children.js` to handle inline elements like `a` tags and keep them on the same line.
* Adjust `src/language-html/print/element.js` to ensure inline elements are not broken onto new lines.
* Update `tests/integration/__tests__/format.js` to add tests verifying the new behavior for inline elements like `a` tags.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/prettier/prettier/issues/16788?shareId=XXXX-XXXX-XXXX-XXXX).
@yukitakaGrid yukitakaGrid mentioned this issue Oct 26, 2024
Open
@ag-dcm
Copy link
ag-dcm commented Nov 14, 2024 •
edited
Loading

We had this issue recently it turned out to be the whitespace option. https://prettier.io/docs/en/options.html#html-whitespace-sensitivity

We set this to 'ignore' and it no longer does it.

However be careful, as if you had any intentional whitespace without &nbsp; it gets trimmed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jon9090 @ag-dcm