ESLint: “Parsing error: Unexpected token” in Visual Studio Code

While adding the plumbing for a new JavaScript website project, I knew it needed an ESLint config to keep my code linted and clean. So I installed ESLint the usual way, answered a few questions to customize my install, and I went along my merry way.

Here’s how to fix “Parsing error: Unexpected token” errors from ESLint when working in Visual Studio Code …

While adding the plumbing for a new JavaScript website project, I knew it needed an ESLint config to keep my code linted and clean. So I installed ESLint the usual way:

Note: The npx command requires [email protected]  Alternatively you can run ./node_modules/.bin/eslint --init.

After being prompted with a few questions to customize my install, I went along my merry way creating files and writing some modern ES6 and ES7 code.  However, the ESLint plugin in Visual Studio Code was giving me odd errors like this in my React JSX code:

  • Parsing error: Unexpected token = 
  • Parsing error: Unexpected token { 
  • Parsing error: Unexpected token / 

Screen shot of error message

The solution

Unexpected token  errors are caused by incompatibilities in your parser options and the code you’re writing.  In this case, I’m using a number of ES6 language features like arrow functions, destructured variables, and such.

The solution is to specify the parser to use in our ESLint configuration – babel-eslint.  Because ESLint doesn’t support the more modern JavaScript syntax, we need to use the babel-eslint  plugin to automatically export a compatible version of our code that ESLint can read.

Here’s an example of my .eslintrc.json  file with the appropriate parser  specified:

Note: Your ESLint configuration file may also be named .eslintrc , or .eslintrc.js , or .eslint.yml  depending on the format of your config file.

And that’s how I fixed that.  Simple, yeah?  Well it took me an hour to figure it out, so I hope this post helps you fix it faster than I did!