Add auto fix for no-unknown-property

README.md

@@ -144,7 +144,7 @@ Finally, enable all of the rules that you would like to use.
 * [no-multi-comp](docs/rules/no-multi-comp.md): Prevent multiple component definition per file
 * [no-set-state](docs/rules/no-set-state.md): Prevent usage of `setState`
 * [no-string-refs](docs/rules/no-string-refs.md): Prevent using string references in `ref` attribute.
-* [no-unknown-property](docs/rules/no-unknown-property.md): Prevent usage of unknown DOM property
+* [no-unknown-property](docs/rules/no-unknown-property.md): Prevent usage of unknown DOM property (fixable)
 * [prefer-es6-class](docs/rules/prefer-es6-class.md): Enforce ES5 or ES6 class for React Components
 * [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

docs/rules/no-unknown-property.md

@@ -2,6 +2,8 @@
 
 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.
 
+**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+
 ## Rule Details
 
 The following patterns are considered warnings:

lib/rules/no-unknown-property.js

@@ -116,9 +116,16 @@ module.exports = function(context) {
       if (!isTagName(node) || !standardName) {
         return;
       }
-      context.report(node, UNKNOWN_MESSAGE, {
-        name: name,
-        standardName: standardName
+      context.report({
+        node: node,
+        message: UNKNOWN_MESSAGE,
+        data: {
+          name: name,
+          standardName: standardName
+        },
+        fix: function(fixer) {
+          return fixer.replaceText(node.name, standardName);
+        }
       });
     }
   };

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

@@ -40,38 +40,47 @@ ruleTester.run('no-unknown-property', rule, {
   ],
   invalid: [{
     code: '<div class="bar"></div>;',
+    output: '<div className="bar"></div>;',
     errors: [{message: 'Unknown property \'class\' found, use \'className\' instead'}],
     parserOptions: parserOptions
   }, {
     code: '<div for="bar"></div>;',
+    output: '<div htmlFor="bar"></div>;',
     errors: [{message: 'Unknown property \'for\' found, use \'htmlFor\' instead'}],
     parserOptions: parserOptions
   }, {
     code: '<div accept-charset="bar"></div>;',
+    output: '<div acceptCharset="bar"></div>;',
     errors: [{message: 'Unknown property \'accept-charset\' found, use \'acceptCharset\' instead'}],
     parserOptions: parserOptions
   }, {
     code: '<div http-equiv="bar"></div>;',
+    output: '<div httpEquiv="bar"></div>;',
     errors: [{message: 'Unknown property \'http-equiv\' found, use \'httpEquiv\' instead'}],
     parserOptions: parserOptions
   }, {
     code: '<div accesskey="bar"></div>;',
+    output: '<div accessKey="bar"></div>;',
     errors: [{message: 'Unknown property \'accesskey\' found, use \'accessKey\' instead'}],
     parserOptions: parserOptions
   }, {
     code: '<div onclick="bar"></div>;',
+    output: '<div onClick="bar"></div>;',
     errors: [{message: 'Unknown property \'onclick\' found, use \'onClick\' instead'}],
     parserOptions: parserOptions
   }, {
     code: '<div onmousedown="bar"></div>;',
+    output: '<div onMouseDown="bar"></div>;',
     errors: [{message: 'Unknown property \'onmousedown\' found, use \'onMouseDown\' instead'}],
     parserOptions: parserOptions
   }, {
     code: '<use xlink:href="bar" />;',
+    output: '<use xlinkHref="bar" />;',
     errors: [{message: 'Unknown property \'xlink:href\' found, use \'xlinkHref\' instead'}],
     parserOptions: parserOptions
   }, {
     code: '<rect clip-path="bar" />;',
+    output: '<rect clipPath="bar" />;',
     errors: [{message: 'Unknown property \'clip-path\' found, use \'clipPath\' instead'}],
     parserOptions: parserOptions
   }]