[New] : Enforce a new line after jsx elements and expressions

docs/rules/jsx-newline.md

@@ -0,0 +1,63 @@
+# Enforce a new line after jsx elements and expressions (react/jsx-newline)
+
+## Rule Details
+
+This is a stylistic rule intended to make JSX code more readable by enforcing spaces between adjacent JSX elements and expressions.
+
+The following patterns are considered warnings:
+
+```jsx
+<div>
+  <Button>{data.label}</Button>
+  <List />
+</div>
+```
+
+```jsx
+<div>
+  <Button>{data.label}</Button>
+  {showSomething === true && <Something />}
+</div>
+```
+
+```jsx
+<div>
+  {showSomething === true && <Something />}
+  {showSomethingElse === true ? (
+    <SomethingElse />
+  ) : (
+    <ErrorMessage />
+  )}
+</div>
+```
+
+The following patterns are **not** considered warnings:
+
+```jsx
+<div>
+  <Button>{data.label}</Button>
+
+  <List />
+
+  <Button>
+    <IconPreview />
+    Button 2
+
+    <span></span>
+  </Button>
+
+  {showSomething === true && <Something />}
+
+  <Button>Button 3</Button>
+
+  {showSomethingElse === true ? (
+    <SomethingElse />
+  ) : (
+    <ErrorMessage />
+  )}
+</div>
+```
+
+## When Not To Use It
+
+You can turn this rule off if you are not concerned with spacing between your JSX elements and expressions.

index.js

@@ -91,7 +91,8 @@ const allRules = {
   'state-in-constructor': require('./lib/rules/state-in-constructor'),
   'static-property-placement': require('./lib/rules/static-property-placement'),
   'style-prop-object': require('./lib/rules/style-prop-object'),
-  'void-dom-elements-no-children': require('./lib/rules/void-dom-elements-no-children')
+  'void-dom-elements-no-children': require('./lib/rules/void-dom-elements-no-children'),
+  'jsx-newline': require('./lib/rules/jsx-newline')
 };
 /* eslint-enable */
 

lib/rules/jsx-newline.js

@@ -0,0 +1,61 @@
+/**
+ * @fileoverview Enforce a new line after jsx elements and expressions.
+ * @author Johnny Zabala
+ */
+
+'use strict';
+
+const arrayIncludes = require('array-includes');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Enforce a new line after jsx elements and expressions',
+      category: 'Stylistic Issues',
+      recommended: false
+    },
+    fixable: 'code'
+  },
+  create(context) {
+    const jsxElementParents = new Set();
+    const sourceCode = context.getSourceCode();
+    return {
+      'Program:exit'() {
+        jsxElementParents.forEach((parent) => {
+          parent.children.forEach((element, index, elements) => {
+            if (element.type === 'JSXElement' || element.type === 'JSXExpressionContainer') {
+              const firstAdjacentSibling = elements[index + 1];
+              const secondAdjacentSibling = elements[index + 2];
+              if (
+                firstAdjacentSibling
+                && secondAdjacentSibling
+                && arrayIncludes(['Literal', 'JSXText'], firstAdjacentSibling.type)
+                // Check adjacent sibling has the proper amount of newlines
+                && !/\n\s*\n/.test(firstAdjacentSibling.value)
+              ) {
+                context.report({
+                  node: secondAdjacentSibling,
+                  message: 'JSX element should start in a new line',
+                  fix(fixer) {
+                    return fixer.replaceText(
+                      firstAdjacentSibling,
+                      sourceCode.getText(firstAdjacentSibling)
+                        .replace(/(\n)(?!.*\1)/g, '\n\n')
+                    );
+                  }
+                });
+              }
+            }
+          });
+        });
+      },
+      ':matches(JSXElement, JSXFragment) > :matches(JSXElement, JSXExpressionContainer)': (node) => {
+        jsxElementParents.add(node.parent);
+      }
+    };
+  }
+};

tests/lib/rules/jsx-newline.js

@@ -0,0 +1,205 @@
+/**
+ * @fileoverview Enforce a new line after jsx elements and expressions
+ * @author Johnny Zabala
+ */
+
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester;
+const rule = require('../../../lib/rules/jsx-newline');
+
+const parsers = require('../../helpers/parsers');
+
+const parserOptions = {
+  ecmaVersion: 2018,
+  sourceType: 'module',
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({parserOptions});
+ruleTester.run('jsx-newline', rule, {
+  valid: [
+    `
+    <div>
+      <Button>{data.label}</Button>
+
+      <List />
+
+      <Button>
+        <IconPreview />
+        Button 2
+
+        <span></span>
+      </Button>
+
+      {showSomething === true && <Something />}
+
+      <Button>Button 3</Button>
+
+      {showSomethingElse === true ? (
+        <SomethingElse />
+      ) : (
+        <ErrorMessage />
+      )}
+    </div>
+    `,
+    {
+      code: `
+        <>
+          <Button>{data.label}</Button>
+          Test
+
+          <span>Should be in new line</span>
+        </>
+      `,
+      parser: parsers.BABEL_ESLINT
+    }
+  ],
+  invalid: [
+    {
+      code: `
+        <div>
+          <Button>{data.label}</Button>
+          <List />
+        </div>
+      `,
+      output: `
+        <div>
+          <Button>{data.label}</Button>
+
+          <List />
+        </div>
+      `,
+      errors: [{
+        message: 'JSX element should start in a new line'
+      }]
+    },
+    {
+      code: `
+        <div>
+          <Button>{data.label}</Button>
+          {showSomething === true && <Something />}
+        </div>
+      `,
+      output: `
+        <div>
+          <Button>{data.label}</Button>
+
+          {showSomething === true && <Something />}
+        </div>
+      `,
+      errors: [{
+        message: 'JSX element should start in a new line'
+      }]
+    },
+    {
+      code: `
+        <div>
+          {showSomething === true && <Something />}
+          <Button>{data.label}</Button>
+        </div>
+      `,
+      output: `
+        <div>
+          {showSomething === true && <Something />}
+
+          <Button>{data.label}</Button>
+        </div>
+      `,
+      errors: [{
+        message: 'JSX element should start in a new line'
+      }]
+    },
+    {
+      code: `
+        <div>
+          {showSomething === true && <Something />}
+          {showSomethingElse === true ? (
+            <SomethingElse />
+          ) : (
+            <ErrorMessage />
+          )}
+        </div>
+      `,
+      output: `
+        <div>
+          {showSomething === true && <Something />}
+
+          {showSomethingElse === true ? (
+            <SomethingElse />
+          ) : (
+            <ErrorMessage />
+          )}
+        </div>
+      `,
+      errors: [{
+        message: 'JSX element should start in a new line'
+      }]
+    },
+    {
+      code: `
+        <div>
+          <div>
+            <button></button>
+            <button></button>
+          </div>
+          <div>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+      `,
+      output: `
+        <div>
+          <div>
+            <button></button>
+
+            <button></button>
+          </div>
+
+          <div>
+            <span></span>
+
+            <span></span>
+          </div>
+        </div>
+      `,
+      errors: [
+        {message: 'JSX element should start in a new line'},
+        {message: 'JSX element should start in a new line'},
+        {message: 'JSX element should start in a new line'}
+      ]
+    },
+    {
+      code: `
+        <>
+          <Button>{data.label}</Button>
+          Test
+          <span>Should be in new line</span>
+        </>
+      `,
+      output: `
+        <>
+          <Button>{data.label}</Button>
+          Test
+
+          <span>Should be in new line</span>
+        </>
+      `,
+      errors: [
+        {message: 'JSX element should start in a new line'}
+      ],
+      parser: parsers.BABEL_ESLINT
+    }
+  ]
+});