在 jsx 中禁用 eslint 错误

Question

我在我的一个反应原生组件中有以下 JSX

        <TouchableOpacity onPress={this.onEnableNotifications} style={{marginHorizontal: 10}}>
          <Image source={require('../../img/ic_warning.png')} style={{tintColor: colorThemes.Blue.red}}/>
        </TouchableOpacity>

我收到以下 ESLint 错误：

'require' is not defined. (no-undef)

我尝试在Image后添加行{ // eslint-disable-line no-undef }，但这会产生解析错误。我怎样才能摆脱该行的此错误。

Answer 1

在.eslintrc文件上：

{
    "globals":{
        "require": true
    }
}

Answer 2

为了禁用带有 jsx 内部注释的 eslint 警告，请使用

{ /* eslint-disable no-undef */ }
     <div>element causing warning </div>
{ /* eslint-enable no-undef */ }

单行注释不起作用：

{ /* eslint-disable-line no-undef */ }

另请参阅

https://github.com/eslint/eslint/issues/7030

Answer 3

我读过有一些jsx怪癖，所以试着把它分开：

<TouchableOpacity onPress={this.onEnableNotifications} style={{marginHorizontal: 10}}>
  <Image
    source={require('../../img/ic_warning.png')} // eslint-disable-line no-undef
    style={{tintColor: colorThemes.Blue.red}}
  />
</TouchableOpacity>

或者你可以在上面定义它。

const warningImage = require('../../img/ic_warning.png'); // eslint-disable-line no-undef
....
<TouchableOpacity onPress={this.onEnableNotifications} style={{marginHorizontal: 10}}>
  <Image source={warningImage} style={{tintColor: colorThemes.Blue.red}}/>
</TouchableOpacity>

如果这是一个静态路径，我会完全在 react 类/函数之外定义它，作为导入。

Answer 4

要禁用属性上的 eslint 规则，可以使用内联注释：

<StatusBar
  // eslint-disable-next-line react/style-prop-object
  style='light'
/>