Fix: Add a new ESLint plugin for the latest version in React boilerplate (#2)

Author: ashishkk22

package-lock.json

@@ -3,8 +3,14 @@ import fs from "fs";
 import cmdRunner from "@/utils/cmdRunner";
 import { NodePackageManager, SupportedProjectType } from "@/types";
 import getCurrentProject from "@/operation/getProjectType";
-import { deleteFile, isFileExists, writeFile } from "@/utils/file";
-import { eslintNextConfig, eslintReactConfig } from "./eslintConfig.js";
+import {
+  deleteFile,
+  isFileExists,
+  writeFile,
+  writeFileFromConfig,
+} from "@/utils/file";
+import { eslintNextConfig } from "./eslintConfig.js";
+import EslintReactPlugin from "@/plugins/react/eslint/config.js";
 
 async function addEslintInProject(currentPackageManager: NodePackageManager) {
   const projectType = getCurrentProject();
@@ -61,22 +67,7 @@ async function addEslintInReact(currentPackageManager: NodePackageManager) {
   );
 
   //adding eslint config to the project
-  const [config, dependencies] = eslintReactConfig(
-    isFileExists(process.cwd(), "tsconfig"),
-    isFileExists(process.cwd(), "prettier"),
-    isFileExists(process.cwd(), ".storybook"),
-    isFileExists(process.cwd(), "vite"),
-  );
-
-  //adding config file
-  await writeFile(".eslintrc.json", config);
-
-  // installing necessary dependencies
-  await cmdRunner(currentPackageManager, [
-    `${currentPackageManager === NodePackageManager.NPM ? "install" : "add"}`,
-    "-D",
-    ...dependencies.split(" "),
-  ]);
+  await writeFileFromConfig(EslintReactPlugin);
 }
 
 export default addEslintInProject;

src/operation/tooling/eslint/eslint.ts

@@ -21,51 +21,13 @@ export function eslintNextConfig(
   return [JSON.stringify(config, null, 2), dependencies] as const;
 }
 
-export function eslintReactConfig(
-  hasTypescript: boolean,
-  hasPrettier: boolean,
-  hasStorybook: boolean,
-  hasVite: boolean,
-) {
-  //base config for react js
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const baseConfig: Record<string, any> = {
-    root: true,
-    env: { browser: true, es2020: true },
-    ignorePatterns: ["dist", "src/__generated__"],
-    extends: [
-      "plugin:react/recommended",
-      "plugin:react-hooks/recommended",
-      "eslint:recommended",
-    ],
-    rules: {
-      "react/react-in-jsx-scope": "off",
-    },
-  };
-
-  const initialDependencies =
-    "eslint eslint-plugin-react eslint-plugin-react-hooks";
-
-  const [config, dependencies] = eslintConfigModifier(
-    baseConfig,
-    initialDependencies,
-    hasTypescript,
-    hasPrettier,
-    hasStorybook,
-    hasVite,
-    !hasTypescript,
-  );
-  return [JSON.stringify(config, null, 2), dependencies] as const;
-}
-
 function eslintConfigModifier(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   baseConfig: Record<string, any>,
   dependencies: string,
   hasTypescript: boolean,
   hasPrettier: boolean,
   hasStorybook: boolean,
-  hasVite?: boolean,
   hasJavascript?: boolean,
 ) {
   if (hasTypescript) {
@@ -95,8 +57,5 @@ function eslintConfigModifier(
     baseConfig.extends.push("plugin:storybook/recommended");
   }
 
-  if (hasVite) {
-    baseConfig.plugins = ["react-refresh"];
-  }
   return [baseConfig, dependencies] as const;
 }

src/operation/tooling/eslint/eslintConfig.ts

@@ -0,0 +1,35 @@
+import { FileType, PluginConfigType } from "@/types";
+
+const EslintConfig = (
+  isTsProject: boolean,
+) => `import { defineConfig } from "eslint/config";
+import globals from "globals";
+import js from "@eslint/js";
+${isTsProject ? `import tseslint from "typescript-eslint";` : ""}
+import pluginReact from "eslint-plugin-react";
+
+
+export default defineConfig([
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"], languageOptions: { globals: globals.browser } },
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] },
+  ${isTsProject ? `tseslint.configs.recommended,` : ``}
+  pluginReact.configs.flat.recommended,
+]);`;
+
+const EslintReactPlugin: PluginConfigType = {
+  initializingMessage: "Adding Eslint, Please wait !",
+  devDependencies: (isTsProject: boolean) =>
+    `eslint eslint-plugin-react ${isTsProject ? "typescript-eslint" : ""}`,
+  files: [
+    {
+      content: EslintConfig,
+      fileName: "eslint.config.js",
+      fileType: FileType.SIMPLE,
+      path: [],
+    },
+  ],
+  successMessage: "Successfully added Eslint!",
+};
+
+export default EslintReactPlugin;

src/plugins/react/eslint/config.ts

@@ -0,0 +1 @@
+export { default } from "./config";