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

Screen shot of error message

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!

Author: Grant Norwood

Designer of things you click. Vegetable rights activist. Volunteer with tiny humans. Austin-ish, Texas.

People describe me as a rad web developer, product manager, solutions architect, public speaker, volunteer, and non-profit board member.

Did you know you can leave a comment?

%d bloggers like this: