chtefi
5/30/2015 - 11:42 PM

.eslintrc with babel-eslint + eslint-plugin-react

.eslintrc with babel-eslint + eslint-plugin-react

// Force the lintage before bundling

preLoaders: [
	{ test: /\.js$/, loader: 'eslint-loader', exclude: /node_modules/ }
],
{
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "babel-eslint",
  "plugins": [
      "eslint-plugin-react"
  ],
  "rules": {
  	// 2 for error, 1 for warning
    
  	// babel-eslint
    "quotes": [2, "single"], // no 3 but ''
    "strict": [2, "never"], // babel-eslint has some issue with "use strict" , disable it

    // eslint-plugin-react
    "react/wrap-multilines": 2, // parenthesis when doing return (<div>..</div>) on multilines
    // methods order in the class must follow the lifecycle order
    "react/sort-comp": [2, {
    	order: [ 'lifecycle', 'everything-else', 'render' ],
	  	groups: {
		    lifecycle: [
		      'displayName',
		      'propTypes',
		      'mixins',
		      'statics',
		      'constructor', // constructor is not specified in the default group.lifecycle, so it's added there!
		      'getDefaultProps',
		      'getInitialState',
		      'componentWillMount',
		      'componentDidMount',
		      'componentWillReceiveProps',
		      'shouldComponentUpdate',
		      'componentWillUpdate',
		      'componentDidUpdate',
		      'componentWillUnmount'
		    ]
	  	}
  	}],
    "react/react-in-jsx-scope": 2, // React must be require(), not global
    "react/prop-types": 2, // all this.props.XXX must have XXX defined in propTypes
    "react/no-unknown-property": 2, // warn unknown jsx properties (only class= it seems?!)
    "react/no-multi-comp": 2, // one react component per file
    "react/no-did-update-set-state": 1, // no setState in componentDidUpdate (to avoid retrigger another render)  (seems to not work in ES6 style?)
    "react/no-did-mount-set-state": [ 1, "allow-in-func" ], // no setState in componentDidMount (to avoid retrigger another render) (seems to not work in ES6 style?)
    "react/jsx-sort-prop-types": 2, // order propTypes alphabetically
    "react/jsx-sort-props": 0, // not mandatory to set them alphabetically when using the component
    "react/jsx-no-undef": 2, // check for non imported component used in the JSX
    "react/jsx-quotes": [ 2, "double", "avoid-escape"], // <Hello name="John" />; or <Hello name='John "and" Me' />;
    "react/jsx-boolean-value": [ 2, "always" ]
  }
}