.eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true
  },
  "root": true,
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:storybook/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint",
    "unused-imports",
    "import",
    "simple-import-sort",
    "tailwindcss"
  ],
  "rules": {
    "no-underscore-dangle": ["error", { "allow": ["_id"] }],
    "tailwindcss/classnames-order": "off",
    "tailwindcss/enforces-negative-arbitrary-values": "warn",
    "tailwindcss/enforces-shorthand": "warn",
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ],
    "tailwindcss/migration-from-tailwind-2": "warn",
    "tailwindcss/no-arbitrary-value": "off",
    "tailwindcss/no-custom-classname": "off",
    "tailwindcss/no-contradicting-classname": "error",
    "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
    "react/jsx-no-constructed-context-values": "off",
    "react/no-array-index-key": "warn",
    "react-hooks/rules-of-hooks": "off",
    "react-hooks/exhaustive-deps": "off",
    "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
    "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
    "@typescript-eslint/no-unused-vars": "off",
    "no-console": "off",
    "no-param-reassign": "off",
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ],
    "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
    "unused-imports/no-unused-imports": "warn",
    "unused-imports/no-unused-vars": ["warn"],
    "import/order": "off",
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // Node.js builtins and modules
          ["^\\w"],
          // External packages
          ["^@?\\w"],
          // Internal packages
          ["^@/(utils|config|etc)"],
          // Components and UI components
          ["^@/components/ui/", "^@/components/"],
          // Library imports
          ["^@/lib/"],
          // App imports
          ["^@/app"],
          // Feature imports
          ["^@/features"],
          // API client imports
          ["^@/services"],
          // Parent imports
          ["^\\.(?!/?$)", "^\\./?$", "^\\.\\./?$"],
          // Other relative imports
          ["^\\./(?=.*/)(?!/?$)", "^\\./?$"]
        ]
      }
    ],
    "simple-import-sort/exports": "error"
  },
  "settings": {
    "tailwindcss": {
      "callees": ["classnames", "clx", "cn", "cva"],
      "config": "tailwind.config.ts"
    }
  },
  "overrides": [
    {
      "files": ["*.ts"],
      "parser": "@typescript-eslint/parser"
    }
  ]
}