VS Code Prettier Not Working - Complete Troubleshooting Guide

# VS Code Prettier Not Working

You save a file expecting Prettier to format it, but nothing happens. Or formatting produces errors instead of clean code. The "Format Document" command doesn't work, or Prettier formats with wrong settings. Consistent formatting is crucial for readable code, and when Prettier breaks, style inconsistencies creep in.

Understanding Prettier Integration

VS Code Prettier integration requires:

1. 1.Prettier package (npm installed)
2. 2.Prettier extension (esbenp.prettier-vscode)
3. 3.Configuration (.prettierrc or package.json)
4. 4.Format on save setting enabled

Any component missing disables formatting.

Step 1: Verify Prettier Installation

Prettier must be installed as a dependency:

Check local installation: ``bash ls node_modules/prettier npx prettier --version

Check global installation: ``bash npm list -g prettier prettier --version

Install if missing: ```bash # Local (recommended for project consistency) npm install --save-dev prettier

# Global (works across projects) npm install -g prettier ```

Step 2: Check Prettier Extension

The VS Code extension invokes Prettier:

Verify extension: ``bash code --list-extensions | grep prettier

Should show esbenp.prettier-vscode.

Install if missing: ``bash code --install-extension esbenp.prettier-vscode

Check extension logs: Output panel → "Prettier" dropdown → Look for errors

Step 3: Configure Format on Save

Prettier must be set as default formatter and enabled for save:

Configure formatter: ``json { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.formatOnPaste": false, "editor.formatOnType": false }

Language-specific formatter: ``json { "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }

Step 4: Create Prettier Configuration

Prettier needs rules for formatting:

Check for config file: ``bash ls -la .prettierrc* .prettierignore prettier.config.*

Create .prettierrc: ``json { "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5", "printWidth": 100, "bracketSpacing": true, "arrowParens": "always" }

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

Initialize Prettier: ``bash npx prettier --write .

This formats all files and reveals config issues.

Step 5: Fix Prettier Ignore Issues

Files might be ignored unintentionally:

Check .prettierignore: ``bash cat .prettierignore

Common ignores: `` node_modules dist build *.min.js package-lock.json

Make sure your source files aren't listed.

Step 6: Handle ESLint/Prettier Conflicts

ESLint and Prettier can fight over formatting:

Install compatibility package: ``bash npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Add to ESLint config: ``json { "extends": [ "eslint:recommended", "prettier" // Must be last ], "plugins": ["prettier"] }

This disables ESLint rules that conflict with Prettier.

Step 7: Fix Prettier Resolution Issues

VS Code can't find the Prettier module:

Configure package manager: ``json { "prettier.packageManager": "npm", "prettier.resolveGlobalModules": true }

Specify Prettier path: ``json { "prettier.prettierPath": "./node_modules/prettier" }

For monorepos: ``json { "prettier.requireConfig": true, "prettier.useEditorConfig": true }

Step 8: Handle EditorConfig Conflicts

EditorConfig and Prettier should align:

Check .editorconfig: ``bash cat .editorconfig

Align settings: ```ini # .editorconfig root = true

[*] indent_style = space indent_size = 2 charset = utf-8 end_of_line = lf trim_trailing_whitespace = true insert_final_newline = true ```

Prettier reads EditorConfig, but ensure they match.

Step 9: Debug Formatting Issues

See what Prettier is doing:

Enable debug output: ``json { "prettier.debug": true, "prettier.traceLevel": "verbose" }

Check Output panel: Output → "Prettier" → Read for errors

Test Prettier manually: ``bash npx prettier --check src/index.js npx prettier --write src/index.js

If manual works but VS Code doesn't, it's an extension issue.

Step 10: Fix File Type Issues

Prettier might not be configured for your file types:

Enable for specific languages: ``json { "prettier.documentSelectors": ["**/*.js", "**/*.ts", "**/*.vue"], "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }

Install parser for special file types: ``bash npm install --save-dev prettier-plugin-svelte

Then configure: ``json { "prettier.plugins": ["prettier-plugin-svelte"] }

Verification

Test Prettier works:

1. 1.Open a messy JavaScript file
2. 2.Right-click → "Format Document" or Shift+Alt+F
3. 3.Code should reformat to configured style
4. 4.Save file → should format automatically
5. 5.Status bar briefly shows "Formatting..."

Quick Reference

Prettier issues usually stem from missing installation, missing configuration, or formatter not being default. Verify installation, then configure VS Code to use Prettier.