Add jsx-quotes rule (fixes #12)

Author: yannickcr

README.md

@@ -43,6 +43,7 @@ Finally, enable all of the rules that you would like to use.
 {
   "rules": {
     "react/display-name": 1,
+    "react/jsx-quotes": 1,
     "react/jsx-no-undef": 1,
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
@@ -60,6 +61,7 @@ Finally, enable all of the rules that you would like to use.
 # List of supported rules
 
 * [display-name](docs/rules/display-name.md): Prevent missing displayName in a React component definition
+* [jsx-quotes](docs/rules/jsx-quotes.md): Enforce quote style for JSX attributes
 * [jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
 * [jsx-uses-react](docs/rules/jsx-uses-react.md): Prevent React to be incorrectly marked as unused
 * [jsx-uses-vars](docs/rules/jsx-uses-vars.md): Prevent variables used in JSX to be incorrectly marked as unused

docs/rules/jsx-quotes.md

@@ -0,0 +1,52 @@
+# Enforce quote style for JSX attributes (jsx-quotes)
+
+Enforces coding style that JSX attributes are delimited with single or double quotes.
+
+It takes an option as the second parameter which can be `"double"` or `"single"` for double-quotes or single-quotes respectively. There is no default.
+
+```js
+var HelloJohn = <Hello name="John" />;
+var HelloJohn = <Hello name='John' />;
+```
+
+The third parameter enables an exception to the rule to avoid escaping quotes. For example, when `"single"` is the standard, this option allows the use of double quotes to avoid escaping single quotes. This option can have the value `"avoid-escape"` and is off by default.
+
+```js
+[2, "single", "avoid-escape"]
+```
+
+## Rule Details
+
+This rule will throw warnings when the wrong type of quote is used.
+
+The following patterns are considered warnings:
+
+```js
+// When [1, "double"]
+var HelloJohn = <Hello name='John' />;
+
+// When [1, "single"]
+var HelloJohn = <Hello name="John" />;
+
+// When [1, "double", "avoid-escape"]
+var HelloJohn = <Hello name='John' />;
+
+// When [1, "single", "avoid-escape"]
+var HelloJohn = <Hello name="John" />;
+```
+
+The follow patterns are not considered warnings:
+
+```js
+// When [1, "double"]
+var HelloJohn = <Hello name="John" />;
+
+// When [1, "single"]
+var HelloJohn = <Hello name='John' />;
+
+// When [1, "double", "avoid-escape"]
+var HelloJohn = <Hello name='John "FooBar" Smith' />;
+
+// When [1, "single", "avoid-escape"]
+var HelloJohn = <Hello name="John 'FooBar' Smith" />;
+```

index.js

@@ -12,7 +12,8 @@ module.exports = {
     'no-did-update-set-state': require('./lib/rules/no-did-update-set-state'),
     '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-no-undef': require('./lib/rules/jsx-no-undef'),
+    'jsx-quotes': require('./lib/rules/jsx-quotes')
   },
   rulesConfig: {
     'jsx-uses-react': 0,
@@ -25,6 +26,7 @@ module.exports = {
     'no-did-update-set-state': 0,
     'react-in-jsx-scope': 0,
     'jsx-uses-vars': 0,
-    'jsx-no-undef': 0
+    'jsx-no-undef': 0,
+    'jsx-quotes': 0
   }
 };

lib/rules/jsx-quotes.js

@@ -0,0 +1,80 @@
+/**
+ * @fileoverview Enforce props quotes style
+ * @author Matt DuVall <http://www.mattduvall.com/>, Brandon Payton, Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Constants
+// ------------------------------------------------------------------------------
+
+var QUOTE_SETTINGS = {
+  double: {
+    quote: '"',
+    alternateQuote: '\'',
+    description: 'doublequote'
+  },
+  single: {
+    quote: '\'',
+    alternateQuote: '"',
+    description: 'singlequote'
+  }
+};
+
+var AVOID_ESCAPE = 'avoid-escape';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  /**
+   * Validate that a string passed in is surrounded by the specified character
+   * @param  {string} val The text to check.
+   * @param  {string} character The character to see if it's surrounded by.
+   * @returns {boolean} True if the text is surrounded by the character, false if not.
+   * @private
+   */
+  function isSurroundedBy(val, character) {
+    return val[0] === character && val[val.length - 1] === character;
+  }
+
+  /**
+   * Determines if a given node is part of JSX syntax.
+   * @param {ASTNode} node The node to check.
+   * @returns {boolean} True if the node is a JSX node, false if not.
+   * @private
+   */
+  function isJSXElement(node) {
+    return node.type.indexOf('JSX') === 0;
+  }
+
+  return {
+
+    Literal: function(node) {
+      if (!isJSXElement(node.parent)) {
+        return;
+      }
+      var val = node.value;
+      var rawVal = node.raw;
+      var quoteOption = context.options[0];
+      var settings = QUOTE_SETTINGS[quoteOption];
+      var avoidEscape = context.options[1] === AVOID_ESCAPE;
+      var isValid;
+
+      if (settings && typeof val === 'string') {
+        isValid = isSurroundedBy(rawVal, settings.quote);
+
+        if (!isValid && avoidEscape) {
+          isValid = isSurroundedBy(rawVal, settings.alternateQuote) && rawVal.indexOf(settings.quote) >= 0;
+        }
+
+        if (!isValid) {
+          context.report(node, 'JSX attributes must use ' + settings.description + '.');
+        }
+      }
+    }
+  };
+
+};

tests/lib/rules/jsx-quotes.js

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview Tests for jsx-quotes
+ * @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/jsx-quotes', {
+    valid: [
+        {code: '<App foo=\'bar\' />;', args: [1, 'single'], ecmaFeatures: {jsx: true}},
+        {code: '<App foo="bar" />;', args: [1, 'double'], ecmaFeatures: {jsx: true}},
+        {code: '<App foo="ba\'r" />;', args: [1, 'single', 'avoid-escape'], ecmaFeatures: {jsx: true}},
+        {code: '<App foo=\'ba"r\' />;', args: [1, 'double', 'avoid-escape'], ecmaFeatures: {jsx: true}}
+    ],
+    invalid: [
+        {code: '<App foo="bar" />;',
+         errors: [{message: 'JSX attributes must use singlequote.'}], args: [1, 'single'], ecmaFeatures: {jsx: true}},
+        {code: '<App foo=\'bar\' />;',
+         errors: [{message: 'JSX attributes must use doublequote.'}], args: [1, 'double'], ecmaFeatures: {jsx: true}}
+    ]
+});