# ESLint Flat Config Basics — ESLint and Prettier: Code Quality and Formatting

Source: https://www.skillbyai.com/en/eslint-prettier/eslint-prettier-03

> 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.

```json
// 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

**Quiz:** In an ESLint 9 flat config, what does the `files` key do?

- [x] 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.