no-use-before-define has no effect when extending eslint-config-react-app

[JLRishe]

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, without any "extends", 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", eslint does not report any errors:

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

If I intentionally introduce a change that would cause another eslint violation - e.g. 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?

[JLRishe]

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 }, basically rendering the rule ineffective no matter what the severity is.

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:

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