Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable ESLint react/prop-types rule in a file?

Tags:

reactjs

eslint

People also ask

How do I disable ESLint props validation?

To fix ESLint error missing in props validation with React, we can add a comment or disable the rule globally with a config. to disable prop type check for the line immediately below the comment in our code. in . eslintrc to disable the prop type validation rule for the whole project.

How do you ignore ESLint rule?

log() statements that ESLint doesn't like. To temporarily turn off ESLint, you should add a block comment /* eslint-disable */ before the lines that you're interested in: /* eslint-disable */ console. log('JavaScript debug log'); console.


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.


Just put this on top of your file:

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

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

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

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

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

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