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

84

我使用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>
        );
    }
});

reactjs eslint

— 库德拉曼
source

79

只需将其放在文件顶部即可：

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

— 贾迪普
source

尝试了一下，它工作正常。这是一种更清洁的方法。谢谢。

— cuadraman

149

如果只有一个文件要禁用属性类型验证，则可以使用：

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

如果您有多个文件，则可以.eslintrc在根目录中添加一条规则以禁用道具类型验证：

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

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

— JaysQubeXon
source

"react/prop-types": "off"也可以（并且更具可读性）

— 拉斐尔·塔瓦雷斯

25

我必须做：

/* 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
    }
}

— 利奥波德·克里斯蒂安森（Leopold Kristjansson）
source

截至2020年，有关规则的部分是不正确的。使用`“ rules”：{“ react / prop-types”：0}`

— Jack Kinsella

8

我不得不用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 */

— 库德拉曼
source

1

我的英雄。这解决了为什么/* eslint-disable react/no-multi-comp */仅将第一个组件包装进去时就无法获得的原因。

— frandroid

/* eslint-disable react/prop-types */应该放在文件的开头

— VonAxt

6

有时我在与主要文件相同的文件中包含一些小文件。那里的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>);

— 功放
source