Fixing the '.prettierrc' Invalid Configuration Error in VS Code

The Error Message

You hit Save, expecting your code to snap into place, but nothing happens. Instead of a clean file, you're greeted by a small alert icon in the bottom-right corner of VS Code. When you check the logs, you see this exact message:

Error: Invalid configuration file: .prettierrc

Why This Happens

Prettier is unforgiving. A single misplaced comma or an accidental tab in a YAML file will crash the entire formatter for your project. Usually, the parser encountered a character it didn't expect, causing it to give up on the whole file. Even if 99% of your settings are correct, one tiny syntax error renders the entire file unreadable.

Step 1: Check the Prettier Output Logs

The UI alert is vague, but the internal logs are specific. To find the exact line causing the headache, you need to dig into the extension output.

Open the Output panel in VS Code (Ctrl+Shift+U or Cmd+Shift+U).
In the dropdown menu on the right side of the panel, select Prettier.
Scroll to the bottom. You will see a stack trace with a specific pointer, such as: "Unexpected token } in JSON at position 145".

Step 2: Fix Common Syntax Mistakes

Syntax errors vary depending on the format you chose for your .prettierrc. Check these common culprits first.

If using JSON (Standard .prettierrc)

JSON is the most common format, but it is also the most fragile. It does not support comments or trailing commas. For example, the following config will fail because of the comma after the last value:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80, // <--- This comma will break Prettier
}

Remove that last comma and any // comments to fix it.

If using YAML

YAML errors usually involve "Tabs vs. Spaces." Prettier expects spaces for indentation. If you accidentally hit the Tab key, the parser will fail immediately. Ensure your indentation is consistent—usually two spaces per level.

semi: true
trailingComma: "all"
singleQuote: true
# Ensure there are no hidden tabs before these lines

Step 3: Validate with a Converter

If the file looks fine but still throws errors, try a validator. I often use a YAML ↔ JSON Converter to see if the structure holds up. It runs entirely in the browser, so your project config stays private. If the converter can't parse your code, Prettier definitely won't be able to either.

Step 4: Check for Hidden Characters (BOM)

Windows users should watch out for the Byte Order Mark (BOM). Some editors save UTF-8 files with hidden characters at the very start of the file. Prettier often chokes on these. Look at the bottom-right status bar in VS Code. If it says UTF-8 with BOM, click it, select Save with Encoding, and choose plain UTF-8.

Step 5: Use Explicit File Extensions

When you use a bare .prettierrc file, Prettier has to guess the format. If you have a stray character, it might guess wrong. Try renaming the file to .prettierrc.json or .prettierrc.yaml. This forces the editor to use the correct parser and often reveals syntax highlighting errors you missed.

Verifying the Fix

Once you have cleaned up the syntax, follow these steps to reset the extension:

Save the .prettierrc file.
Open the Command Palette (F1 or Cmd+Shift+P).
Type "Prettier: Restart Server" and hit Enter.
Open a source file (like index.js) and trigger a save. It should now format correctly.

Prevention Tips

Add a Schema: Include "$schema": "http://json.schemastore.org/prettierrc" at the top of your JSON config. This gives you instant red squiggles the moment you make a mistake.
Keep it simple: Avoid complex logic or unusual formats. A simple .prettierrc.json is the most compatible choice for most teams.
Automate checks: Use tools like husky to run prettier --check . before any code is committed. This catches broken configs before they reach your teammates.