Add no-unknown-property rule (fixes #28)

Author: yannickcr

README.md

@@ -50,6 +50,7 @@ Finally, enable all of the rules that you would like to use.
     "react/no-did-mount-set-state": 1,
     "react/no-did-update-set-state": 1,
     "react/no-multi-comp": 1,
+    "react/no-unknown-property": 1,
     "react/prop-types": 1,
     "react/react-in-jsx-scope": 1,
     "react/self-closing-comp": 1,
@@ -68,6 +69,7 @@ Finally, enable all of the rules that you would like to use.
 * [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of setState in componentDidMount
 * [no-did-update-set-state](docs/rules/no-did-update-set-state.md): Prevent usage of setState in componentDidUpdate
 * [no-multi-comp](docs/rules/no-multi-comp.md): Prevent multiple component definition per file
+* [no-unknown-property](docs/rules/no-unknown-property.md): Prevent usage of unknown DOM property
 * [prop-types](docs/rules/prop-types.md): Prevent missing props validation in a React component definition
 * [react-in-jsx-scope](docs/rules/react-in-jsx-scope.md): Prevent missing React when using JSX
 * [self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children

docs/rules/no-unknown-property.md

@@ -0,0 +1,25 @@
+# Prevent usage of unknown DOM property (no-unknown-property)
+
+In JSX all DOM properties and attributes should be camelCased to be consistent with standard JavaScript style. This can be a possible source of error if you are used to write plain HTML.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+var React = require('react');
+
+var Hello = <div class="hello">Hello World</div>;
+```
+
+The following patterns are not considered warnings:
+
+```js
+var React = require('react');
+
+var Hello = <div className="hello">Hello World</div>;
+```
+
+## When Not To Use It
+
+If you are not using JSX you can disable this rule.

index.js

@@ -13,7 +13,8 @@ module.exports = {
     'react-in-jsx-scope': require('./lib/rules/react-in-jsx-scope'),
     'jsx-uses-vars': require('./lib/rules/jsx-uses-vars'),
     'jsx-no-undef': require('./lib/rules/jsx-no-undef'),
-    'jsx-quotes': require('./lib/rules/jsx-quotes')
+    'jsx-quotes': require('./lib/rules/jsx-quotes'),
+    'no-unknown-property': require('./lib/rules/no-unknown-property')
   },
   rulesConfig: {
     'jsx-uses-react': 0,
@@ -27,6 +28,7 @@ module.exports = {
     'react-in-jsx-scope': 0,
     'jsx-uses-vars': 0,
     'jsx-no-undef': 0,
-    'jsx-quotes': 0
+    'jsx-quotes': 0,
+    'no-unknown-property': 0
   }
 };

lib/rules/no-unknown-property.js

@@ -0,0 +1,80 @@
+/**
+ * @fileoverview Prevent usage of unknown DOM property
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Constants
+// ------------------------------------------------------------------------------
+
+var UNKNOWN_MESSAGE = 'Unknown property \'{{name}}\' found, use \'{{standardName}}\' instead';
+
+var DOM_ATTRIBUTE_NAMES = {
+  'accept-charset': 'acceptCharset',
+  class: 'className',
+  for: 'htmlFor',
+  'http-equiv': 'httpEquiv'
+};
+
+var DOM_PROPERTY_NAMES = [
+  'acceptCharset', 'accessKey', 'allowFullScreen', 'allowTransparency', 'autoComplete', 'autoFocus', 'autoPlay',
+  'cellPadding', 'cellSpacing', 'charSet', 'classID', 'className', 'colSpan', 'contentEditable', 'contextMenu',
+  'crossOrigin', 'dateTime', 'encType', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
+  'frameBorder', 'hrefLang', 'htmlFor', 'httpEquiv', 'marginHeight', 'marginWidth', 'maxLength', 'mediaGroup',
+  'noValidate', 'radioGroup', 'readOnly', 'rowSpan', 'spellCheck', 'srcDoc', 'srcSet', 'tabIndex', 'useMap',
+  'itemProp', 'itemScope', 'itemType', 'itemRef', 'itemId'
+];
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * Checks if a node name match the JSX tag convention.
+ * @param {String} name - Name of the node to check.
+ * @returns {boolean} Whether or not the node name match the JSX tag convention.
+ */
+var tagConvention = /^[a-z]|\-/;
+function isTagName(name) {
+  return tagConvention.test(name);
+}
+
+/**
+ * Get the standard name of the attribute.
+ * @param {String} name - Name of the attribute.
+ * @returns {String} The standard name of the attribute.
+ */
+function getStandardName(name) {
+  if (DOM_ATTRIBUTE_NAMES[name]) {
+    return DOM_ATTRIBUTE_NAMES[name];
+  }
+  var i;
+  var found = DOM_PROPERTY_NAMES.some(function(element, index) {
+    i = index;
+    return element.toLowerCase() === name;
+  });
+  return found ? DOM_PROPERTY_NAMES[i] : null;
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  return {
+
+    JSXAttribute: function(node) {
+      var standardName = getStandardName(node.name.name);
+      if (!isTagName(node.parent.name.name) || !standardName) {
+        return;
+      }
+      context.report(node, UNKNOWN_MESSAGE, {
+        name: node.name.name,
+        standardName: standardName
+      });
+    }
+  };
+
+};

tests/lib/rules/no-unknown-property.js

@@ -0,0 +1,50 @@
+/**
+ * @fileoverview Tests for no-unknown-property
+ * @author Yannick Croissant
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var eslint = require('eslint').linter;
+var ESLintTester = require('eslint-tester');
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var eslintTester = new ESLintTester(eslint);
+eslintTester.addRuleTest('lib/rules/no-unknown-property', {
+  valid: [
+    {code: '<App class="bar" />;', ecmaFeatures: {jsx: true}},
+    {code: '<App for="bar" />;', ecmaFeatures: {jsx: true}},
+    {code: '<App accept-charset="bar" />;', ecmaFeatures: {jsx: true}},
+    {code: '<App http-equiv="bar" />;', ecmaFeatures: {jsx: true}},
+    {code: '<div className="bar"></div>;', ecmaFeatures: {jsx: true}},
+    {code: '<div data-foo="bar"></div>;', ecmaFeatures: {jsx: true}}
+  ],
+  invalid: [{
+    code: '<div class="bar"></div>;',
+    errors: [{message: 'Unknown property \'class\' found, use \'className\' instead'}],
+    ecmaFeatures: {jsx: true}
+   }, {
+    code: '<div for="bar"></div>;',
+    errors: [{message: 'Unknown property \'for\' found, use \'htmlFor\' instead'}],
+    ecmaFeatures: {jsx: true}
+   }, {
+    code: '<div accept-charset="bar"></div>;',
+    errors: [{message: 'Unknown property \'accept-charset\' found, use \'acceptCharset\' instead'}],
+    ecmaFeatures: {jsx: true}
+   }, {
+    code: '<div http-equiv="bar"></div>;',
+    errors: [{message: 'Unknown property \'http-equiv\' found, use \'httpEquiv\' instead'}],
+    ecmaFeatures: {jsx: true}
+   }, {
+    code: '<div accesskey="bar"></div>;',
+    errors: [{message: 'Unknown property \'accesskey\' found, use \'accessKey\' instead'}],
+    ecmaFeatures: {jsx: true}}
+  ]
+});