2

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?

oguz ismail
  • 1
  • 16
  • 47
  • 69
JLRishe
  • 99,490
  • 19
  • 131
  • 169
  • Maybe a duplicate https://stackoverflow.com/a/65159131/2837427 Also check for the versions https://stackoverflow.com/a/64311559/2837427 – hendrixchord Jan 31 '21 at 05:47
  • Thank you, but that is not the issue I'm having. My issue is the _lack_ of an error when I expect to see one. I'm also not using @typescript-eslint afaik. – JLRishe Jan 31 '21 at 05:52
  • @typescript-eslint is present in peerDependencies though https://github.com/facebook/create-react-app/blob/master/packages/eslint-config-react-app/package.json#L21 – hendrixchord Jan 31 '21 at 06:10
  • Also for `no-use-before-define` https://github.com/facebook/create-react-app/issues/7325 – hendrixchord Jan 31 '21 at 06:13
  • @hendrixchord That github issue was not the same as mine (it was the opposite), but it did give me the hint I needed in order to solve this, so thank you. – JLRishe Jan 31 '21 at 06:29

1 Answers1

2

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 variables being used after their declaration 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", {}]
JLRishe
  • 99,490
  • 19
  • 131
  • 169