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.