A Comprehensive Guide to Disabling ESLint in Create React App

Introduction

With the release of Create React App (CRA) v3.0.0, TypeScript linting capabilities have been integrated into the framework, marking a significant advancement in frontend development tooling. However, developers may encounter scenarios where temporarily or permanently disabling ESLint checks becomes necessary. This article systematically examines various approaches to disable ESLint in CRA projects and provides comprehensive technical implementation guidance.

ESLint Integration Mechanism in Create React App

Create React App encapsulates the build toolchain through the react-scripts package, with ESLint deeply integrated as a core component for code quality checking. From an architectural perspective, this integration provides out-of-the-box code standardization but also limits developers' complete control over ESLint configuration. Understanding this integration mechanism is essential for effectively managing linting behavior.

Officially Recommended Disabling Method

Starting from react-scripts v4.0.2, the official approach to disable ESLint involves setting the DISABLE_ESLINT_PLUGIN=true environment variable, which instructs the build system to skip ESLint checking steps.

There are two primary implementation approaches:

The first method uses global configuration through the .env file in the project root directory. Add the following content to this file:

DISABLE_ESLINT_PLUGIN=true

This configuration affects all commands using react-scripts, including start, build, and test, ensuring ESLint checks are completely disabled throughout the development workflow.

The second method involves prefixing specific commands with environment variables in the scripts section of package.json:

{
  "scripts": {
    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
    "test": "DISABLE_ESLINT_PLUGIN=true react-scripts test"
  }
}

This approach allows granular control over different build phases, such as disabling ESLint only during development server startup while maintaining checks for production builds.

Configuration Extension and Rule Customization

Beyond completely disabling ESLint, developers can customize linting behavior through configuration extension. The core of this method involves setting the EXTEND_ESLINT=true environment variable to enable ESLint configuration extension capabilities.

Configure in the .env file as follows:

EXTEND_ESLINT=true

Subsequently, extend the default configuration in the eslintConfig section of package.json:

{
  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "jsx-a11y/anchor-is-valid": "off"
    }
  }
}

This approach maintains basic ESLint checking functionality while allowing adjustments to specific rules. For example, the above configuration disables the jsx-a11y/anchor-is-valid rule while keeping all other rules active.

Selective Disabling Through Ignore Files

Another common requirement is disabling ESLint checks only for specific files or directories. This can be achieved by creating an .eslintignore file, which follows syntax similar to .gitignore.

To completely disable ESLint checks for all files, add the following content to the .eslintignore file:

*

This method offers flexibility through pattern matching, such as *.test.js to ignore all test files or src/legacy/** to ignore all files in a specific directory.

Technical Implementation Analysis

From a technical implementation perspective, the DISABLE_ESLINT_PLUGIN environment variable affects CRA's internal build process. When set to true, the ESLint plugin is dynamically excluded from Webpack configuration, preventing linting checks during compilation.

Here's a simplified illustration of the implementation logic:

// Pseudocode demonstrating configuration adjustment logic
const webpackConfig = {
  // ... other configurations
  plugins: process.env.DISABLE_ESLINT_PLUGIN === 'true' 
    ? [] 
    : [new ESLintPlugin(eslintOptions)]
};

This design reflects the CRA team's balance between developer experience and configuration flexibility.

Best Practice Recommendations

Based on different usage scenarios, we recommend the following strategies:

1. During rapid prototyping, if linting errors hinder development progress, temporarily disable checks using DISABLE_ESLINT_PLUGIN=true, but re-enable them once the code stabilizes.

2. For large team projects, customize rule sets through the EXTEND_ESLINT approach to ensure code quality while adapting to team-specific coding standards.

3. In CI/CD pipelines, production builds should always have ESLint checks enabled, while development servers can be configured flexibly as needed.

4. For legacy code migration scenarios, the .eslintignore file provides a viable path for gradual code quality improvement.

Conclusion

Create React App offers multiple mechanisms for managing ESLint behavior, ranging from complete disabling to granular rule customization. Developers should choose appropriate methods based on specific needs: DISABLE_ESLINT_PLUGIN provides the most direct disabling solution, EXTEND_ESLINT supports configuration extension, and .eslintignore enables file-level control. Understanding these tools' working principles and applicable scenarios will help improve development efficiency while maintaining code quality.