How to configure Prettier in Webstorm

This is a follow up to a previous post which appeared to be stuck waiting for approval.

The situation I am facing in my WebStorm environment is that, while I have a very well-defined set of TypeScript Code Style settings configured in WebStorm, my Angular 21 project is set up to use Prettier (^3.8.1) which is now the default ‘linter’ for Angular. It would appear that my WebStorm settings are being ignored in favour of the (default) Prettier settings.

Realizing this might be the case, I have attempted to read the disparate scraps of documentation on how to configure Prettier in WebStorm (from JetBrains and Prettier sites). All of it is particularly unhelpful.Instead, I turned to Claude:

My [Claude's] suggestion

Option 1: Disable Prettier in Settings → Languages & Frameworks → JavaScript → Prettier

Given that you have strong, considered code style preferences and sixty libraries to maintain consistently — Option 1 is cleaner. Prettier is opinionated by design and its opinions may not align with yours, particularly around:

  • Brace placement
  • Line length decisions
  • Object formatting
  • The way it handles long chained expressions

WebStorm's own TypeScript formatter is more configurable and will respect your existing settings faithfully. Prettier's value proposition is consistency across a team — for a solo-authored ecosystem with established conventions it adds friction rather than removing it.

Hope this might help others.

And, of course, full credit to Claude!
 

0
1 comment

Indeed, IDE auto-enables Prettier support if prettier is listed in the project dependencies. And Prettier overrides the IDE own code style preferences - it is used as the default project formatter.

If you prefer using the IDE code style settings, disabling Prettier in Settings → Languages & Frameworks → JavaScript → Prettier is the right solution.
 

0

Please sign in to leave a comment.