Update JS env and remove or update parserOptions.ecmaVersion

[jonaskuske]

Tell us about your environment

• ESLint version: 8.24.0
• eslint-plugin-vue version: 9.5.1
• Node version: 16.14.2

The problem you want to solve.

Currently, eslint-plugin-vue configures both env and parserOptions.ecmaVersion in its base config, with different ECMA versions – 2015 (ES6) and 2020:

eslint-plugin-vue/lib/configs/base.js

Lines 9 to 14 in 467e85f

	ecmaVersion: 2020,
	sourceType: 'module'
	},
	env: {
	browser: true,
	es6: true

The es6 env means that globals that were added after 2015 can't be used without errors, like BigInt, globalThis or WeakRef.

parser.ecmaVersion: 2020 means that parsing breaks on features like dynamic import or nullish assignments.

env automatically sets the version for the parser, but since this plugin explicitly configures the parser version in addition to env, that doesn't work anymore when users change the env in their config. So if users specify es2022: true as their env, the parser will not automatically switch to 2022 syntax as described in the ESLint docs but keep its 2020 config and continue to break on newer syntax.

Your take on the correct solution to problem.

1. Bump the version for the supported JS environment to es2022 (latest). Or, if the outdated version config for the parser is intentional for compat, set the environment to es2020 to align it with the parser version.

2. Either remove the parserOptions.ecmaVersion setting so it is automatically inferred from env, or set it to latest so the parser won't get in the way.

Additional context

Here's a repro repo: https://github.com/jonaskuske/vue-eslint-repro

[FeBe95]

I too stumbled upon this issue today. I had set "es2024": true in my config, but ESLint was still complaining when I tried to use numeric separators like 100_000 in my code. Numeric separators are part of ECMAScript 2021.

The ESLint documentation states that parserOptions.ecmaVersion would be automatically set when using "es2024": true, so I didn't understand what was wrong at first:

es2024 - adds all ECMAScript 2024 globals and automatically sets the ecmaVersion parser option to 15.

With the help of eslint --debug I found out that when using "extends": ["plugin:vue/essential"] this plugin would explicitly specify "ecmaVersion": 2020 in its config, and thus override the automatic behavior of ESLint.

Temporary fix for this is quite simple, I am now explicitly setting

"parserOptions": {
  "ecmaVersion": 2024
},

in my .eslintrc file.

[FloEdelmann]

Will be fixed with #2669 in v10.