Eslint configuration for unused variables in NextJs app, with typescript

Frontend developer at Reliance JIO
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


