Skip to content

fix(@schematics/angular): add missing prettier config #30590

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.

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

Merged
merged 1 commit into from
Jun 24, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/schematics/angular/workspace/files/package.json.template
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,16 @@
"watch": "ng build --watch --configuration development"<% if (!minimal) { %>,
"test": "ng test"<% } %>
},
"prettier": {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general, I am not a fan of having tools configured in the package manifest. I’d rather have the additional config file which is clearer.

Thoughts @clydin & @dgp1130 ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My thinking here was that creating a dedicated file may be more confusing for people who don't actively use prettier. It feels a bit less boilerplate-y. But I don't have super strong opinions either way.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That’s a valid point.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually this will be super confusing for anyone using prettier since creating a prettierrc file will have zero affect (prettier doesn't merge configurations but only take one; and the one inside the package.json has the highest order)
and I'm talking from experience because I faced it before myself as in one repo someone configured prettier in the package.json and I was trying to add one plugin and it wasn't working and it took me forever to figure out why

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there an issue in prettier about that behavior? That seems worth fixing independent of this change.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's how it works
I can open an issue there and see where it goes, but I don't think they will change this behavior since it can lead to many repos being broken

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I wasn't talking about changing the behavior. I was talking about silently ignoring a config file that's clearly "meant" to be used (it's called prettierrc after all) and not warning the user about it. Printing a warning should hopefully not break anything and would remove this confusion?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay I will create an issue now

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"overrides": [
{
"files": "*.html",
"options": {
"parser": "angular"
}
}
]
},
"private": true,
"dependencies": {
"@angular/common": "<%= latestVersions.Angular %>",
Expand Down
6 changes: 6 additions & 0 deletions packages/schematics/angular/workspace/index_spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,10 @@ describe('Workspace Schematic', () => {
const { tasks } = parseJson(tree.readContent('.vscode/tasks.json').toString());
expect(tasks).not.toContain(jasmine.objectContaining({ type: 'npm', script: 'test' }));
});

it('should include prettier config overrides for Angular templates', async () => {
const tree = await schematicRunner.runSchematic('workspace', defaultOptions);
const pkg = JSON.parse(tree.readContent('/package.json'));
expect(pkg.prettier).withContext('package.json#prettier is present').toBeTruthy();
});
});
Loading