43

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.

Community
  • 1
  • 1
Andy Braham
  • 9,594
  • 4
  • 48
  • 56
  • there should be tslint.json if not you try creating one with rules you want in there – Rikin Sep 25 '19 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. – Andy Braham Sep 25 '19 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 Sep 25 '19 at 12:49

7 Answers7

36

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...

+-- eslint@6.5.1  
+-- @typescript-eslint/eslint-plugin@2.3.2  
+-- @typescript-eslint/parser@2.3.2
Xavier
  • 831
  • 3
  • 9
  • 22
Tom
  • 17,103
  • 8
  • 67
  • 75
  • 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? – Andy Braham Oct 08 '19 at 05: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 Oct 08 '19 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 Nov 18 '19 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 – Oleksandr Yefremov Dec 14 '20 at 17:40
7

You can Add rule in package.json file

"eslintConfig": {
  "rules": {
   "no-unused-vars": 0,
   "@typescript-eslint/no-unused-vars": 0
  }
}
OneCricketeer
  • 179,855
  • 19
  • 132
  • 245
Ritesh Niwane
  • 91
  • 1
  • 2
6

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"
    },
    ... 
}
Makatumba
  • 111
  • 2
  • 3
4

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"
    ...
  }
}
Rikin
  • 5,351
  • 2
  • 15
  • 22
2

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

"rules":{
     "no-unused-vars":0
}
OneCricketeer
  • 179,855
  • 19
  • 132
  • 245
Palak Tiwari
  • 21
  • 1
0

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
OneCricketeer
  • 179,855
  • 19
  • 132
  • 245
Johnny
  • 1
-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
tokochi
  • 308
  • 3
  • 7