Explain ESLint config code

What this ESLint config sample shows

a list of blocks

The file exports a list, and ESLint applies every block that matches a file, in order. On a test project, npx eslint . reported src/cart.js with 4 problems (2 errors, 2 warnings) and exited with code 1, which is what makes a CI step fail.

files and globals

files limits a block to matching paths, and globals tells ESLint which names exist there. document passed in src, because globals.browser has it, but process was flagged 'process' is not defined. The same process in scripts/build.js passed, because that block uses globals.node.

rules and severity

Each rule is "off", "warn" or "error", and some take options after it. no-console with allow: ["error"] warned about console.log and let console.error through. Only errors change the exit code: warnings alone would still exit with 0.

later blocks win

js.configs.recommended sets no-unused-vars to error, and the src block below it sets warn. Later wins: npx eslint --print-config src/cart.js showed no-unused-vars at 1, which is warn, and the unused variable was reported as a warning.

Good to know

• Run with ESLint 9.39.5, @eslint/js 9.39.5 and globals 17.14.0 on a test project with one file in each folder.
• A block with only ignores leaves those paths out everywhere. Asked to check dist/bundle.js directly, ESLint printed File ignored because of a matching ignore pattern.
• npx eslint --fix only changes == where it's safe: it turned typeof x == "string" into === but left items.length == 0 as it was, for you to change.

Watch out: ignores only works for every file when it's alone in its block. Adding rules: { semi: "error" } next to ignores: ["dist/"] made ESLint check dist again, and it failed on the build output with Parsing error: Unexpected token ;. Moving js.configs.recommended to the end of the list has a similar surprise: it turned no-unused-vars back into an error.