Compilation Error: is defined but never used no-unused-vars

Question

I just updated my react project dependencies to the latest versions. I updated the "typescript" to "^4.2.2". After that I got this error:

src/serviceWorker.ts
    Line 24:16:  'registration' is defined but never used  no-unused-vars

Above line is part of the default code by create-react-app "serviceWorker.ts"

onSuccess?: (registration: ServiceWorkerRegistration) => void;

I tried searching for answers and tried putting this in package.json but I still get the error:

"eslintConfig": {
    "extends": "react-app",
    "rules": {
      "no-unused-vars": "off"
    }
  },

Answer 1

I ended up placing the comment above the problematic line, but I don't know if this is the correct way to do this since this code was working and default code from create-react-app

// eslint-disable-next-line no-unused-vars
onSuccess?: (registration: ServiceWorkerRegistration) => void;

Answer 2

It's fine to put an inline comment that disables no-unused-vars . However you will likely see this error again when importing types.

Here is an example config that worked for me.

Add to tsconfig.json :

"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,

Add to package.json and install (the first two must have the same version):

"@typescript-eslint/eslint-plugin": "^4.16",
"@typescript-eslint/parser": "^4.16",
"eslint-plugin-import": "^2.22.1",

Your .eslintrc.json might look something like this:

{
    "root": true,
    "extends": [
      "plugin:@typescript-eslint/recommended"
  
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": "./tsconfig.json"
    },
    "plugins": ["@typescript-eslint"],
    "rules": {
      "@typescript-eslint/no-unused-vars": [
        "error",
        {
          "argsIgnorePattern": "^_",
          "varsIgnorePattern": "^_"
        }
      ]
    },
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    }
}