Docs: (languageOptions.globals) How to specify more than one globals.(env)

[codyswanner]

Docs page(s)

https://eslint.org/docs/latest/use/configure/migration-guide#configuring-language-options
and
https://eslint.org/docs/latest/use/configure/language-options

What documentation issue do you want to solve?

Currently the docs specify how to use a single globals.brower or globals.jest or globals.(env), but not more than one at a time. The docs suggest that using the spread operator should work, so maybe something like this:

export default [
  {files: ["**/*.{js,mjs,cjs,jsx}"]},
  {languageOptions: { globals: ...globals.browser, globals.jest }},
  pluginJs.configs.recommended,
  pluginReact.configs.flat.recommended,
  {rules: {"react/prop-types": "off"}},
  jestConfig.configs['flat/recommended']
];

But that does not work, and neither does

export default [
  {files: ["**/*.{js,mjs,cjs,jsx}"]},
  {languageOptions: { globals: ...globals.browser, ...globals.jest }},
  pluginJs.configs.recommended,
  pluginReact.configs.flat.recommended,
  {rules: {"react/prop-types": "off"}},
  jestConfig.configs['flat/recommended']
];

and neither does

export default [
  {files: ["**/*.{js,mjs,cjs,jsx}"]},
  {languageOptions: { globals: globals.browser, globals.jest }},
  pluginJs.configs.recommended,
  pluginReact.configs.flat.recommended,
  {rules: {"react/prop-types": "off"}},
  jestConfig.configs['flat/recommended']
];

or

export default [
  {files: ["**/*.{js,mjs,cjs,jsx}"]},
  {languageOptions: { globals: [globals.browser, globals.jest] }},
  pluginJs.configs.recommended,
  pluginReact.configs.flat.recommended,
  {rules: {"react/prop-types": "off"}},
  jestConfig.configs['flat/recommended']
];

I have tests that are using BOTH jest globals, and window (browser) globals, I need BOTH! How can I configure this?

What do you think is the correct solution?

I'd like the ESLint docs to specify how to do this. Even better, I'd like the error messages to give me more of a hint than Unexpected token: . because that isn't very helpful, there's plenty of . in my config file, can you give some context, a line number, SOMETHING, and tell me how to fix it? If Unexpected token: ... in languageOptions.globals, maybe I'm trying to do this specific thing (that the docs tell me should work) and you could link me to some information?

It seems like the underlying structure here is objects, so it seems like one of these should work, either with spread syntax:

export default [
  {files: ["**/*.{js,mjs,cjs,jsx}"]},
  {languageOptions: { globals: ...globals.browser, ...globals.jest }},
  pluginJs.configs.recommended,
  pluginReact.configs.flat.recommended,
  {rules: {"react/prop-types": "off"}},
  jestConfig.configs['flat/recommended']
];

which would be fine but kind of unintuitive for a new user, or without spread syntax:

export default [
  {files: ["**/*.{js,mjs,cjs,jsx}"]},
  {languageOptions: { globals: globals.browser, globals.jest }},
  pluginJs.configs.recommended,
  pluginReact.configs.flat.recommended,
  {rules: {"react/prop-types": "off"}},
  jestConfig.configs['flat/recommended']
];

which was the first thing I tried because it makes sense.

Participation

• I am willing to submit a pull request for this change.

Additional comments

In general, I am in favor of MORE specificity and examples in documentation, even at the cost of brevity. Or a happy middle ground: I don't think anyone has ever complained about a documentation that said "find more examples here" and linked to a page full of examples showing how to make each piece of the system singular or plural or what all the options are and what they do, etc. I know that takes time but further examples help a TON when the concept is unclear/not intuitive.

[nzakas]

Unexpected token: . - this is a parsing error coming from Node.js. We don't have any control over that. This means you have invalid JavaScript.

The second example in the migration guide shows how to use a globals object and an additional property. You'd want to use that as your baseline.

I can add another line in each example showing how to do more than one, but this is just standard JavaScript syntax, not anything that is specific to ESLint.