Add no-common-typos rule

lib/rules/no-common-typos.js

@@ -0,0 +1,88 @@
+/**
+ * @fileoverview Warn for common attribute typos.
+ * @author Koen Punt
+ */
+'use strict';
+
+var Components = require('../util/Components');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+var PATTERN_REGEXP = new RegExp('^/(.+)/(.+)?$');
+
+/**
+ * Convert pattern string to a regular expression.
+ * @param {String|RegExp} string regex
+ * @return {RegExp}
+ */
+function parsePattern(pattern) {
+  if (PATTERN_REGEXP.exec(pattern)) {
+    return new RegExp(RegExp.$1, RegExp.$2);
+  }
+  return new RegExp('^' + pattern + '$');
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Warn for common attribute typos.',
+      category: 'Possible Errors',
+      recommended: false
+    },
+    schema: [{
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          pattern: {
+            type: 'string'
+          },
+          correct: {
+            type: 'string'
+          }
+        },
+        additionalProperties: false
+      }
+    }],
+    fixable: 'code'
+  },
+
+  create: Components.detect(function(context) {
+
+    var rules = context.options[0] || [];
+
+    /**
+     * Checks if we are using an an incorrect attribute name.
+     * @param {ASTNode} node The AST node being checked.
+     * @returns {Boolean} True if an incorrect attribute name is used, false if not.
+     */
+    function isIncorrectAttributeName(regex, correct, node) {
+      return Boolean(
+        node.type === 'JSXAttribute' &&
+        node.name &&
+        node.name.name !== correct &&
+        regex.test(node.name.name)
+      );
+    }
+
+    return {
+      JSXAttribute: function(node) {
+        rules.forEach(function(rule) {
+          var regex = parsePattern(rule.pattern);
+          if (isIncorrectAttributeName(regex, rule.correct, node)) {
+            var attribute = node.name.name;
+            context.report({
+              node: node,
+              message: 'Using possible incorrect attribute `' + attribute + '`, did you mean `' + rule.correct + '`?',
+              fix: function(fixer) {
+                return fixer.replaceText(attribute, rule.correct);
+              }
+            });
+          }
+        });
+      }
+    };
+  })
+};

tests/lib/rules/no-common-typos.js

@@ -0,0 +1,65 @@
+/**
+ * @fileoverview Warn for common attribute typos.
+ * @author Koen Punt
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/no-common-typos');
+var RuleTester = require('eslint').RuleTester;
+
+require('babel-eslint');
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var options = [
+  [
+    {
+      pattern: '/dangerouslySetInnerHTML/i',
+      correct: 'dangerouslySetInnerHTML'
+    }
+  ]
+];
+
+var parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+var ruleTester = new RuleTester();
+ruleTester.run('no-common-typos', rule, {
+
+  valid: [{
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    return <div dangerouslySetInnerHTML={{__html: "Hello World"}}/>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    options: options,
+    parserOptions: parserOptions
+  }],
+
+  invalid: [{
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    return <div dangerouslySetInnerHtml={{__html: "Hello World"}}/>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    options: options,
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Using possible incorrect attribute `dangerouslySetInnerHtml`, did you mean `dangerouslySetInnerHTML`?'
+    }]
+  }]
+});