From 5c1f029e4cd1a03193e3dcbf0e5020986b3232ae Mon Sep 17 00:00:00 2001
From: Yannick Croissant <yannick.croissant@gmail.com>
Date: Thu, 21 Jan 2016 22:12:13 +0000
Subject: [PATCH] Add auto fix for no-unknown-property

---
 README.md                              |  2 +-
 docs/rules/no-unknown-property.md      |  2 ++
 lib/rules/no-unknown-property.js       | 13 ++++++++++---
 tests/lib/rules/no-unknown-property.js |  9 +++++++++
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 98571df220..2e014f4ae7 100644
--- a/README.md
+++ b/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
diff --git a/docs/rules/no-unknown-property.md b/docs/rules/no-unknown-property.md
index 44ba9db3de..5bb774ddeb 100644
--- a/docs/rules/no-unknown-property.md
+++ b/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:
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index 4152e15b7b..7e9147dd32 100644
--- a/lib/rules/no-unknown-property.js
+++ b/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);
+        }
       });
     }
   };
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index 25a0becdda..c0fcef6b14 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/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
   }]