Init rule state-in-constructor

index.js

@@ -78,6 +78,7 @@ const allRules = {
   'self-closing-comp': require('./lib/rules/self-closing-comp'),
   'sort-comp': require('./lib/rules/sort-comp'),
   'sort-prop-types': require('./lib/rules/sort-prop-types'),
+  'state-in-constructor': require('./lib/rules/state-in-constructor'),
   'style-prop-object': require('./lib/rules/style-prop-object'),
   'void-dom-elements-no-children': require('./lib/rules/void-dom-elements-no-children')
 };

lib/rules/state-in-constructor.js

@@ -0,0 +1,39 @@
+/**
+ * @fileoverview State initialization in an ES6 class component should be in a constructor
+ * @author Kanitkorn Sujautra
+ */
+'use strict';
+
+const Components = require('../util/Components');
+const docsUrl = require('../util/docsUrl');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'State initialization in an ES6 class component should be in a constructor',
+      category: 'Stylistic Issues',
+      recommended: false,
+      url: docsUrl('state-in-constructor')
+    },
+    schema: []
+  },
+
+  create: Components.detect((context, components, utils) => ({
+    ClassProperty: function (node) {
+      if (
+        !node.static &&
+        node.key.name === 'state' &&
+        utils.isES6Component(node.parent.parent)
+      ) {
+        context.report({
+          node,
+          message: 'State initialization should be in a constructor'
+        });
+      }
+    }
+  }))
+};

tests/lib/rules/state-in-constructor.js

@@ -0,0 +1,155 @@
+/**
+ * @fileoverview State initialization in an ES6 class component should be in a constructor
+ * @author Kanitkorn Sujautra
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/state-in-constructor');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTesterConfig = {
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+};
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester(ruleTesterConfig);
+ruleTester.run('state-in-constructor', rule, {
+  valid: [{
+    code: `
+      class Foo extends React.Component {
+        render() {
+          return <div>Foo</div>
+        }
+      }
+    `
+  }, {
+    code: `
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props)
+          this.state = { bar: 0 }
+        }
+        render() {
+          return <div>Foo</div>
+        }
+      }
+    `
+  }, {
+    code: `
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props)
+          this.state = { bar: 0 }
+        }
+        baz = { bar: 0 }
+        render() {
+          return <div>Foo</div>
+        }
+      }
+    `
+  }, {
+    code: `
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props)
+          this.baz = { bar: 0 }
+        }
+        render() {
+          return <div>Foo</div>
+        }
+      }
+    `
+  }, {
+    code: `
+      class Foo extends React.Component {
+        baz = { bar: 0 }
+        render() {
+          return <div>Foo</div>
+        }
+      }
+    `
+  }, {
+    code: `
+      const Foo = () => <div>Foo</div>
+    `
+  }, {
+    code: `
+      function Foo () {
+        return <div>Foo</div>
+      }
+    `
+  }],
+
+  invalid: [{
+    code: `
+      class Foo extends React.Component {
+        state = { bar: 0 }
+        render() {
+          return <div>Foo</div>
+        }
+      }
+    `,
+    errors: [{
+      message: 'State initialization should be in a constructor'
+    }]
+  }, {
+    code: `
+      class Foo extends React.Component {
+        state = { bar: 0 }
+        baz = { bar: 0 }
+        render() {
+          return <div>Foo</div>
+        }
+      }
+    `,
+    errors: [{
+      message: 'State initialization should be in a constructor'
+    }]
+  }, {
+    code: `
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props)
+          this.baz = { bar: 0 }
+        }
+        state = { baz: 0 }
+        render() {
+          return <div>Foo</div>
+        }
+      }
+    `,
+    errors: [{
+      message: 'State initialization should be in a constructor'
+    }]
+  }, {
+    code: `
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props)
+          this.state = { bar: 0 }
+        }
+        state = { baz: 0 }
+        render() {
+          return <div>Foo</div>
+        }
+      }
+    `,
+    errors: [{
+      message: 'State initialization should be in a constructor'
+    }]
+  }]
+});