Lesson 3 / 27
ESLint Flat Config Basics
Write an ESLint 9 flat config (eslint.config.js) with recommended rules, globals and custom rule severities.
Configuration anatomy
Since ESLint 9, configuration lives in eslint.config.js (flat config): an array of objects with files, languageOptions (globals, parser), plugins and rules. The old .eslintrc.* format is deprecated.
A complete config
A flat config for a JavaScript project: the recommended rules plus your own overrides.
// eslint.config.js
import js from '@eslint/js';
import globals from 'globals';
export default [
js.configs.recommended,
{
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
globals: { ...globals.browser, ...globals.node },
},
rules: {
'no-unused-vars': 'warn',
'no-console': 'warn',
},
},
];
Output:
Configuration loaded successfully
Keep it DRY
Start from js.configs.recommended (or a shared config) instead of writing every rule by hand. Formatting rules such as semi belong to Prettier.
Quick check
Quick check: In an ESLint 9 flat config, what does the `files` key do?
- Limits a config object to matching files
- Installs plugins
- Deletes files
- Sets Prettier options
Answer
Limits a config object to matching files — Each config object can target specific globs.