Create-react-app: Option to disable ESLint in specific contexts (but not everywhere)

[jrr]

Is your proposal related to a problem?

On my project, ESLint's feedback is most valuable from 1) our editors, and 2) CI. It's not very useful when lint errors appear in the browser when connected to the dev server. (in fact, it slows me down!)

Describe the solution you'd like

I'd like to disable ESLint in the dev server, without affecting how ESLint behaves in other contexts. (e.g., eslint on the command line and in VS Code should be unafffected).

This could be via an environment var, e.g. DISABLE_LINT=1 react-scripts start.

Describe alternatives you've considered

I've looked through react-script's webpack config to check if there was already a way to do this, but couldn't find one:
https://github.com/facebook/create-react-app/blob/027b03ba8d689e619a912ed0d72c3a11ef22ac2f/packages/react-scripts/config/webpack.config.js#L749-L767

I've also looked into whether there was already a global disable available from ESLint or its webpack plugin, and couldn't find anything.

Additional context

I know CRA aims to limit the available configuration options, but it seems reasonable for this one to go in Advanced Configuration.

[msbarry]

An alternative here might be to have eslint checking happen asynchronously after the initial and incremental compiles, like typescript type checking.

[jrr]

I have a terrible, no good, really bad workaround: use an executable .eslintrc.js file and emit config conditionally.

It's not a true disable, but you can make it do very nearly nothing:

const realConfig = {/* ...  */};

const nopConfig = {
  /*

  This config is meant to do nothing.

  It exists because there's no good way to disable ESLint in Create React App:
  https://github.com/facebook/create-react-app/issues/9929

  So the workaround here is to craft a config that does as little as possible,
  and then conditionally use it.

  */

  ignorePatterns: ["**/*.ts", "**/*.tsx", "./*.js", "config/*.js"],
};

module.exports = process.env.DISABLE_ESLINT ? nopConfig : realConfig;

Note that you can't ignore _all_ files lest ESLint get upset, with an error like All files matched by '/foo/bar/src/.' are ignored., but you can drop in an empty dummy file to placate it.

[krailler]

+1 I'd like to disable eslint on the dev server

[sahilrajput03]

+1 I'd like to disable eslint on the dev server

[unframework]

FYI there is already #9887 that tracks a similar concern. Disabling ESLint altogether (and losing useful notifications about problems) might not be necessary if we figure out a way to show errors in console only, like they used to be pre-v4.0.

[jrr]

@unframework Interesting, thanks for the reference. Fixing #9887 would certainly make dev server lint errors less annoying, but It'd still want to disable them for a couple reasons:

• So I don't get spammed with warnings and errors for my WIP code. I address lint issues during a different part of my workflow, not during the rapid iteration cycle I use the dev server for.
• Performance. Especially with some of typescript-eslint's slower rules, linting is a performance cost I'd prefer to pay less frequently. (A full eslint on my project currently takes 20s!)

[unframework]

Agreed re: performance, and it is funny that before CRA 4.0 that was actually the default (just a predefined bare-bones check in dev server, but allowing broader project-specific config for editor/CI/pre-commit).

Your solution with conditional config seems like a pretty flexible approach for that...

[sahilrajput03]

Hey its there's a simple solution to fix this in cra4, check out my guide on this topic(for cra4 only).

https://gist.github.com/sahilrajput03/bdd1f1d686da2e919eac647c89d87310

[ashfaqnisar]

Hey its there's a simple solution to fix this in cra4, check out my guide on this topic(for cra4 only).

https://gist.github.com/sahilrajput03/bdd1f1d686da2e919eac647c89d87310

Hey there @sahilrajput03, @jrr is referring about how to conditionally apply eslint rules. Not removing all of the eslint checks from the whole project.