如何禁用文件中的 ESLint react/prop-types 规则？

Question

我将React和ESLint与eslint-plugin-react一起使用。

我想在一个文件中disable prop-types规则。

var React = require('react'); 
var Model = require('./ComponentModel');

var Component = React.createClass({
/* eslint-disable react/prop-types */
    propTypes: Model.propTypes,
/* eslint-enable react/prop-types */
    render: function () {
        return (
            <div className="component">
                {this.props.title}
            </div>
        );
    }
});

Answer 1

如果您只有一个文件要禁用 prop-type 验证，则可以使用：

/* eslint react/prop-types: 0 */

如果您有多个文件，您可以在根目录中的.eslintrc文件中添加禁用 prop-type 验证的规则：

{
 "plugins": [
     "react"
  ],
  "rules": {
    "react/prop-types": 0
  }
}

有关更多规则，您可以查看解决了我的问题的此链接，如果不方便，您还可以从eslint-plugin-react的 github 文档中阅读有关如何使用各种选项禁用或启用它的文档。

Answer 2

只需将其放在文件的顶部：

/* eslint-disable react/prop-types */

Answer 3

我必须做：

/* eslint react/forbid-prop-types: 0 */

这并没有为我工作：

/* eslint react/prop-types: 0 */

要在 .eslintrc 文件（旧版本 v6.0 或更低版本）中全局禁用：

{
    "rules": {
        "react/forbid-prop-types": 0
    }
}

要在 .eslintrc 文件中全局禁用（v6.0 以上的新版本）：

{
    "rules": {
        "react/prop-types": 0
    }
}

Answer 4

我不得不用 eslint 忽略注释来包装整个组件。

var React = require('react'); 
var Model = require('./ComponentModel');

/* eslint-disable react/prop-types */
var Component = React.createClass({

    propTypes: Model.propTypes,

    render: function () {
        return (
            <div className="component">
                {this.props.title}
            </div>
        );
    }
});
/* eslint-enable react/prop-types */

Answer 5

有时我在与主要组件相同的文件中包含小组件。 有 propTypes 似乎矫枉过正。 然后我通常会做这样的事情

// eslint-disable-next-line react/prop-types
const RightArrow = ({ onPress, to }) => (<TouchableOpacity onPress={() => onPress(to)} style={styles.rightArrow}><Chevrons.chevronRight size={25} color="grey" /></TouchableOpacity>);

Answer 6

我必须在我的.eslintrc配置文件中执行此操作以禁用道具类型验证错误。

"rules": {
  "react/prop-types": "off"
}

Answer 7

您可以将其更改为警告，将其放入eslint规则中：

'react/prop-types': ['warn'],

Answer 8

我需要重新启动 React 才能将其无误地考虑在内

rules: {
  'react/prop-types': 'off'
}

Answer 9

要禁用或修改.eslint.cjs文件中的 react/prop-types 规则，您可以使用以下配置：

选项 1：完全禁用规则

"rules": {
  "react/prop-types": "off"
}

或者

"rules": {
  "react/prop-types": 0
}

或者

"rules": {
  "react/prop-types": false
}

选项 2：设置规则以生成警告而不是错误

"rules": {
  "react/prop-types": ["warn"]
}

选择最适合您要求的选项并将其添加到您的.eslint.cjs文件中。 这会将 ESLint 配置为禁用 react/prop-types 规则或修改其严重性以生成警告而不是错误。