Introduction

When VS Code has multiple formatting extensions installed and "Format on Save" is enabled, they can conflict with each other, causing formatting to be applied twice (sometimes with contradictory results), or a prompt appearing every time you save:

bash
There are multiple formatters for 'javascript' files.
Which formatter would you like to use?
- ESLint
- Prettier
- TypeScript and JavaScript Language Features

This slows down the save action and can produce inconsistent formatting.

Symptoms

  • Prompt appears on every save asking which formatter to use
  • File gets formatted twice with different styles
  • Prettier formatting is undone by ESLint or vice versa
  • Save action takes several seconds due to multiple formatting passes
  • Different team members get different formatting results

Common Causes

  • Both Prettier and ESLint extensions have format-on-save enabled
  • VS Code's built-in TypeScript formatter competes with Prettier
  • No default formatter configured for the file type
  • Workspace settings override user settings with a different formatter
  • ESLint and Prettier have conflicting rules (e.g., single vs double quotes)

Step-by-Step Fix

  1. 1.Set a default formatter per language. In .vscode/settings.json:
  2. 2.```json
  3. 3.{
  4. 4."editor.defaultFormatter": "esbenp.prettier-vscode",
  5. 5."[javascript]": {
  6. 6."editor.defaultFormatter": "esbenp.prettier-vscode"
  7. 7.},
  8. 8."[typescript]": {
  9. 9."editor.defaultFormatter": "esbenp.prettier-vscode"
  10. 10.},
  11. 11."[javascriptreact]": {
  12. 12."editor.defaultFormatter": "esbenp.prettier-vscode"
  13. 13.},
  14. 14."[typescriptreact]": {
  15. 15."editor.defaultFormatter": "esbenp.prettier-vscode"
  16. 16.},
  17. 17."[html]": {
  18. 18."editor.defaultFormatter": "esbenp.prettier-vscode"
  19. 19.},
  20. 20."[css]": {
  21. 21."editor.defaultFormatter": "esbenp.prettier-vscode"
  22. 22.}
  23. 23.}
  24. 24.`
  25. 25.Disable ESLint's formatting capability (let Prettier handle formatting, ESLint for code quality):
  26. 26.```json
  27. 27.{
  28. 28."eslint.format.enable": false,
  29. 29."editor.codeActionsOnSave": {
  30. 30."source.fixAll.eslint": "explicit"
  31. 31.}
  32. 32.}
  33. 33.`
  34. 34.And use eslint-config-prettier in your project to disable ESLint rules that conflict with Prettier:
  35. 35.```bash
  36. 36.npm install --save-dev eslint-config-prettier
  37. 37.`
  38. 38.Then in .eslintrc:
  39. 39.```json
  40. 40.{
  41. 41."extends": ["eslint:recommended", "prettier"]
  42. 42.}
  43. 43.`
  44. 44.Configure format on save to use only the default formatter:
  45. 45.```json
  46. 46.{
  47. 47."editor.formatOnSave": true,
  48. 48."editor.formatOnPaste": false
  49. 49.}
  50. 50.`
  51. 51.Verify the formatter order with a test file:
  52. 52.- Open a JavaScript file
  53. 53.- Make an intentional formatting violation (wrong indentation, missing semicolons)
  54. 54.- Save the file
  55. 55.- The file should be formatted by Prettier only, and ESLint should only fix code quality issues

Prevention

  • Always configure editor.defaultFormatter per language in workspace settings
  • Use eslint-config-prettier to eliminate rule conflicts between ESLint and Prettier
  • Commit .vscode/settings.json to ensure all team members use the same formatter
  • Use prettier in your CI pipeline to enforce consistent formatting
  • Disable format-on-save for languages where you do not want automatic formatting
  • Document the team's formatter choice and configuration in CONTRIBUTING.md
  • Run npx prettier --check . in CI to catch formatting inconsistencies
  • Use @trivago/prettier-plugin-sort-imports if import ordering is part of your formatting standard