Skip to main content

Command Palette

Search for a command to run...

Eslint configuration for unused variables in NextJs app, with typescript

Updated
1 min read
Eslint configuration for unused variables in NextJs app, with typescript
S

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

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