如何让WebStorm中Prettier使用单引号替代双引号

I’ve run into exactly this frustrating issue before—here are the step-by-step fixes that finally got it working for me:

1. Verify WebStorm’s Prettier Settings First #

Open WebStorm’s Settings (File > Settings or Ctrl+Alt+S), navigate to Languages & Frameworks > JavaScript > Prettier:

• Make sure the Prettier package points to your project’s local node_modules/prettier (not the global one—global installations won’t pick up project-specific configs reliably).
• Check the Run for files pattern: ensure your target file types (like .js, .tsx) are included in the default rule {**/*,*}.{js,ts,jsx,tsx,vue,json,css,scss,less,html}.
• Critical: Set Configuration file to Automatic (let WebStorm detect your package.json), or manually select your project root’s package.json if auto-detection fails.

2. Check for Conflicting Prettier Config Files #

Prettier follows a priority order for configs: .prettierrc (any format: .json, .yml, .js) > prettier.config.js > package.json’s prettier field. If you have an old .prettierrc file in your project with "singleQuote": false, it’ll completely override the setting in package.json. Delete or update any conflicting configs you find.

3. Force WebStorm to Reload Stale Configs #

Sometimes WebStorm hangs onto old cached settings:

• Right-click your project root, select Prettier > Reformat with Prettier to test the config immediately on a file.
• If that doesn’t work, clear WebStorm’s cache: File > Invalidate Caches..., check "Clear file system cache and local history", then restart the IDE.

4. Rule Out ESLint Conflicts #

If your project uses ESLint, its quote rules might overwrite Prettier’s changes:

• Check your .eslintrc (or similar config file) for a rule like "quotes": ["error", "double"]—update it to "quotes": ["error", "single"] to align with Prettier.
• Alternatively, install eslint-config-prettier to disable all ESLint rules that clash with Prettier.

5. Test with Prettier CLI to Isolate the Issue #

Open your project’s terminal and run:

npx prettier --check src/your-test-file.js

If the CLI reports that double quotes need to be changed to single quotes, the problem is definitely in WebStorm’s settings. If the CLI doesn’t detect the issue, your package.json might be in the wrong directory (it needs to be at your project root) or there’s a hidden config file overriding it.

内容的提问来源于stack exchange，提问作者Spurious