Format an ESLint Config File

ESLint configuration files start simple but quickly grow into complex documents as projects add TypeScript support, React-specific rules, accessibility plugins, and per-directory overrides. A JSON syntax error in .eslintrc.json doesn't just break linting — it often produces an error message pointing to an internal ESLint file rather than the actual problem in your config, making it very hard to diagnose. Formatting and validating the config first catches these issues before ESLint even runs. This example shows a realistic configuration for a React TypeScript project: it extends three preset configs (eslint:recommended, plugin:react/recommended, and plugin:@typescript-eslint/recommended), registers the react and @typescript-eslint plugins, sets two custom rule severities, and adds a file-specific override that relaxes the no-console rule in test files where logging is acceptable. Key parts explained: extends pulls in pre-configured rule sets from the community so you start with sensible defaults rather than configuring every rule yourself. plugins makes additional rules available without activating them — you control which rules fire through the rules block. The overrides array is powerful: it lets you apply a completely different rule set to files matching specific glob patterns, such as stricter rules for source files and looser ones for tests or generated code. Rule severity values: "error" makes ESLint exit with a non-zero code (breaking CI), "warn" reports the issue without failing the build, and "off" disables the rule entirely. Choosing the right severity depends on whether the rule catches bugs (error) or enforces style preferences (warn). Real-world scenarios: you upgrade a dependency and suddenly get dozens of new lint errors — checking the config reveals that the upgrade changed a recommended ruleset. Or a new team member's editor isn't respecting the project rules because the config file has a JSON syntax error that ESLint silently ignores in some setups. Tips: the flat config format (eslint.config.js) introduced in ESLint 8 is replacing the legacy .eslintrc format. If you're on a newer project, the JSON formatter still helps validate the legacy format during migration.

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "no-console": "warn",
    "react/prop-types": "off",
    "@typescript-eslint/no-unused-vars": "error"
  },
  "overrides": [
    {
      "files": ["**/*.test.ts"],
      "rules": { "no-console": "off" }
    }
  ]
}