ESLint 定义前不使用

Question

如何让 ESLint 规则 (no-use-before-define) 在此类情况下不发出警告；

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

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

这是一个简化的示例，但我真的很想在每个组件文件的底部定义 messages（按照惯例）。

Answer 1

在 render 行之前，执行此操作：

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

参见eslint docs。

Answer 2

看来您可能对此规则的 variables 选项感兴趣。您可以阅读有关该选项的信息 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.

您可以在 .eslintrc、like so ...

中配置它

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

这将使该规则对其他事物保持启用状态，例如 类 以及同一范围内的函数和变量，但会放宽对上层范围内变量的限制。

Answer 3

函数和 类 声明禁用规则

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