.eslintrc.json

{
  "plugins": ["cypress", "mocha", "prettier", "css-modules"],
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:cypress/recommended",
    "plugin:css-modules/recommended",
    "plugin:import/errors"
  ],
  "settings": {
    "import/resolver": {
      "alias": {
        "map": [
          ["@/storybook", "./src/components/base/storybook"],
          ["@/public", "./public"],
          [
            "css/animations",
            "./src/components/base/animation/animations.module.css"
          ],
          ["css/clamp", "./src/components/base/clamp/Clamp.module.css"],
          ["@", "./src"]
        ],
        "extensions": [".js", ".jsx"]
      }
    }
  },
  "rules": {
    "prettier/prettier": 1,
    "mocha/no-exclusive-tests": "error",
    "cypress/no-unnecessary-waiting": 0,
    "no-unused-vars": [2, { "vars": "all", "args": "after-used" }],
    "import/no-unused-modules": [
      0,
      {
        "unusedExports": true,
        "missingExports": false,
        "ignoreExports": [
          "src/pages",
          "src/**/__fixtures__/*",
          "src/**/__test__/*",
          "src/**/__tests__/*",
          "src/**/*.stories.js",
          "src/**/*.test.js"
        ]
      }
    ],
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "react-bootstrap",
            "message": "usage of react-bootstrap without tree-shaking is not allowed. Use 'react-bootstrap/*', eg. 'react-bootstrap/Col'"
          },
          {
            "name": "lodash",
            "message": "usage of lodash without tree-shaking is not allowed. Use 'lodash/*', eg. 'lodash/isEmpty'"
          }
        ],
        "patterns": [
          { "group": ["!react-bootstrap/*"] },
          { "group": ["!lodash/*"] },
          {
            "group": ["classnames/bind"],
            "message": "classnames should be imported using 'import cx from 'classnames';'"
          },
          {
            "group": [
              "@/**/*.module.css",
              "!./*.module.css",
              "!@/components/base/animation/animations.module.css",
              "!@/components/base/clamp/Clamp.module.css"
            ],
            "message": "css-modules may not use @/ importer. Use relative instead or src/ or something else"
          }
        ]
      }
    ],

    "react/jsx-uses-vars": 2,
    "react/jsx-uses-react": 2,

    // TODO: Turn these on at some point
    /* next/core-web-vitals */
    "@next/next/no-img-element": "off",
    "react-hooks/exhaustive-deps": "off",

    /* plugin:css-modules/recommended */
    /** Keep this rule because of error **/
    "css-modules/no-unused-class": 2,
    //After upgrading to nextjs 14, this sarted throwing lint errors from the files components/base/animation/animations.module.css and components/base/clamp/Clamp.module.css 
    "css-modules/no-undef-class": 0
  }
}