WebStorm Prettier Not Working

How to fix it

Try these in order — the most common fix is first.

1. 1. Install and enable Prettier

   Copy steps
   1. Press Ctrl+Alt+S, open Plugins and make sure Prettier is enabled
   2. Run npm install --save-dev --save-exact prettier in the terminal
   3. Open Languages & Frameworks | JavaScript | Prettier and choose Automatic or Manual configuration
   Did this fix it? Yes No

2. 2. Turn on Run on save

   Copy steps
   1. In the Prettier settings select Run on save
   2. Check the Run for files pattern, for example add scss: **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,scss}
   Did this fix it? Yes No

3. 3. Make Prettier the default formatter

   Copy steps
   1. Select Manual Prettier configuration
   2. Select Run on 'Reformat Code' action
   3. Press Ctrl+Alt+L
   Did this fix it? Yes No

4. 4. Read the status bar icon

   Copy steps
   1. Hover the Prettier icon in the status bar to see the problem
   2. Use its menu to restart the language service, edit the config or open settings
   Did this fix it? Yes No

Symptoms

Prettier does not format on save, Reformat Code ignores Prettier, or an error icon appears in the status bar.

Why it happens

• Prettier plugin disabled
• Prettier not installed in a node_modules folder within the file's scope
• File does not match the Run for files glob
• Wrong Node.js version or invalid Prettier package
• Language service stopped after its inactivity timeout (default 5 minutes)

This guide also covers

• webstorm prettier not working
• prettier on save webstorm
• webstorm prettier not formatting

Other WebStorm errors

• WebStorm Node.js Interpreter Not Configured
• WebStorm ESLint Not Working
• WebStorm TypeScript Language Service Errors and Slowness
• WebStorm Indexing Takes Forever
• WebStorm High Memory Usage: Increase Heap Size
• WebStorm Debugger Not Attaching or Breakpoints Not Hit
• WebStorm License Activation and Login Problems