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

by

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 – 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?

85 thoughts on “no-use-before-define has no effect when extending eslint-config-react-app”

Leave a Comment