ESLint no-use-before-define

Question

How do I get this ESLint rule (no-use-before-define) to not warn in cases like these;

class App extends React.Component {
    render() { return <div>{messages.helloWorld}</div> }
}

const messages = { helloWorld: 'Hello world!' }

This is a simplified example, but I'd really like to have messages defined at the bottom of each component's file (by convention).

Answer 1

It looks like you might be interested in the variables option, for this rule. You can read about that option here.

This flag determines whether or not the rule checks variable declarations in upper scopes. If this is true, the rule warns every reference to a variable before the variable declaration. Otherwise, the rule ignores a reference if the declaration is in an upper scope, while still reporting the reference if it's in the same scope as the declaration.

You might configure it, in your .eslintrc, like so ...

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

This will keep that rule enabled for other things, such as classes and functions and variables in the same scope, but will relax it for variables in upper scopes.

Answer 2

Rule disabled for function and classes declarations

"rules": {    
  "no-use-before-define": ["error", {"functions": false, "classes": false}]
}

Answer 3

Before the render line, do this:

// eslint-disable-next-line no-use-before-define

See the eslint docs.