Disable typescript-eslint plugin rule with inline comment

Question

I get an eslint warning that comes from the @typescript-eslint plugin.

'instance' is declared but its value is never read. ts(6133)

VSCode suggested the following line as a Quick Fix:

// eslint-disable-next-line @typescript-eslint/no-unused-vars

However, adding this line makes no difference, see below:

Please note: I want to use an inline rule as shown here to disable the warning for one specific line only. I do not want to disable it for a whole file, nor disable it for the whole project.

PS: This is a fresh Vite project with TypeScript and React.

Answer 1

I believe I have found a solution.

1.) tsconfig

In tsconfig.json, add the following. This will stop the compiler errors from appearing when building the project with npm run build.

You will still get the yellow underline warnings for affected code lines in VSCode (if you haven't yet done anything else to address them).

 "compilerOptions": {
    /* Linting */
    "noUnusedLocals": false,
    "noUnusedParameters": false,
  },

2.) eslintrc

In .eslintrc.cjs, add the following. This will ensure that unused variables get marked as warnings. Alternative options would be to mark them as errors or to ignore them completely. Note that I am disabling the JS version, but enabling the TS version.

Again, you will still get the yellow underline warnings for affected code lines in VSCode (if you haven't yet done anything else to address them).

rules: {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "warn",
  }

3.) eslint-disable

In the file where you want to disable a warning, add an inline rule. Note that, if you want to be specific, you have to add the TS version of the rule, e.g.

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [instance, setInstance] = useState<SwiperClass | null>(null);

Alternatively, you can simply use // eslint-disable-next-line without specifying the rule.

Answer 2

What I would suggest is to add to your eslintrc file a following rule

rules: {
    ...,
    '@typescript-eslint/no-unused-vars': [
      'error',
      { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
    ],
}

With this you can get the rid of the error this way :

const [_instance, setInstance] = useState(null)

Answer 3

You can avoid the error by destructuring the second element from the array without assigning the first element to a variable:

const [, setInstance] = useState<SwiperClass | null>(null);

---

I'm not sure exactly why you cannot suppress the error, but it's possible that you need to disable more than one rule. Possibly the built-in no-unused-vars rule applies here?

// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars

Here's an answer about the syntax for disabling multiple rules.