Explain Codes LogoExplain Codes Logo

Eslint: "error Parsing error: The keyword 'const' is reserved"

javascript
eslint
javascript-syntax
es6
Anton ShumikhinbyAnton ShumikhinยทFeb 6, 2025
โšกTLDR

Solve the "Parsing error: The keyword 'const' is reserved" in ESLint following these steps:

  1. Update .eslintrc to enable ES6 syntax:
{ "parserOptions": { "ecmaVersion": 2015 // Time to go "Back to the Future"! ๐Ÿ˜‰ } }
  1. Make sure your ESLint recognizes ES6. If you're using Babel, install @babel/eslint-parser:
{ "parser": "@babel/eslint-parser" // Let ESLint speak Babel ๐Ÿ˜‰ }
  1. Check Node.js version. Outdated Node.js may cause compatibility issues with ES6 features.

Configure ESLint properly

ESLint configuration resides in the .eslintrc file. There we need to specify that we are using modern JavaScript syntax. Here's the game plan:

  • Make sure ESLint has version v7.30.0 or up. Latest versions provide full ES6 support.
  • Put /* eslint-env es6 */ at the top of your JavaScript files - This is like telling ESLint: "Hey, we're in the ES6 era now!".
  • Set "latest" as the ecmaVersion in parserOptions. This enables the newest ECMAScript features.
  • The env object should include { "es6": true }. This gives access to ES6 global objects, like the beloved Promise.
  • Keep eslint-plugin and eslint-config up-to-date. Up-to-date devDependencies make for a happy project! ๐Ÿ˜„
  • In Visual Studio Code, use "eslint.options" in settings.json to match your ESLint's behaviour to your coding style.

Advanced: Managing upgrades and potential issues

Upgrades are great, most of the time. Sometimes though, they can introduce new problems. For those situations:

  • Run periodic npm package updates. This ensures version compatibility and can resolve issues introduced by previous updates.
  • Keep in mind: If "latest" in the ecmaVersion causes problems, you can set it to 2017 or the specific version suiting your codebase best.

Remember, using /* eslint-disable */ is akin to chopping off the branch you're sitting on - It's rarely the best solution!

ESLint fine-tuning

ESLint can be fine-tuned to accommodate almost any coding style or project configuration:

  • Use additional parserOptions in .eslintrc.js for custom ESLint behaviour.
  • "useEslintrc": false in the Visual Studio Code settings.json is an override for project-specific .eslintrc.json settings.
  • Place ESLint configuration comments at the beginning of the file to ensure they're applied throughout the file.