Create React App - console lint warnings don't match eslintrc

Question

I've got a sort of weird problem, that I don't see any mention of elsewhere.

Create React App by default seems to log lint warning in the terminal when running yarn start and also in the Chrome console. All good. Makes sense, and I've seen discussions of whether this functionality should exist, and how it should work.

My issue is that those warnings seem not to match my .eslintrc settings at all!

As in, if I run yarn lint, which runs eslint using my settings, I see none of the warnings that show up in the console and terminal when I start my app.

For example, I have this rule turned off in my .eslintrc file:

"radix": 0,

And, consequently, there's no radix warning when I run yarn lint.

(Just in response to the answer below. I've tried a variety of options for this particular rule, including "as-needed". But I wanted to turn the rule off entirely, which I've evidently accomplished, because running yarn lint shows no errors related to radix at all).

But when I start the app, I see this in yellow warning boxes in the console:

Anybody know why my .eslintrc file is being ignored here, and how to get these warnings to represent the rules I've set?

AndrewSteinheiser · Accepted Answer · 2018-10-03T18:41:35.350

0

According to the docs, you should pass either "always" or "as-needed". The latter should disable those warnings.

...
"radix": "as-needed",
...

EDIT: According to this source, you will have to eject your create-react-app to edit the ESLint settings.

edited Oct 03 '18 at 18:41

answered Oct 03 '18 at 18:31

AndrewSteinheiser

500
5
17

1

Thanks -- I used to have that, and it was showing the same problems. As needed only shows the warning where necessary -- I wanted to turn the rule off entirely. And indeed, it appears to work when I run `yarn lint`, so I don't think that can be the problem – Sasha Oct 03 '18 at 18:32
It appears that `"as-needed"` should make it so you only have to use radix parameters when they are not base 10. Could you share the code that is producing the linting error? – AndrewSteinheiser Oct 03 '18 at 18:36
Actually, according to this [source](https://alligator.io/react/linting-react/#customizing-create-react-app-and-eslint): "One drawback with the defaults in a project created using Create React App is that you can only configure ESLint by `ejecting the project`". – AndrewSteinheiser Oct 03 '18 at 18:39
1

Bingo. How annoying. I'll just continue to ignore them then. Thanks! – Sasha Oct 03 '18 at 19:09
You could disable those warnings with a comment before the lines where you use `parseInt()` -> `// eslint-disable-next-line` – AndrewSteinheiser Oct 03 '18 at 19:22

score 0 · Answer 2 · answered Jan 09 '20 at 06:06

It is possible to add EXTEND_ESLINT flag to the .env file.

When set to true, ESLint configs that extend eslint-config-react-app will be used by eslint-loader. Any rules that are set to "error" will stop the application from building.

Source: https://create-react-app.dev/docs/advanced-configuration

Your eslint config may be named .eslintrc.json and put in the root folder of your project. Its contents should look like the following (note the extends field):

{
  "extends": "react-app", //this extends statement is required
  "rules": {
    "radix": "as-needed"
  }
}

And the .env file placed in the root should have the following line:

EXTEND_ESLINT=true

Create React App - console lint warnings don't match eslintrc

2 Answers2

Linked