VS Code Prettier Errors: Troubleshooting & Fixes

To fix Prettier errors in VS Code, set Prettier as your default document formatter in settings, correct any syntax errors in your .prettierrc file, and resolve conflicting rules with ESLint. Most formatting failures come down to simple setup misconfigurations, bad JSON formatting inside config files, or competing VS Code extensions fighting over the same file types.

Understanding Prettier Errors: What's Happening?

Fixing Prettier errors in VS Code usually means resolving broken configuration syntax, setting Prettier as your default document formatter, or clearing up rule conflicts with ESLint. Because Prettier handles code layout rather than logic bugs, most failures stem from JSON syntax mistakes, missing extension permissions, or competing settings in .vscode/settings.json.

It helps to keep Prettier's core job in mind when debugging. Prettier is an opinionated code formatter—it doesn't care about unused variables, missing imports, or broken logic. It takes your code, strips away existing styling, and reprints it according to set rules. When it fails to run on save, it's usually because the extension encountered invalid syntax it can't parse, couldn't find a valid config, or was overridden by another extension.

You'll typically notice something is wrong when hitting save does absolutely nothing, or when a small popup directs you to the Output tab. Checking that Output tab (selecting "Prettier" from the dropdown) gives you the raw stack trace. That log will tell you instantly whether you're dealing with a broken JSON file or an active syntax error inside your code.

The Most Common Culprits: Configuration Issues

Invalid config files represent the single most common reason Prettier suddenly stops formatting files in VS Code. When Prettier encounters malformed JSON, dangling commas in JS export files, or invalid keys inside .prettierrc, it fails silently or throws an output window error without altering your active editor file.

Prettier searches up the directory tree starting from the active file's location until it finds a config file. If you have a hidden .prettierrc higher up in your folder structure with bad syntax, it will break formatting for child projects that don't have their own explicit rules. Teams often hit this issue when cloning repositories that lack local settings files, forcing Prettier to fall back on global user configurations that might conflict.

If you suspect a configuration issue, try running Prettier directly from your terminal using npx prettier --check .. The command line output pinpointing which file fails to parse saves you from guessing whether VS Code or Prettier itself is at fault.

Debugging Your `.prettierrc.js` (or `.prettierrc.json`)

Debugging your .prettierrc file requires validating its syntax format, checking file placement in the root directory, and ensuring valid JavaScript exports or JSON key-value pairs. JSON configs strictness forbids trailing commas and single quotes, while .prettierrc.js files must explicitly export an object through standard module.exports syntax.

Here is a quick reference for common mistakes across different config formats:

• In JSON files (.prettierrc, .prettierrc.json): Ensure all keys and string values use double quotes. Trailing commas after the final key-value pair will break the parser completely.
• In JS files (.prettierrc.js, prettier.config.js): Make sure you are using module.exports = { ... } rather than ES module exports like export default { ... }, unless your project explicitly defines "type": "module" in package.json.
• In YAML files (.prettierrc.yaml): Watch your indentation carefully, as misplaced spaces alter how settings get parsed.

VS Code Settings and Prettier Integration

VS Code won't auto-format files unless Prettier is explicitly assigned as the default formatter in your workspace settings. If editor.defaultFormatter points to another extension or editor.formatOnSave remains turned off, Prettier sits idle regardless of how perfectly you have configured your project's local .prettierrc config file.

You can check these options in VS Code's settings interface (Ctrl+, or Cmd+,) or by inspecting your settings.json file directly. To avoid scope issues where personal editor settings override project standards, add a .vscode/settings.json file right in your project root with these exact definitions:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Setting language-specific default formatters guarantees that VS Code won't accidentally hand off JavaScript, TypeScript, or HTML formatting to built-in language servers or third-party extensions.

Prettier Extension Conflicts

Conflicting code formatters often overwrite Prettier or disable auto-formatting on save when multiple extensions claim the same file extension. Extensions like Beautify, JS-CSS-HTML Formatter, or language-specific tools regularly collide with Prettier, causing intermittent formatting failures or forcing VS Code to prompt you for a default formatter constantly.

If formatting suddenly stops working after installing new extensions, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P), type "Format Document With...", and press Enter. VS Code will display every extension registered to format that active file type. If multiple options show up without a default set, pick "Configure Default Formatter..." and select "Prettier - Code formatter" from the list.

When issues persist, disabling other code-formatting extensions temporarily helps isolate the conflict. You don't need to uninstall them right away—just disable them for the active workspace to verify if they were blocking Prettier.

File Type and Language Mode Issues

Prettier ignores files whenever VS Code misidentifies their language mode or when file extensions aren't natively supported without community plugins. If your status bar lists a file as Plain Text or an unsupported dialect, Prettier bypasses the document entirely to avoid applying destructive formatting rules across unrecognized code structures.

Check the bottom-right corner of your editor window while viewing the problematic file. If a .jsx file displays "JavaScript" instead of "JavaScript React," or a template file displays "Plain Text," Prettier won't know which parser to assign. You can fix this by clicking the language indicator in the status bar and selecting "Configure File Association for '.ext'..." to permanently tie that extension to the correct language mode.

Dealing with Mixed File Types

Mixed-language files containing inline code blocks, like Markdown or embedded HTML templates, often fail when Prettier encounters invalid syntax inside embedded scripts. You can solve these failures by configuring strict parser overrides inside .prettierrc or ignoring problematic files completely using a root-level .prettierignore file within your project repository.

For complex projects, tell Prettier exactly which parser to use for unusual file extensions by using the overrides key in your configuration file:

{
  "overrides": [
    {
      "files": "*.myhtml",
      "options": {
        "parser": "html"
      }
    }
  ]
}

If you have auto-generated files, heavy build outputs, or legacy vendor scripts that shouldn't be touched, create a .prettierignore file in your repository root. Add paths just like you would in a .gitignore file:

build/
dist/
*.min.js
package-lock.json

Resolving Conflicts with Other Tools

Tooling collisions happen when linters like ESLint or Stylelint enforce stylistic rules that directly contradict Prettier's formatting decisions. To resolve these friction points, you must disable all layout rules inside your linter by implementing dedicated compatibility configurations like eslint-config-prettier, letting Prettier handle formatting exclusively without linter warnings.

The standard industry recommendation separates concerns cleanly: linters check code quality (finding dead code, unsafe async calls, or undeclared variables), while Prettier handles code layout (quotes, semi-colons, tab widths, and trailing commas). When ESLint tries to enforce single quotes while Prettier is configured for double quotes, they enter an endless loop of re-formatting every time you save.

ESLint Integration: The `prettier-eslint` Adapter

Integrating ESLint with Prettier requires offloading all visual layout rules to Prettier so ESLint can focus strictly on catching logic bugs. Using eslint-config-prettier turns off conflicting ESLint rules, while eslint-plugin-prettier lets ESLint report formatting issues directly as actionable linter errors during build checks and pre-commit hooks.

To set up a clean integration, install eslint-config-prettier as a dev dependency:

npm install --save-dev eslint-config-prettier

Then, add "prettier" to the very end of your .eslintrc extends array. Placing it last ensures it overrides any previous formatting rules declared by popular presets like Airbnb or Standard JS:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier"
  ]
}

Advanced Configuration and Edge Cases

Edge-case Prettier errors frequently trace back to broken custom plugins, Monorepo configuration inheritance issues, or node version mismatches across build environments. Resolving these deep-level bugs involves checking VS Code's extension output logs, configuring multi-root workspace settings explicitly, and matching global node modules with repository devDependencies across dev teams.

In monorepo setups (using tools like Turborepo, Nx, or pnpm workspaces), the VS Code extension can get confused about which node_modules directory contains the active Prettier installation. You can fix this by explicitly pointing the extension to your local package in .vscode/settings.json:

{
  "prettier.prettierPath": "./node_modules/prettier"
}

If you rely on plugins like prettier-plugin-tailwindcss for class sorting, ensure those plugins are installed locally inside the project rather than globally on your system. Prettier's extension often fails to load global plugins when working inside isolated workspace environments.

Tooling Comparison: Code Quality vs. Formatting

Understanding where Prettier fits alongside other developer tools makes troubleshooting easier. Here is how common formatting and linting utilities compare:

FAQ

How do I install Prettier in VS Code?

Install the "Prettier - Code formatter" extension from the VS Code Marketplace. Then, configure your VS Code settings to use Prettier as the default formatter for your file types.

Why isn't Prettier formatting my code?

Check if Prettier is enabled in your VS Code settings. Verify your project has a `.prettierrc` or similar configuration file. Ensure the file type is supported by Prettier.

How do I format a single file with Prettier?

Right-click in the file and select "Format Document" from the context menu. Alternatively, use the keyboard shortcut (usually Shift+Alt+F).