Eslint configuration for unused variables in NextJs app, with typescript

Eslint configuration for unused variables in NextJs app, with typescript

You can use the below eslint config in your nextjs, typescript app.
Do not forget to include the required pkgs in package.json

{
  "root":true,
  "parser": "@typescript-eslint/parser",
  "extends": [
    "prettier",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals"
  ],

  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }], 
    "@next/next/no-img-element": "off",
    "react/display-name": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "off"


  },
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "parser": "@typescript-eslint/parser",
      "plugins": [
        "@typescript-eslint"
      ],
      "extends": [
        "plugin:@typescript-eslint/recommended"
      ],
      "rules": {
        "@typescript-eslint/no-unused-vars": "error",
        "react/prop-types": "off",
        "no-case-declarations":"off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/ban-types":"off",
        "@typescript-eslint/no-var-requires":"off",
        "@typescript-eslint/no-empty-function":"off",
        "no-prototype-builtins":"off",
        "no-useless-catch":"off",
        "no-inner-declarations":"off",
        "react-hooks/exhaustive-deps":"off",
        "react/no-unknown-property":"off",
        "no-unsafe-optional-chaining":"off",
        "@typescript-eslint/no-empty-interface":"off",
        "no-var":"off",
        "prefer-const":"off",
        "no-useless-escape":"off"

      }
    }
  ]
}

If you just want to check the unused variables in staged files, & if you already have lint-staged script in place then this will just work fine

Also this is good refrence for understanding & applying eslint config

https://glebbahmutov.com/blog/configure-prettier-in-vscode/#:~:text=Save%20without%20formatting-,Temporarily%20disable%20formatting,toggle%20in%20the%20status%20bar