Where in eslint.config.js should I specify "env"?

Question

ESLint introduced a new configuration system in 2022, named "flat config".

Documentation for the new "flat config". | Documentation for the old configuration system.

As you can see in the "flat config" documentation, the eslint.config.js file does not have an "env" key/property where you can specify the environment for the linter ("node" or "browser"). This is easy in the "old" configuration system (using .eslintrc.js or .eslintrc.json).

Without specifying the env property as node, I would have to manually add all the node global variables as follows.

eslint.config.js :

module.exports [
    {
        files: ["**/*.js"],
        languageOptions: {
            globals: {
                console: "writable",
                __dirname: "readable",
                __filename: "readable",
                process: "readable",
                < … more global variables here … >
            }
        },
        rules: {
            // your rules here
        }
    }
]

Surely I am missing something?

Answer 1

Their blog of all places has more details on "env". This took a lot of time to find....

https://eslint.org/blog/2022/08/new-config-system-part-2/#reimagined-language-options

In flat config, we moved all keys related to JavaScript evaluation [including env] into a new top-level key called languageOptions.

https://eslint.org/blog/2022/08/new-config-system-part-2/#goodbye-environments%2C-hello-globals

It doesn’t make sense for ESLint to do this in the core, so we are handing this responsibility back to you. [ Yes, it does, painfully obvious as this stack overflow ticket makes it ]

Then they show a rough example:

export default [
    {
        files: ["**/*.js"],
        languageOptions: {
            globals: {
                ...globals.browser,
                myCustomGlobal: "readonly"
            }
        }
    }
];

I imagine we just need:

    {
        files: ["**/*.js"],
        languageOptions: {
            globals: {
                ...globals.node
            }
       }
    }

And this works for me (I also added parser: babelParser inside languageOptions

ESLint is jquerying things up if you ask me, not providing a clear migration path and preplanning their own demise if they launch ESLint 9.0 without eslintrc support and a "not-my-problem" approach to documenting how to migrate from "env": { "node": true }. They didn't even document the plugins formatting which is "key-value" mapping strings to plugin objects. e.g. { "html": yourHtmlPluginImport }

Answer 2

This is explained in the migration guide (highlights by me):

In eslintrc files, you configure various language options across the env, globals and parserOptions properties. Groups of global variables for specific runtimes (e.g. document and window for browser JavaScript; process and require for Node.js) are configured with the env property.

In flat config files, the globals, and parserOptions are consolidated under the languageOptions key; the env property doesn’t exist. Groups of global variables for specific runtimes are imported from the globals npm package and included in the globals property. You can use the spread operator (...) to import multiple globals at once.

They link to the globals npm package. Then simply do:

import globals from "globals";

const customGlobals = {
  TomSelect: "readable",
}

export default [{
  languageOptions: {
      globals: {
        ...customGlobals,
        ...globals.browser,
        ...globals.jquery,
        ...globals.node,
      },
    }
  }
}];