🔧 Error Fixes
· 1 min read

Prettier Not Formatting on Save — How to Fix It


// You save the file but Prettier doesn't format it
// Or: "There are multiple formatters for 'javascript'"

Prettier is installed but not running when you save. Usually a VS Code configuration issue.

Fix 1: Set Prettier as Default Formatter

// .vscode/settings.json
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

Fix 2: Enable Format on Save

VS Code → Settings → Search "format on save" → Check the box

Or add to settings.json:

{
    "editor.formatOnSave": true
}

Fix 3: Language-Specific Formatter

// .vscode/settings.json — set per language
{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

Fix 4: Prettier Extension Not Installed

# Check VS Code extensions
# Search for "Prettier - Code formatter" by Prettier
# Extension ID: esbenp.prettier-vscode

Fix 5: Config File Issue

# Prettier needs a config file to know it should run
# Create one:
echo '{}' > .prettierrc

# Or in package.json:
{
    "prettier": {
        "semi": true,
        "singleQuote": true
    }
}

Fix 6: ESLint Conflict

# ❌ ESLint and Prettier fighting over formatting
# ✅ Install eslint-config-prettier
npm install -D eslint-config-prettier

# Add to .eslintrc
{
    "extends": ["eslint:recommended", "prettier"]
}