ESLint Unexpected Token After Prettier Install: Quick Fix

Yeah, that error pops up right after installing Prettier and it feels like it broke everything. It didn't. Calm down. The fix is usually one line in your ESLint config.

The Fix

Open your .eslintrc.json (or .eslintrc.js if you're old school). Look at the parser field. If it's missing or set to espree (the default), that's your problem. Prettier doesn't touch parsing, but if you're using React with JSX, your ESLint needs to know how to parse that JSX. When you install Prettier via create-react-app or manually, sometimes the config gets messed up.

Here's what works:

npm install --save-dev @babel/eslint-parser

Then update your ESLint config:

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

If you're using TypeScript, swap that parser for @typescript-eslint/parser instead.

Why This Works

ESLint's default parser, espree, only understands standard JavaScript. It chokes on JSX syntax because JSX isn't valid JavaScript until it's compiled. Prettier doesn't change this—it just formats your code. But when you run ESLint after Prettier, it's often the first time you notice the parser limitation because Prettier might have reformatted something that pushes ESLint over the edge. Or more commonly, you installed Prettier and added it to your npm scripts without realizing your ESLint config was already incomplete.

The @babel/eslint-parser tells ESLint to use Babel's parser, which handles JSX and modern syntax. That's why the error disappears.

Less Common Variations

Sometimes the fix isn't the parser. Here are other scenarios I've seen in the trenches:

1. Missing Babel Configuration

If you've got the parser set but still get the error, check for a babel.config.js or .babelrc file. The parser needs Babel config to know what presets to use. For React, you need:

// babel.config.js
module.exports = {
  presets: ['@babel/preset-react']
};

2. ESLint Version Mismatch

ESLint v9 changed a lot. If you're using ESLint 9+, the config format is different. You might be using the old .eslintrc format but ESLint expects the new flat config (eslint.config.js). That mismatch can cause weird errors. Check your ESLint version with npx eslint --version. If it's 9.x, switch to flat config.

3. Prettier Plugin Conflicts

You might have installed eslint-config-prettier and eslint-plugin-prettier. That's good—it stops formatting rules from clashing. But if you didn't add these to your config, you could still get errors. Make sure your ESLint config has:

{
  "extends": ["plugin:prettier/recommended"]
}

That plugin disables ESLint formatting rules that conflict with Prettier, so you don't end up with 'Unexpected token' from a rule trying to enforce its own style.

Prevention

Don't install Prettier and ESLint separately without setting up integration. Use the official guides. For React, I'd always start with npx create-react-app because it bundles ESLint config that already works. Then add Prettier on top.

Also, always keep your ESLint and Babel versions in sync. If you upgrade one, check the other. And test your linting after any config change—don't wait until you've got 40 errors before checking.

One more thing: if you're using VS Code, make sure the ESLint extension is running after you make changes. Sometimes it caches the old config and you'll think the error is still there when it's not. Reload the window if you need to.

That's it. Fix the parser, keep your config clean, and you won't see this again. I've dealt with this on at least a dozen projects over the years, and it's never been anything more than a missing parser or config mismatch.