Skip to content

Add Default Prettier Configuration for Angular Templates #30548

Open
@MikaStark

Description

@MikaStark

Which @angular/* package(s) are relevant/related to the feature request?

No response

Description

Hello Angular Team,

Since Angular v20, component files no longer use the .component suffix by default. As a result, associated template files (e.g., my-feature.html) are no longer automatically recognized by Prettier as Angular templates. This leads Prettier to fall back to its default HTML parser, which doesn't handle Angular-specific syntax correctly.

Proposed solution

To improve the developer experience and avoid formatting issues, it would be helpful for new Angular projects to include a default Prettier configuration specifying the Angular parser for .html files.

Suggested addition to package.json:

"prettier": {
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

This configuration ensures consistent and correct formatting of Angular templates out of the box, without requiring manual setup from the developer. It aligns with Angular’s philosophy of providing strong defaults for common tooling.

Thanks for considering this improvement!

Alternatives considered

Instead of package.json, we could consider having a .prettierrc file to set prettier configuration.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions