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