Eslint configuration for unused variables in NextJs app, with typescript
Sood Ruchika
1 min read
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
1
Subscribe to my newsletter
Read articles from Sood Ruchika directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Sood Ruchika
Sood Ruchika
Frontend developer at Reliance JIO