ESLint 9 Flat Config: Fast Linting for TypeScript and React with CI/CD

You launch a project with TypeScript and React 18, and ESLint throws hundreds of errors—90% are false positives. Or the flat config isn't read, and CI falls over. In one of our projects with 800+ files, initial linting took 45 seconds. After migrating to flat config, it dropped to 12 seconds. We deal with this constantly and know how to configure linting so it works for you, not against you.

Problems We Solve

Rule Conflicts When Migrating to Flat Config

The old .eslintrc and new eslint.config.mjs are incompatible. If both formats are used in a project, ESLint throws an error. The solution is a complete switch to flat config with a review of old rules.

Type-Checked Rules Slow Down Builds

@typescript-eslint/recommendedTypeChecked burdens the TypeScript Language Service. In a large monorepo with 1000+ files, linting can take up to 3 minutes. We optimize: exclude configuration files from type-checked checks, enable caching via eslint-plugin-turbo. As noted in the official ESLint documentation, flat config parses 40% faster. On a project with 500+ files, we cut time from 45 to 12 seconds.

Auto-Fix Breaks Code

Rules like no-param-reassign or no-nested-ternary with --fix can unexpectedly break logic. Our experience shows auto-fix should only be enabled for safe rules (whitespace, semicolons).

How We Set Up ESLint for TypeScript with Flat Config

In one React 18 + TypeScript 5 project, we added linting from scratch using flat config.

Installation and Configuration

npm install --save-dev eslint @eslint/js typescript-eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y 

eslint.config.mjs:

import js from '@eslint/js'; import tseslint from 'typescript-eslint'; import reactPlugin from 'eslint-plugin-react'; import reactHooks from 'eslint-plugin-react-hooks'; import jsxA11y from 'eslint-plugin-jsx-a11y'; export default tseslint.config( js.configs.recommended, ...tseslint.configs.recommendedTypeChecked, { languageOptions: { parserOptions: { project: './tsconfig.json', tsconfigRootDir: import.meta.dirname, }, }, }, { plugins: { react: reactPlugin, 'react-hooks': reactHooks, 'jsx-a11y': jsxA11y, }, settings: { react: { version: 'detect' } }, rules: { ...reactPlugin.configs.recommended.rules, ...reactHooks.configs.recommended.rules, ...jsxA11y.configs.recommended.rules, 'react/react-in-jsx-scope': 'off', 'react/prop-types': 'off', }, }, { rules: { '@typescript-eslint/no-explicit-any': 'warn', '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }], '@typescript-eslint/no-floating-promises': 'error', 'no-console': ['warn', { allow: ['warn', 'error'] }], 'prefer-const': 'error', 'no-var': 'error', }, }, { ignores: ['dist/**', 'node_modules/**', '*.config.js', 'coverage/**'] }, ); 

CI/CD Integration

In package.json, add three scripts:

{ "scripts": { "lint": "eslint src", "lint:fix": "eslint src --fix", "lint:ci": "eslint src --max-warnings 0" } } 

The --max-warnings 0 flag turns warnings into errors—the pipeline fails even on a single warning.

Why ESLint 9 Requires Flat Config

Flat config isn't just a trend; it's a necessity. The old .eslintrc format conflicts with new plugins and doesn't support ES modules. ESLint 9 won't work with .eslintrc by default. Migrating gives you clean configuration and faster parsing. According to official documentation, flat config parses 40% faster.

How to Migrate from .eslintrc to Flat Config

1. Delete .eslintrc.* and eslintConfig from package.json.
2. Create eslint.config.mjs with imports from @eslint/js and typescript-eslint.
3. Move rules from extends into the flat config array.
4. Rewrite parser and plugin settings.
5. Run eslint --fix and verify everything works.

What If CI/CD Fails Due to Linting?

A common cause is warnings in code that CI should not allow. Add a lint:ci script with the --max-warnings 0 flag. If linting still fails, check that .gitignore excludes unnecessary files and eslint.config.mjs ignores dist and node_modules. In one project, CI failed because of test files—we added ignores: ['**/*.test.ts'].

Performance Comparison

What's Included in Our Work

Estimated Timelines

Setting up ESLint from scratch for a TypeScript/React project: from 1 day. Migrating from .eslintrc to flat config with baseline error fixes: from 2 days. Cost is determined individually after a code audit.

Common Configuration Mistakes

• Ignoring node_modules: in flat config you must explicitly set ignores: ['node_modules/**'].
• Mixing formats: you cannot use both .eslintrc and eslint.config.mjs.
• Type-checked for all files: exclude configs and scripts—they slow down linting without benefit.
• Missing --max-warnings in CI: without the flag, CI will pass warnings through.

Trust the Setup to Professionals

We have 5+ years of experience configuring ESLint for projects ranging from startups to enterprise. We guarantee linting that works without false positives. Get a consultation—we'll assess your project and provide a turnkey configuration. For fast implementation, contact us—we'll prepare the config in 1 day.