150

I'm using React and ESLint with eslint-plugin-react.

I want to disable the prop-types rule in one file.

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>
        );
    }
});
2

11 Answers 11

272

if you have only one file you want to disable prop-type validation you can use:

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

in cases where you have multiple files you can add to your .eslintrc file in your root directory a rule to disable prop-type validation:

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

for further rules you can checkout this link that solved my issue and for your convenience you can also read up from eslint-plugin-react's github documentation about how to disable or enable it with various options.

2
  • 12
    "react/prop-types": "off" also works (and it is a little more readable) Commented Aug 21, 2020 at 12:22
  • Fro me, it works: 'react/prop-types': false
    – titoih
    Commented Aug 29, 2023 at 7:52
100

Just put this on top of your file:

/* eslint-disable react/prop-types */
2
  • Tried it out and it works fine. It's a cleaner approach. Thanks.
    – cuadraman
    Commented Jul 8, 2015 at 20:57
  • Instead of 0, I'd recommend putting off. When working with many developers of different skill levels, it's best to be explicit rather than requiring they know 0 stands for off. Commented Apr 5, 2021 at 4:25
37

I had to do:

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

this did not work for me:

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

To disable globally in your .eslintrc file (old version v6.0 or below):

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

To disable globally in your .eslintrc file (new version above v6.0):

{
    "rules": {
        "react/prop-types": 0
    }
}
1
  • The part about rules is incorrect as of 2020. Use ` "rules": { "react/prop-types": 0 } ` Commented Aug 4, 2020 at 12:12
9

I had to wrap the whole component with the eslint ignore comments.

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 */
2
  • 1
    My hero. This solved why I wasn't able to get /* eslint-disable react/no-multi-comp */ when just wrapping my first component in it.
    – frandroid
    Commented Aug 25, 2016 at 18:11
  • /* eslint-disable react/prop-types */ should be placed at the very beginning of a file
    – VonAxt
    Commented Feb 21, 2019 at 11:50
8

Sometimes I have small components in the same file as the major one. There propTypes seems overkill. Then I usually do something like this

// 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>);
5

I had to do this in my .eslintrc config file to disable prop types validation error.

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

To disable or modify the react/prop-types rule in your .eslint.cjs file, you can use the following configurations:

Option 1: Disable the rule completely

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

or

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

or

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

Option 2: Set the rule to generate warnings instead of errors

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

Choose the option that best suits your requirements and add it to your .eslint.cjs file. This will configure ESLint to either disable the react/prop-types rule or modify its severity to generate warnings instead of errors.

1

I needed React relaunch for this to be taken into account without error

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

Inside your react project root directory look for .eslintrc.cjs file then in the rules: add this like line of code and save:

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

You can change it to be warning, put it inside eslint rules:

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

0

Best is to add this line :

'react/prop-types':[disabled] //* disabling eslint prop-types all warnings

add this line to your module.exports object in .eslintrc.cjs in file.

1
  • OP asked how to disable the rule for just one file. Commented Oct 31, 2023 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.