Added eslint-plugin-react to the CLIEngine

package.json

@@ -30,14 +30,16 @@
   "homepage": "https://github.com/Unibeautify/beautifier-eslint#readme",
   "peerDependencies": {
     "unibeautify": ">= 0.12.1",
-    "eslint": "^4.19.1 || ^5.0.0"
+    "eslint": "^4.19.1 || ^5.0.0",
+    "eslint-plugin-react": "^7.11.1"
   },
   "devDependencies": {
     "@types/eslint": "4.16.3",
     "@types/jest": "23.3.1",
     "@types/node": "10.9.4",
     "@types/read-pkg-up": "3.0.1",
-    "eslint": "5.5.0",
+    "eslint": "^5.4.0",
+    "eslint-plugin-react": "^7.11.1",
     "jest": "23.5.0",
     "rimraf": "2.6.2",
     "ts-jest": "23.1.4",

src/index.ts

@@ -23,9 +23,16 @@ export const beautifier: Beautifier = {
       name: "ESLint",
       package: "eslint",
     },
+    {
+      type: DependencyType.Node,
+      name: "ESLint-plugin-React",
+      package: "eslint-plugin-react",
+      optional: true,
+    },
   ],
   options: {
     JavaScript: options.JavaScript,
+    JSX: options.JavaScript,
   },
   resolveConfig: ({ filePath, dependencies }) => {
     if (!filePath) {
@@ -51,6 +58,9 @@ export const beautifier: Beautifier = {
   }: BeautifierBeautifyData) {
     return new Promise<string>((resolve, reject) => {
       const { CLIEngine } = dependencies.get<NodeDependency>("ESLint").package;
+      const reactPlugin = dependencies.get<NodeDependency>(
+        "ESLint-plugin-React"
+      );
       const config = (beautifierConfig && beautifierConfig.config) || {};
       const { rules, parserOptions, env }: Config = config;
       const parseOpts: ParserOptions =
@@ -67,6 +77,10 @@ export const beautifier: Beautifier = {
         rules: finalOptions,
       };
       const cli: CLIEngine = new CLIEngine(cliOptions);
+      // tslint:disable-next-line:promise-must-complete
+      if (reactPlugin.isInstalled) {
+        cli.addPlugin("eslint-plugin-react", reactPlugin.package);
+      }
       const report: LintReport = cli.executeOnText(text);
       const result: LintResult = report.results[0];
       if (result.output) {

src/options.ts

@@ -151,7 +151,7 @@ const options: BeautifierOptions = {
           default:
             return 0;
         }
-      }
+      },
     ],
     // "capitalized-comments": [
     //   [""],
@@ -169,7 +169,7 @@ const options: BeautifierOptions = {
           default:
             return 0;
         }
-      }
+      },
     ],
     "comma-style": [
       ["comma_first"],
@@ -182,7 +182,7 @@ const options: BeautifierOptions = {
           default:
             return 0;
         }
-      }
+      },
     ],
     // "computed-property-spacing": [
     //   [""],
@@ -200,7 +200,7 @@ const options: BeautifierOptions = {
           default:
             return 0;
         }
-      }
+      },
     ],
     // "func-call-spacing": [
     //   [""],
@@ -235,7 +235,7 @@ const options: BeautifierOptions = {
           default:
             return 0;
         }
-      }
+      },
     ],
     // "jsx-quotes": [
     //   [""],
@@ -257,7 +257,7 @@ const options: BeautifierOptions = {
         } else {
           return 0;
         }
-      }
+      },
     ],
     // "linebreak-style": [
     //   [""],
@@ -291,7 +291,7 @@ const options: BeautifierOptions = {
           return [2, {"ignoreChainWithDepth": 2 }];
         }
         return 0;
-      }
+      },
     ],
     // "no-lonely-if": [
     //   [""],
@@ -312,7 +312,7 @@ const options: BeautifierOptions = {
           default:
             return 0;
         }
-      }
+      },
     ],
     // "no-unneeded-ternary": [
     //   [""],
@@ -345,7 +345,7 @@ const options: BeautifierOptions = {
           default:
             return 0;
         }
-      }
+      },
     ],
     // "object-property-newline": [
     //   [""],
@@ -390,7 +390,7 @@ const options: BeautifierOptions = {
         } else {
           return [2, options.quotes];
         }
-      }
+      },
     ],
     "semi": [
       ["end_with_semicolon"],
@@ -403,7 +403,7 @@ const options: BeautifierOptions = {
           default:
             return 0;
         }
-      }
+      },
     ],
     // "semi-spacing": [
     //   [""],
@@ -436,7 +436,7 @@ const options: BeautifierOptions = {
           default:
             return 0;
         }
-      }
+      },
     ],
     "space-in-parens": [
       ["space_in_paren"],
@@ -449,7 +449,7 @@ const options: BeautifierOptions = {
           default:
             return 0;
         }
-      }
+      },
     ],
     // "space-infix-ops": [
     //   [""],
@@ -498,7 +498,7 @@ const options: BeautifierOptions = {
           return [2, options.arrow_parens];
         }
         return 0;
-      }
+      },
     ],
     // "arrow-spacing": [
     //   [""],
@@ -580,7 +580,7 @@ const options: BeautifierOptions = {
     //   (options): any => {
     //   }
     // ]
-  }
+  },
 };
 // unibeautify:enable
 export default options;

test/preferBeautifierConfig/.eslintrc.json

@@ -0,0 +1,29 @@
+{
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "globals": {
+        "createReactClass": true
+    },
+    "plugins": ["react"],
+    "extends": ["plugin:react/recommended"],
+    "rules": {
+        "react/jsx-wrap-multilines": [
+            "error", {
+                "declaration": "parens-new-line",
+                "assignment": "parens-new-line",
+                "return": "parens-new-line",
+                "arrow": "parens-new-line",
+                "condition": "parens-new-line",
+                "logical": "parens-new-line",
+                "prop": "parens-new-line"
+            }
+        ],
+        "indent": [
+            "error", 4
+        ],
+        "brace-style": ["error", "1tbs"]
+    }
+}

test/preferBeautifierConfig/indentConfig.spec.ts

@@ -15,8 +15,8 @@ test(`should successfully beautify JavaScript text with indent_size=4 with space
       options: {
         JavaScript: {
           ESLint: {
-            prefer_beautifier_config: true
-          }
+            prefer_beautifier_config: true,
+          },
         } as any,
       },
       text,
@@ -36,8 +36,8 @@ test(`should not beautify because we are not passing in file path`, () => {
       options: {
         JavaScript: {
           ESLint: {
-            prefer_beautifier_config: true
-          }
+            prefer_beautifier_config: true,
+          },
         } as any,
       },
       text,
@@ -58,8 +58,8 @@ test(`should not beautify because file path does not find a config`, () => {
       options: {
         JavaScript: {
           ESLint: {
-            prefer_beautifier_config: true
-          }
+            prefer_beautifier_config: true,
+          },
         } as any,
       },
       text,

test/preferBeautifierConfig/pluginReact.spec.ts

@@ -0,0 +1,44 @@
+import { newUnibeautify, Beautifier } from "unibeautify";
+import beautifier from "../../src";
+import * as path from "path";
+const filePath: string = path.resolve(__dirname, "test.js");
+test(`should successfully beautify JavaScript React with jsx-wrap-multilines`, () => {
+  const unibeautify = newUnibeautify();
+  unibeautify.loadBeautifier(beautifier);
+  const text = `
+var Test = createReactClass({
+  render: function () {
+    return (<div>
+      <p>Hello</p>
+    </div>);
+  }
+});
+  `;
+  const beautifierResult = `
+var Test = createReactClass({
+    render: function () {
+        return (
+            <div>
+                <p>Hello</p>
+            </div>
+        );
+    }
+});
+  `;
+  return unibeautify
+    .beautify({
+      filePath,
+      languageName: "JSX",
+      options: {
+        JSX: {
+          ESLint: {
+            prefer_beautifier_config: true,
+          },
+        } as any,
+      },
+      text,
+    })
+    .then(results => {
+      expect(results).toBe(beautifierResult);
+    });
+});