feat: enable jsx-fragment rule (#71)

moxystudio · Sep 23, 2019 · b9d6b19 · b9d6b19
1 parent 6b38251
commit b9d6b19
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 38 deletions.
diff --git a/rules/react.js b/rules/react.js
@@ -41,6 +41,8 @@ module.exports = {
         'react/jsx-filename-extension': [2, { 'extensions': ['.js'] }],
         // Ensure correct position of the first property.
         'react/jsx-first-prop-new-line': 0,
+        // Enforce shorthand or standard form for React fragments
+        'react/jsx-fragments': [1, 'syntax'],
         // Enforce event handler naming conventions in JSX
         'react/jsx-handler-names': [2, {
             'eventHandlerPrefix': 'handle',

diff --git a/test/__snapshots__/index.spec.js.snap b/test/__snapshots__/index.spec.js.snap
@@ -927,225 +927,231 @@ Array [
     "rule": "react/jsx-equals-spacing",
     "severity": 2,
   },
+  Object {
+    "column": 17,
+    "line": 158,
+    "rule": "react/jsx-fragments",
+    "severity": 1,
+  },
   Object {
     "column": 35,
-    "line": 165,
+    "line": 207,
     "rule": "react/jsx-handler-names",
     "severity": 2,
   },
   Object {
     "column": 35,
-    "line": 169,
+    "line": 211,
     "rule": "react/jsx-handler-names",
     "severity": 2,
   },
   Object {
     "column": 1,
-    "line": 188,
+    "line": 230,
     "rule": "indent",
     "severity": 2,
   },
   Object {
     "column": 9,
-    "line": 188,
+    "line": 230,
     "rule": "react/jsx-indent-props",
     "severity": 2,
   },
   Object {
     "column": 1,
-    "line": 204,
+    "line": 246,
     "rule": "indent",
     "severity": 2,
   },
   Object {
     "column": 7,
-    "line": 204,
+    "line": 246,
     "rule": "react/jsx-indent",
     "severity": 2,
   },
   Object {
     "column": 29,
-    "line": 218,
+    "line": 260,
     "rule": "react/jsx-key",
     "severity": 1,
   },
   Object {
     "column": 35,
-    "line": 239,
+    "line": 281,
     "rule": "react/jsx-no-bind",
     "severity": 1,
   },
   Object {
     "column": 35,
-    "line": 243,
+    "line": 285,
     "rule": "react/jsx-no-bind",
     "severity": 1,
   },
   Object {
     "column": 22,
-    "line": 268,
+    "line": 310,
     "rule": "react/jsx-no-comment-textnodes",
     "severity": 2,
   },
   Object {
     "column": 22,
-    "line": 276,
+    "line": 318,
     "rule": "react/jsx-no-comment-textnodes",
     "severity": 2,
   },
   Object {
     "column": 44,
-    "line": 300,
+    "line": 342,
     "rule": "react/jsx-no-duplicate-props",
     "severity": 2,
   },
   Object {
     "column": 72,
-    "line": 318,
+    "line": 360,
     "rule": "react/jsx-no-target-blank",
     "severity": 1,
   },
   Object {
     "column": 24,
-    "line": 329,
+    "line": 371,
     "rule": "react/jsx-no-undef",
     "severity": 2,
   },
   Object {
     "column": 17,
-    "line": 343,
+    "line": 385,
     "rule": "react/jsx-pascal-case",
     "severity": 2,
   },
   Object {
     "column": 31,
-    "line": 363,
+    "line": 405,
     "rule": "react/jsx-tag-spacing",
     "severity": 2,
   },
   Object {
     "column": 20,
-    "line": 374,
+    "line": 416,
     "rule": "react/jsx-tag-spacing",
     "severity": 2,
   },
   Object {
     "column": 23,
-    "line": 393,
+    "line": 435,
     "rule": "react/jsx-wrap-multilines",
     "severity": 2,
   },
   Object {
     "column": 28,
-    "line": 417,
+    "line": 459,
     "rule": "react/no-children-prop",
     "severity": 2,
   },
   Object {
     "column": 1,
-    "line": 446,
+    "line": 488,
     "rule": "react/no-deprecated",
     "severity": 1,
   },
   Object {
     "column": 13,
-    "line": 478,
+    "line": 520,
     "rule": "react/no-direct-mutation-state",
     "severity": 2,
   },
   Object {
     "column": 21,
-    "line": 509,
+    "line": 551,
     "rule": "react/no-is-mounted",
     "severity": 2,
   },
   Object {
     "column": 18,
-    "line": 545,
+    "line": 587,
     "rule": "react/no-render-return-value",
     "severity": 2,
   },
   Object {
     "column": 25,
-    "line": 570,
+    "line": 612,
     "rule": "react/no-string-refs",
     "severity": 2,
   },
   Object {
     "column": 48,
-    "line": 570,
+    "line": 612,
     "rule": "babel/semi",
     "severity": 2,
   },
   Object {
     "column": 11,
-    "line": 601,
+    "line": 643,
     "rule": "react/no-unescaped-entities",
     "severity": 2,
   },
   Object {
     "column": 13,
-    "line": 601,
+    "line": 643,
     "rule": "react/no-unescaped-entities",
     "severity": 2,
   },
   Object {
     "column": 14,
-    "line": 601,
+    "line": 643,
     "rule": "react/no-unescaped-entities",
     "severity": 2,
   },
   Object {
     "column": 22,
-    "line": 621,
+    "line": 663,
     "rule": "react/no-unknown-property",
     "severity": 2,
   },
   Object {
     "column": 42,
-    "line": 647,
+    "line": 689,
     "rule": "react/prefer-es6-class",
     "severity": 2,
   },
   Object {
     "column": 44,
-    "line": 675,
+    "line": 717,
     "rule": "react/prop-types",
     "severity": 2,
   },
   Object {
     "column": 25,
-    "line": 715,
+    "line": 757,
     "rule": "prefer-import/prefer-import-over-require",
     "severity": 1,
   },
   Object {
     "column": 5,
-    "line": 726,
+    "line": 768,
     "rule": "react/require-render-return",
     "severity": 2,
   },
   Object {
     "column": 23,
-    "line": 745,
+    "line": 787,
     "rule": "react/self-closing-comp",
     "severity": 2,
   },
   Object {
     "column": 9,
-    "line": 763,
+    "line": 805,
     "rule": "react/sort-comp",
     "severity": 2,
   },
   Object {
     "column": 22,
-    "line": 807,
+    "line": 849,
     "rule": "react/style-prop-object",
     "severity": 2,
   },
   Object {
     "column": 15,
-    "line": 819,
+    "line": 861,
     "rule": "react/void-dom-elements-no-children",
     "severity": 2,
   },

diff --git a/test/fixtures/rules/react/react.js b/test/fixtures/rules/react/react.js
@@ -1,4 +1,4 @@
-import React, { Component, ReactDOM } from 'react';
+import React, { Component, ReactDOM, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 
@@ -148,6 +148,48 @@ Component.propTypes = {
 // ---------------------------------------------------------------------
 // See file ./react-jsx-extension.js
 
+// `jsx-fragments` - enforce shorthand or standard form for React fragments
+// ---------------------------------------------------------------------
+// Disencouraged
+(function () {
+    class MyComponent extends Component {
+        render() {
+            return (
+                <Fragment>
+                    <p>foo</p>
+                    <p>bar</p>
+                </Fragment>
+            );
+        }
+    }
+})();
+// Good
+(function () {
+    class MyComponent extends Component {
+        render() {
+            return (
+                <>
+                    <p>foo</p>
+                    <p>bar</p>
+                </>
+            );
+        }
+    }
+})();
+// Good
+(function () {
+    class MyComponent extends Component {
+        render() {
+            return (
+                <Fragment key="1">
+                    <p>foo</p>
+                    <p>bar</p>
+                </Fragment>
+            );
+        }
+    }
+})();
+
 // `jsx-first-prop-new-line` - configure the position of the first property
 // ---------------------------------------------------------------------
 // Not active