124

create-react-app v3.0.0 is out. It supports TypeScript linting internally. (That's nice!) I think I understand the situation where TSLint is on, and am planning to replace it with ESLint, but it is not right now.

How to disable that linting step in react-scripts start?

/* eslint-disable */ and others are not the ones I'm looking for.

11 Answers 11

206

As of react-scripts v4.0.2, you can now opt out of ESLint with an environment variable. You can do this by adding it to your .env file, or by prefixing your scripts in your package.json file.

For example in .env:

DISABLE_ESLINT_PLUGIN=true

Or in your 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"
  }
}

https://github.com/facebook/create-react-app/pull/10170

4
  • The .env solution still works but the package.json one. Jul 11, 2022 at 11:56
  • 2
    When adding in package.json I am getting this error - 'DISABLE_ESLINT_PLUGIN' is not recognized as an internal or external command.
    – Jay Momaya
    Jul 25, 2022 at 14:31
  • 4
    If you're getting that error (like if you try to run it from Windows), try this instead: "start": "set DISABLE_ESLINT_PLUGIN=true && react-scripts start", Jul 26, 2022 at 22:44
  • Exactly what I needed. I have a shared eslint config in my monorepo and it had a conflict with CRA eslint config, disabling it with the .env variable saved my life.
    – Cajotafer
    Oct 11, 2022 at 10:56
78

You could set EXTEND_ESLINT environment variable to true, for example in .env file:

EXTEND_ESLINT=true

Now you can extend eslint configuration in your package.json file:

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

To disable eslint you could add a file .eslintignore with the content:

*

See documentation for details: https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config

1
  • 2
    This doesnt disable eslint. This simply exclude eslint to all files. Not technically the same. Aug 14, 2021 at 18:19
25

You can disable (and override other configurations) using Craco.

It takes 4 changes:

  1. npm install @craco/craco --save
  2. create craco.config.js (in the same folder as is package.json)
  3. populate craco.config.js with:
module.exports = {
  eslint: {
    enable: false,
  },
};

Finally, replace react-script with craco in your package.json scripts, i.e.

"scripts": {
  "build": "craco build",
  "start": "craco start",
}

This will disable ESLint. Refer to Craco documentation for examples how to extend ESLint configuration.

8

step 1

create .env file in your project root if its not there and add this line to it

EXTEND_ESLINT=true

Step 2

add .eslintrc.js to your project root with following content

module.exports = {
  "extends": ["react-app"],
  "rules": {
  },
  "overrides": [
    {
      "files": ["**/*.js?(x)"],
      "rules": {
// ******** add ignore rules here *********
        "react/no-unescaped-entities": "off",
        "react/display-name": "off",
        "react/prop-types": "off",
      }
    }
  ]
}

note that override > rules section: add rules with "off" flag to disable them.

5

My workaround without ejecting:

  1. Use an environment variable in .eslintrc.js like this:
module.exports = {
    "extends": process.env.REACT_APP_DEV_DISABLE_ESLINT ? [] : [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:json/recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:jsx-a11y/recommended",
      "plugin:react/recommended",
    ],
    "rules": process.env.REACT_APP_DEV_DISABLE_ESLINT ? {} : {
      // ...rules for production CI
    }
}
  1. Set the variable in start script in package.json:
{
      "scripts": {
          "eslint:disable": "REACT_APP_DEV_DISABLE_ESLINT=true",
          "start": "npm run eslint:disable  react-scripts start"
      }
}
0
3

First ensure EXTEND_ESLINT environment variable is set to true. It can be set in .env file.

For Typescript, further rules should be added in overrides array, as example below:

{
  "eslintConfig": {
    "extends": ["react-app"],
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "eqeqeq": "warn"
        }
      }
    ]
  }
}
1
  • Something interesting that happened to me is that although this hid the one I wanted, it also produced new ones that were never before seen. Jul 17, 2020 at 12:21
2

My workaround:

Add a .eslintignore file:

*

and run eslint with --no-ignore. So you are able to setup your own eslint. If you need a ignore file you can define it with --ignore-path instead of using the --no-ignore option.

0

One way is to eject react-scripts - by running yarn eject / npm run eject - and turn off eslint in webpack config file manually.

Beware though that ejecting should not be done lightly and other options should be considered before ejecting. Please read Don’t eject your Create React App to gain some understanding of what it means and perhaps some reason's why you shouldn't

Please take a look at this fork: create-react-app closer look, especially at eject-tic_tac_toe directory, where you have scripts/start.js - the script where the magic happens after yarn start / npm start - and config/webpack.config.dev.js - where you have webpack's config, used in start.js. This is the part you can be interested in to edit:

// …
module.exports = {
  // …
  module: {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'eslint',
        include: paths.appSrc,
      }
    ]
  }
  // …
};
0

Might you need just to disable it for compilation but not to check I console?

then, either replace the start script or use a new one, e.g. start-force

{
  "scripts": {
    "start-force": "ESLINT_NO_DEV_ERRORS=true react-scripts start",
  }
}
0

In package.json you can find the eslintConfig rule, which might have some content already, like this:

  "eslintConfig": {
"extends": [
  "react-app",
  "react-app/jest"
]
},

Here you can disable the rules you want to disable:

"eslintConfig": {
"extends": [
  "react-app",
  "react-app/jest"
],
"rules": {
  "no-unused-vars": "off"
}
},
0

You can configure ESLint to disable linting for specific files or directories. In your .eslintrc.js or .eslintrc.json file, you can add or modify the "ignorePatterns" property to specify the files or directories you want to exclude from linting. In my case I exclude src folder.

    {
    "ignorePatterns": ["src/"],
    // ...
    }

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.