Add rule react/jsx-curly-spacing

index.js

@@ -19,7 +19,7 @@ const moduleConfig = {
     node: true,
     ...(hasES2022Support ? { es2022: true } : { es6: true }),
   },
-  plugins: [ "eslint-plugin-n", "import" ],
+  plugins: [ "eslint-plugin-n", "import", "eslint-plugin-react" ],
 };
 
 const commonjsConfig = {
@@ -28,7 +28,7 @@ const commonjsConfig = {
     node: true,
     es6: true,
   },
-  plugins: [ "eslint-plugin-n" ],
+  plugins: [ "eslint-plugin-n", "eslint-plugin-react" ],
 };
 
 module.exports = {

rules.js

@@ -276,6 +276,7 @@ module.exports = function getRules(isModuleProject) {
     "require-await": "error", // make it explicit
     "object-shorthand": [ "error", "properties" ], // make it short
     "object-curly-spacing": [ "error", "always" ], // consistency
+    "react/jsx-curly-spacing": [ "error", { when: "never", children: { when: "always" } } ],
     "array-bracket-spacing": [ "error", "always" ], // consistency with above
     "new-cap": "error", // consistency with test rules
     "switch-colon-spacing": "error",

test/data/jsx/curly-braces.jsx

@@ -0,0 +1,20 @@
+import * as Preact from "preact";
+
+export function Item() {
+  return (
+    <div>
+      <h1>Data</h1>
+      <SubItem input={{name: "Anders", role: "Developer"}} />
+      <SubItem input={ { name: "Anders", role: "Developer" } } />
+    </div>
+  );
+}
+
+function SubItem({ input }) {
+  return (
+    <div>
+      <h2>{input.name}</h2>
+      <h3>{input.role}</h3>
+    </div>
+  );
+}

test/data/jsx/noerrors.jsx

@@ -0,0 +1,19 @@
+import * as Preact from "preact";
+
+export function Item() {
+  return (
+    <div>
+      <h1>Data</h1>
+      <SubItem input={{ name: "Anders", role: "Developer" }} />
+    </div>
+  );
+}
+
+function SubItem({ input }) {
+  return (
+    <div>
+      <h2>{ input.name }</h2>
+      <h3>{ input.role }</h3>
+    </div>
+  );
+}

test/feature/lint-jsx-feature.js

@@ -26,16 +26,70 @@ Feature("linting jsx files", () => {
     });
 
     let results;
-    When("we lint a folder", async () => {
-      results = await eslint.lintFiles([ "test/data/jsx/*.jsx" ]);
+    When("we lint two valid jsx files", async () => {
+      results = await eslint.lintFiles([ "test/data/jsx/noerrors.jsx", "test/data/jsx/preact-module.jsx" ]);
     });
 
     Then("we should have linted the correct number of files", () => {
-      expect(results.length).to.eql(1);
+      expect(results.length).to.eql(2);
     });
 
-    And("one file should have no messages", () => {
+    And("the lint result should have no messages", () => {
       expect(results[0].messages.length).to.eql(0, JSON.stringify(results[0].messages, null, 2));
+      expect(results[1].messages.length).to.eql(0, JSON.stringify(results[0].messages, null, 2));
+    });
+  });
+
+  Scenario("jsx file not passing, invalid curly braces", () => {
+    let eslint;
+    Given("we have an eslint instance with the base config", () => {
+      eslint = new ESLint({
+        overrideConfigFile: "react.js",
+        overrideConfig: {
+          parserOptions: {
+            ecmaVersion: 2022,
+            sourceType: "module",
+          },
+          settings: {
+            react: {
+              pragma: "Preact",
+              version: "16.0",
+            },
+          },
+        },
+        useEslintrc: false,
+        ignore: false,
+      });
+    });
+
+    let result;
+    When("we lint a jsx file", async () => {
+      const results = await eslint.lintFiles([ "test/data/jsx/curly-braces.jsx" ]);
+      result = results[0];
+    });
+
+    Then("the lint result should have eight messages", () => {
+      expect(result.messages.length).to.eql(8, JSON.stringify(result.messages, null, 2));
+    });
+
+    And("three errors should be 'A space is required before'", () => {
+      const errors = result.messages.filter(({ message }) => message.includes("A space is required before"));
+      expect(errors.length).to.eql(3);
+    });
+
+    And("three errors should be 'A space is required after'", () => {
+      const errors = result.messages.filter(({ message }) => message.includes("A space is required after"));
+      expect(errors.length).to.eql(3);
+    });
+
+    And("one error should be 'There should be no space before'", () => {
+      const errors = result.messages.filter(({ message }) => message.includes("There should be no space before"));
+      expect(errors.length).to.eql(1);
+    });
+
+    And("one error should be 'There should be no space after'", () => {
+      const errors = result.messages.filter(({ message }) => message.includes("There should be no space after"));
+      expect(errors.length).to.eql(1);
     });
   });
 });