no-use-before-define - Add option for specific ignores (like useStyles)

What rule do you want to change? no-use-before-define - new option

Does this change cause the rule to produce more or fewer warnings? Fewer, and the option would report fewer errors if specified.

How will the change be implemented? (New option, new default behavior, etc.)? New option for ignoring user-specified variables like useStyles, to allow less-important styles to be relocated to the bottom, or potentially other cases where you might want to save uninteresting variables for last, as a pattern throughout an entire codebase.

Please provide some example code that this change will affect:

import { makeStyles } from '@material-ui/core';

function MyComponent() {
  const classes = useStyles();
  return <div className={classes.myDiv}>Stuff</div>;
}

const useStyles = makeStyles({
  myDiv: {
    backgroundColor: '#ddd';
  }
});

What does the rule currently do for this code? An error is reported because useStyles is defined after it’s used, though in this context it’s safe because React components are instantiated and run their code after the file has finished defining all variables.

What will the rule do after it’s changed? This code would not report an error - useStyles could be specified as an exception to the no-use-before-define

Are you willing to submit a pull request to implement this change? …Quite possibly, though I only have minimal experience with eslint rule code.

[jeffvandyke]

Thanks for informing me about that change, was not aware! I’ll be sure to look into eslint-rule-composer, though that might be its own challenge 😃

[kaicataldo]

Thanks for the explanation. This sounds to me like it falls under our new policy to freeze stylistic rules (please see https://eslint.org/blog/2020/05/changes-to-rules-policies for more details).

The good news is that this should be fairly easy to enforce by creating a custom rule using eslint-rule-composer!