55

I am working on a Typescript React project and I usually put placeholder variables into the code so everything is laid out until I get to implementing everything. This leads to a bunch of eslint no-unused-vars errors and makes finding real errors a challage.

How can I disable this globally until I am ready for it? I used create-react-app my-app --typescript and don't want to eject the project but not sure how to disable this warning.

I noticed there is a eslintConfig section in the package.json so I tried to turn off the error there but it doesn't seem to work, is there a command I need to run after editing the package.json or is my syntax incorrect?

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

Update


(removed tsconfig.json reference)

I updated my package.json and keep getting the errors.

"eslintConfig": {
    "extends": "react-app",
    "rules": {
      "@typescript-eslint/no-unused-vars": "off"
    }
  },

I tried moving the rules into a .eslintrc.json file in the root of the project and still doesn't seem to turn this off.

The only thing that seems to work is putting // eslint-disable-line @typescript-eslint/no-unused-vars after the variable.

3
  • there should be tslint.json if not you try creating one with rules you want in there
    – Rikin
    Commented Sep 25, 2019 at 12:42
  • @Rikin Do I need to put an entry into the package.json to reference this file or is it supposed to find it automatically? I tried making a tslint.json in my app's root with the rules section from above and it doesn't seem to work. Commented Sep 25, 2019 at 12:48
  • Its supposed to find automatic, its handled by underlying webpack. If you used create-react-app it should have already created one for you. I just did that and it did it for me
    – Rikin
    Commented Sep 25, 2019 at 12:49

8 Answers 8

53

I think there is some confusion.

Both the question and the only answer suggest putting a rules section in the tsconfig.json. This is something I've never heard of, and it is not mentioned in the docs or in the official schema.

Also, the question is about disabling the rule in eslint so the rule change should go in the .eslintrc.json file (or the eslintConfig section in the package.json as considered in the question).

But this is typescript and typescript-eslint so the rule should be:

> "@typescript-eslint/no-unused-vars" : "off"

And the hacky solution proposed in an answer that someone linked to needs to be changed to (note that answer is about eslint for js, not ts).

/* eslint-disable @typescript-eslint/no-unused-vars */

And those solutions work for me using...

+-- [email protected]  
+-- @typescript-eslint/[email protected]  
+-- @typescript-eslint/[email protected]  
4
  • Thanks for clearing things up, I tried both of your suggestions and I still get the messages, do I need to do anything to get the compiler to recognize the changes or an area that might be overriding this? Commented Oct 8, 2019 at 5:10
  • Are you running eslint from the cmdline or just using it in your IDE? When I'm having problems I try to get it working from the cmdline first.
    – Tom
    Commented Oct 8, 2019 at 12:04
  • Thanks! I just wasted a lot of time before reading your answer and realizing that I was modifying the eslint version instead of the typescript-eslint version...
    – Touloudou
    Commented Nov 18, 2019 at 17:40
  • Now that I know that there is eslint and there is typescript-eslint, it all makes sense (which is not super obvious when reading the docs and sample configs). Thanks for the hint Commented Dec 14, 2020 at 17:40
9

I had a similar problem. Here is my solution:

  1. rename .eslintrc[.json] to .eslintrc.js
  2. add module.exports = infront of previous Json object. So .eslintrc.js looks like that:
module.exports = { 
    ...
    "rules": {...},
    ... 
}
  1. set "@typescript-eslint/no-unused-vars" rule depending on your current environment. This can be achieved by checking the process.env.NODE_ENV variable. My choice was to get an error in production and be warned in other cases. The snippet looks like this:
module.exports = { 
    ...
    "rules": {
         ...
         "@typescript-eslint/no-unused-vars": process.env.NODE_ENV === "production" ? "error" : "warn"
    },
    ... 
}
2
  • This is actually the only solution that worked for me ("react-scripts": "4.0.3").
    – Max Fahl
    Commented Aug 18, 2021 at 8:27
  • A very smart solution. ty
    – inselberg
    Commented Jul 18, 2022 at 18:55
9

You can Add rule in package.json file

"eslintConfig": {
  "rules": {
   "no-unused-vars": 0,
   "@typescript-eslint/no-unused-vars": 0
  }
}
0
5

Since you used create-react-app my-app --typescript there should already be tsconfig.json created for you in your my-app/

In your tsconfig.json you can add rules for your typescript compiler.

{
  "extends": [...],
  "compilerOptions": {
    ...
  },
  "include": [...],
  "rules": {
    ...
    "no-unused-vars": "off"
    ...
  }
}
3

Inside eslintrc.json add "rules" inside that you just have to write no-unused-vars to 0.

"rules":{
     "no-unused-vars":0
}
1

I faced the issue in typescript and wanted to disable the ESLint of no-unused-vars warning.

Below is how you can disable it for the entire file or for a line

enter image description here

Typescript Solution for 1 file or 1 line:

  1. For the entire file, just place the below line at the top of your typescript file
    /* eslint-disable @typescript-eslint/no-unused-vars */
  1. For a specific line, then place this on the top of the warning
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    endpoints: (builder) => ({}), 

After adding on the top of the file or line, the warning disappears.

-1

Go into your settings and search for 'eslint', then look for something called Elint:enable, uncheck the box which states 'Controls whether eslint is enabled or not.'

It worked for me I am using

Version: 1.72.2 (system setup)
Commit: d045a5eda657f4d7b676dedbfa7aab8207f8a075
Date: 2022-10-12T22:15:18.074Z
Electron: 19.0.17
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Windows_NT x64 10.0.19045
Sandboxed: No
-3

if you are using Create-react-app, there is no need to install anything or Eject, you just need to go to /node_modules/react-scripts/config/webpack.config.dev.js. on "new ESLintPlugin" rules just add :

'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-unused-vars': 0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.