How to Configure ESLint Rules in Create React App Without Ejecting

You can customize ESLint rules in Create React App by adding an eslintConfig field to your package.json that extends the built-in react-app preset, allowing you to override or add rules without ejecting the webpack configuration.

Create React App (CRA) ships with a zero-configuration ESLint setup that guards against common coding mistakes. According to the facebook/create-react-app source code, you can configure ESLint rules in Create React App without ejecting by leveraging the eslintConfig field in your package.json, which CRA automatically merges with its internal defaults during both development and production builds.

How CRA's Built-in ESLint Architecture Works

When you run create-react-app, the initialization script in packages/react-scripts/scripts/init.js automatically writes the default ESLint configuration to your project's package.json:

appPackage.eslintConfig = { extends: 'react-app' };

This references the eslint-config-react-app package, where packages/eslint-config-react-app/index.js and packages/eslint-config-react-app/base.js define the complete rule set. These files include React, Hooks, and TypeScript-specific overrides. Because CRA integrates ESLint via the eslint-webpack-plugin inside its sealed webpack configuration, you cannot edit the loader directly, but you can extend the configuration through package.json.

Extending the ESLint Configuration via package.json

To add custom rules without ejecting, define an eslintConfig object in your package.json. CRA reads this field and merges it with the default react-app preset.

{
  "name": "my-app",
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"],
    "rules": {
      "no-console": "warn",
      "react/react-in-jsx-scope": "off"
    }
  }
}

This configuration:

• Preserves the base react-app rules that protect against common pitfalls
• Adds Jest-specific rules via react-app/jest
• Overrides specific rules, changing no-console to a warning and disabling the React-in-JSX-scope rule for newer JSX transforms

Configuring TypeScript-Specific Rules

For TypeScript projects, you must use the overrides array to apply rules exclusively to .ts and .tsx files. The base configuration in packages/eslint-config-react-app/index.js already disables certain JavaScript-only rules for TypeScript files, but you can add your own custom overrides:

{
  "eslintConfig": {
    "extends": "react-app",
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
          "@typescript-eslint/explicit-function-return-type": "off"
        }
      }
    ]
  }
}

Place TypeScript-specific rules inside the overrides block to prevent them from conflicting with JavaScript file linting, following the same pattern used internally in the eslint-config-react-app package.

Using External Shareable Configurations

You can layer community ESLint configurations on top of CRA's defaults by installing them as dev dependencies and adding them to the extends array:

npm install --save-dev eslint-config-airbnb

Then update your package.json:

{
  "eslintConfig": {
    "extends": ["react-app", "airbnb"],
    "rules": {
      "import/prefer-default-export": "off",
      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
  }
}

This approach allows you to adopt strict style guides like Airbnb while maintaining CRA's essential React and TypeScript protections.

Environment Variables for ESLint Control

CRA provides environment variables that modify ESLint behavior without changing configuration files. Set these in an .env file at your project root:

• ESLINT_NO_DEV_ERRORS: Converts all ESLint errors into warnings during development, preventing the dev server from crashing when linting fails.
• DISABLE_ESLINT_PLUGIN: Completely disables the eslint-webpack-plugin, removing ESLint from the build pipeline entirely.

Example .env configuration:

ESLINT_NO_DEV_ERRORS=true

These variables are documented in docusaurus/docs/advanced-configuration.md and provide quick toggles for development workflows without modifying your package.json.

Summary

• Zero-ejection customization: Add an eslintConfig field to package.json to extend or override the default react-app ESLint preset defined in packages/eslint-config-react-app/index.js.
• TypeScript support: Use the overrides array with file patterns **/*.ts?(x) to apply rules specifically to TypeScript files.
• External configs: Install shareable configs like eslint-config-airbnb and add them to the extends array while keeping react-app as the base.
• Development toggles: Use ESLINT_NO_DEV_ERRORS=true to downgrade errors to warnings during local development, or DISABLE_ESLINT_PLUGIN to disable linting entirely.
• Build safety: Any rule set to "error" will break your production build; use "warn" for non-blocking enforcement.

Frequently Asked Questions

Can I completely replace the default ESLint config without ejecting?

Yes, but it is strongly discouraged. You can set "extends": [] in your package.json eslintConfig to remove the react-app preset entirely, but this eliminates CRA's safety net against common errors. You would lose the TypeScript-aware defaults and React-specific rules defined in packages/eslint-config-react-app/base.js, and any rule set to "error" will break your build.

How do I disable a rule only for TypeScript files?

Add an overrides array targeting TypeScript file extensions in your package.json eslintConfig. Use a files pattern of **/*.ts?(x) and specify rule overrides inside that block. This mirrors the architecture used internally in packages/eslint-config-react-app/index.js where JavaScript-specific rules are conditionally disabled for TypeScript files.

Will custom ESLint rules break my production build?

Any rule configured with severity "error" will cause the production build to fail, while "warn" allows the build to complete successfully. This applies equally to default CRA rules and your custom additions. If you need to prevent ESLint from blocking builds during development only, use the ESLINT_NO_DEV_ERRORS environment variable.

Where does Create React App store its default ESLint rules?

The default rules live in the eslint-config-react-app package within the CRA monorepo. Specifically, packages/eslint-config-react-app/base.js contains the core ESLint rules, while packages/eslint-config-react-app/index.js adds React, Hooks, and TypeScript-specific configurations including the overrides array for TypeScript support.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}