# How to Configure ESLint Rules in Create React App Without Ejecting

> Learn how to configure ESLint rules in Create React App without ejecting. Customize ESLint by extending the default preset in your package.json for seamless rule adjustments.

- Repository: [Meta/create-react-app](https://github.com/facebook/create-react-app)
- Tags: how-to-guide
- Published: 2026-02-26

---

**You can customize ESLint rules in Create React App by adding an `eslintConfig` field to your [`package.json`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/init.js) automatically writes the default ESLint configuration to your project's [`package.json`](https://github.com/facebook/create-react-app/blob/main/package.json):

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

```

This references the **eslint-config-react-app** package, where [`packages/eslint-config-react-app/index.js`](https://github.com/facebook/create-react-app/blob/main/packages/eslint-config-react-app/index.js) and [`packages/eslint-config-react-app/base.js`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/package.json).

## Extending the ESLint Configuration via package.json

To add custom rules without ejecting, define an `eslintConfig` object in your [`package.json`](https://github.com/facebook/create-react-app/blob/main/package.json). CRA reads this field and merges it with the default `react-app` preset.

```json
{
  "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`](https://github.com/facebook/create-react-app/blob/main/packages/eslint-config-react-app/index.js) already disables certain JavaScript-only rules for TypeScript files, but you can add your own custom overrides:

```json
{
  "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:

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

```

Then update your [`package.json`](https://github.com/facebook/create-react-app/blob/main/package.json):

```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`](https://github.com/facebook/create-react-app/blob/main/docusaurus/docs/advanced-configuration.md) and provide quick toggles for development workflows without modifying your [`package.json`](https://github.com/facebook/create-react-app/blob/main/package.json).

## Summary

- **Zero-ejection customization**: Add an `eslintConfig` field to [`package.json`](https://github.com/facebook/create-react-app/blob/main/package.json) to extend or override the default `react-app` ESLint preset defined in [`packages/eslint-config-react-app/index.js`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/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`](https://github.com/facebook/create-react-app/blob/main/packages/eslint-config-react-app/base.js) contains the core ESLint rules, while [`packages/eslint-config-react-app/index.js`](https://github.com/facebook/create-react-app/blob/main/packages/eslint-config-react-app/index.js) adds React, Hooks, and TypeScript-specific configurations including the `overrides` array for TypeScript support.