136

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>
        );
    }
});
ravibagul91
  • 20,072
  • 5
  • 36
  • 59
cuadraman
  • 14,964
  • 7
  • 27
  • 32
  • 1
    Does this answer your question? [Turning off eslint rule for a specific file](https://stackoverflow.com/questions/34764287/turning-off-eslint-rule-for-a-specific-file) – asynts Mar 21 '21 at 12:14
  • ESLint has nothing to do with your code being react or whatnot. I have provided a detailed answer of all the cases (single/multiple line/file, some/all rules) in this *answer*: https://stackoverflow.com/a/56719951 – Aidin Dec 12 '21 at 05:50

9 Answers9

248

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 inconvenience you can also read up from eslint-plugin-react's github documentation about how to disable or enable it with various options.

hanorine
  • 7,256
  • 3
  • 14
  • 18
94

Just put this on top of your file:

/* eslint-disable react/prop-types */
Kevin Ghadyani
  • 6,829
  • 6
  • 44
  • 62
Gyandeep
  • 12,726
  • 4
  • 31
  • 42
  • Tried it out and it works fine. It's a cleaner approach. Thanks. – cuadraman Jul 08 '15 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`. – Kevin Ghadyani Apr 05 '21 at 04:25
36

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
    }
}
Piyush Zalani
  • 3,686
  • 1
  • 13
  • 29
Leopold Kristjansson
  • 2,246
  • 28
  • 47
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 */
cuadraman
  • 14,964
  • 7
  • 27
  • 32
  • 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 Aug 25 '16 at 18:11
  • `/* eslint-disable react/prop-types */` should be placed at the very beginning of a file – VonAxt Feb 21 '19 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>);
P-A
  • 1,161
  • 12
  • 16
5

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

"rules": {
  "react/prop-types": "off"
}
coderpc
  • 4,119
  • 6
  • 51
  • 93
0

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

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

Idan
  • 3,604
  • 1
  • 28
  • 33
0

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

rules: {
  'react/prop-types': 'off'
}
Super Kai - Kazuya Ito
  • 22,221
  • 10
  • 124
  • 129
Rayan arnel
  • 33
  • 5
-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.

s-sajib
  • 1
  • 1