Add jsx-closing-bracket-atomic rule (Fixes #693)

index.js

@@ -37,6 +37,7 @@ var rules = {
   'jsx-no-literals': require('./lib/rules/jsx-no-literals'),
   'jsx-indent-props': require('./lib/rules/jsx-indent-props'),
   'jsx-indent': require('./lib/rules/jsx-indent'),
+  'jsx-closing-bracket-atomic': require('./lib/rules/jsx-closing-bracket-atomic'),
   'jsx-closing-bracket-location': require('./lib/rules/jsx-closing-bracket-location'),
   'jsx-space-before-closing': require('./lib/rules/jsx-space-before-closing'),
   'no-direct-mutation-state': require('./lib/rules/no-direct-mutation-state'),

lib/rules/jsx-closing-bracket-atomic.js

@@ -0,0 +1,40 @@
+/**
+ * @fileoverview Ensures the "/>" and "</" closing indicators are written as a single token
+ * @author Diogo Franco (Kovensky)
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Constants
+// ------------------------------------------------------------------------------
+
+var MESSAGE_SELF_CLOSING = 'Self-closing JSX elements must not have whitespace between the `/` and the `>`';
+var MESSAGE_CLOSING = 'JSX closing tags must not have whitespace between the `<` and the `/`';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+  return {
+    JSXOpeningElement: function(node) {
+      if (node.selfClosing) {
+        var sourceCode = context.getSourceCode();
+        var sourceText = sourceCode.getText(node);
+        if (sourceText.lastIndexOf('/>') !== sourceText.length - 2) {
+          context.report(node, MESSAGE_SELF_CLOSING);
+        }
+      }
+    },
+    JSXClosingElement: function(node) {
+      var sourceCode = context.getSourceCode();
+      var sourceText = sourceCode.getText(node);
+      if (sourceText.indexOf('</') !== 0) {
+        context.report(node, MESSAGE_CLOSING);
+      }
+    }
+  };
+
+};
+
+module.exports.schema = [];

tests/lib/rules/jsx-closing-bracket-atomic.js

@@ -0,0 +1,57 @@
+/**
+ * @fileoverview Tests for jsx-closing-bracket-atomic
+ * @author Diogo Franco (Kovensky)
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/jsx-closing-bracket-atomic');
+var RuleTester = require('eslint').RuleTester;
+
+var parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+ruleTester.run('jsx-closing-bracket-atomic', rule, {
+  valid: [
+    {code: '<App/>;', parserOptions: parserOptions},
+    {code: '<App />;', parserOptions: parserOptions},
+    {code: '<div className="bar"></div>;', parserOptions: parserOptions},
+    {code: '<div className="bar"></ div>;', parserOptions: parserOptions}
+  ],
+  invalid: [{
+    code: '<App/ >;',
+    errors: [{message: 'Self-closing JSX elements must not have whitespace between the `/` and the `>`'}],
+    parserOptions: parserOptions
+  }, {
+    code: [
+      '<App/',
+      '>'
+    ].join('\n'),
+    errors: [{message: 'Self-closing JSX elements must not have whitespace between the `/` and the `>`'}],
+    parserOptions: parserOptions
+  }, {
+    code: '<div className="bar">< /div>;',
+    errors: [{message: 'JSX closing tags must not have whitespace between the `<` and the `/`'}],
+    parserOptions: parserOptions
+  }, {
+    code: [
+      '<div className="bar"><',
+      '/div>;'
+    ].join('\n'),
+    errors: [{message: 'JSX closing tags must not have whitespace between the `<` and the `/`'}],
+    parserOptions: parserOptions
+  }]
+});