WIP: style: added additional ESLint plugins

eslint.config.mjs

@@ -0,0 +1,74 @@
+import eslint from "@eslint/js";
+import eslintPluginNext from "@next/eslint-plugin-next";
+import eslintConfigPrettier from "eslint-config-prettier";
+import eslintPluginPrettier from "eslint-plugin-prettier";
+import eslintPluginReact from "eslint-plugin-react";
+import eslintPluginReactHooks from "eslint-plugin-react-hooks";
+import eslintPluginSimpleImportSort from "eslint-plugin-simple-import-sort";
+import eslintPluginTailwindcss from "eslint-plugin-tailwindcss";
+import eslintUnusedImportsPlugin from "eslint-plugin-unused-imports";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  {
+    ignores: ["node_modules", ".next"],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+        project: ["./tsconfig.lint.json"],
+      },
+    },
+  },
+  eslintConfigPrettier,
+  {
+    files: ["**/*.tsx", "**/*.ts"],
+    ignores: [".next"],
+    plugins: {
+      react: eslintPluginReact,
+      "react-hooks": eslintPluginReactHooks,
+      "@next/next": eslintPluginNext,
+      "unused-imports": eslintUnusedImportsPlugin,
+      "simple-import-sort": eslintPluginSimpleImportSort,
+      tailwindcss: eslintPluginTailwindcss,
+      prettier: eslintPluginPrettier,
+    },
+    rules: {
+      ...eslint.configs.recommended.rules,
+      ...eslintConfigPrettier.rules,
+      ...eslintPluginNext.configs.recommended.rules,
+      ...eslintPluginNext.configs["core-web-vitals"].rules,
+      ...eslintPluginReact.configs["jsx-runtime"].rules,
+      ...eslintPluginReactHooks.configs.recommended.rules,
+      ...eslintPluginTailwindcss.configs.recommended.rules,
+      "import/extensions": "off", // Avoid missing file extension errors, TypeScript already provides a similar feature
+      "react/function-component-definition": "off", // Disable Airbnb's specific function type
+      "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
+      "react/require-default-props": "off", // Allow non-defined react props as undefined
+      "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
+      "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
+      "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
+      "no-restricted-syntax": [
+        "error",
+        "ForInStatement",
+        "LabeledStatement",
+        "WithStatement",
+      ], // Overrides Airbnb configuration and enable no-restricted-syntax
+      "import/prefer-default-export": "off", // Named export is easier to refactor automatically
+      "simple-import-sort/imports": "error", // Import configuration for `eslint-plugin-simple-import-sort`
+      "simple-import-sort/exports": "error", // Export configuration for `eslint-plugin-simple-import-sort`
+      "import/order": "off", // Avoid conflict rule between `eslint-plugin-import` and `eslint-plugin-simple-import-sort`
+      "@typescript-eslint/no-unused-vars": "off",
+      "unused-imports/no-unused-imports": "error",
+      "unused-imports/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+    },
+    settings: {
+      react: {
+        version: "detect", // You can add this if you get a warning about the React version when you lint
+      },
+    },
+  },
+);

package.json

@@ -9,7 +9,7 @@
     "format": "prettier --write \"**/*.ts\"",
     "generate:docs": "next-swagger-doc-cli next-swagger-doc.json --output ./public/swagger.json",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint '**/*.{ts,tsx,js,jsx}'",
     "test": "jest",
     "test:ci": "jest --ci --coverage",
     "test:e2e:ci": "start-server-and-test start http://0.0.0.0:3000 cypress:ci",
@@ -22,6 +22,7 @@
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
     "@fontsource-variable/plus-jakarta-sans": "5.0.22",
+    "@next/font": "14.2.3",
     "@prisma/client": "5.19.1",
     "@sentry/nextjs": "8.28.0",
     "@stripe/react-stripe-js": "2.8.0",
@@ -67,6 +68,8 @@
     "yup": "1.4.0"
   },
   "devDependencies": {
+    "@eslint/js": "8.56.0",
+    "@next/eslint-plugin-next": "^14.2.3",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "16.0.1",
@@ -83,17 +86,33 @@
     "cypress": "13.14.2",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.8",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "eslint-plugin-tailwindcss": "^3.15.2",
+    "eslint-plugin-unused-imports": "^3.2.0",
     "husky": "9.1.5",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "local-cypress": "1.2.6",
     "next-router-mock": "0.9.13",
     "pinst": "3.0.0",
     "prettier": "3.3.3",
+    "react-icons": "5.2.1",
+    "reflect-metadata": "0.2.2",
+    "request-ip": "3.3.0",
     "start-server-and-test": "2.0.5",
+    "stripe": "15.7.0",
+    "styled-components": "^6.1.11",
+    "swagger-jsdoc": "^6.2.8",
+    "swagger-ui-react": "^5.17.10",
+    "swr": "^2.2.5",
     "tailwindcss": "3.4.10",
     "ts-node": "10.9.2",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "typescript-eslint": "^7.9.0"
   },
   "resolutions": {
     "@types/react": "18.3.5"

tsconfig.lint.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx"
+  ],
+  "exclude": [
+    ".next",
+    "node_modules",
+  ]
+}