扩展 eslint-config-react-app 时 no-use-before-define 无效

Question

I am trying to configure eslint to use eslint-config-react-app as a base and specify a few specific rules on top of that. One of those rules is no-use-before-define , and I am trying this out on the following trivial example to check whether the rule is working as desired:

const a = () => {
    b();
};
const b = () => {};
a();

If I set up my.eslintrc.json like this, then the rule works as expected:

{
    "parserOptions": {
        "ecmaVersion": 2020
    },
    "rules": {
        "no-use-before-define": "error"
    }
}

2:5  error  'b' was used before it was defined  no-use-before-define

However, if I include "extends": "react-app" , no eslint errors are found:

{
    "extends": "react-app",
    "parserOptions": {
        "ecmaVersion": 2020
    },
    "rules": {
        "no-use-before-define": "error"
    }
}

If I intentionally introduce a change that would cause another eslint violation - eg remove the a(); a the end, then that is found, but not the no-use-before-define violation:

  1:7  warning  'a' is assigned a value but never used  no-unused-vars

Intuitively, I would expect any rules in.eslintrc.json to be applied on top of the config indicated in "extends" , but it seems like that's not what's happening.

What am I misunderstanding here? Is there a way to extend eslint-config-react-app and have the no-use-before-define rule work correctly?

Answer 1

Looks like I've figured it out.

It seems I was overriding the severity of the rule, but not the options, which were set to { "functions": false, "variables": false, "classes": false } . So it remained in a configuration where eslint would only find an issue in the case of multiple variables declared with the same name in the same scope .

Specifying the options explicitly yields the desired behavior:

"no-use-before-define": ["error", { "functions": true, "variables": true }]

Looks like this also works for reverting back to the eslint default options for this rule:

"no-use-before-define": ["error", {}]