CODEWITHSUNDEEP
reactjstypescripteslint
Andy Braham
Andy Braham

Reputation: 10161

Typescript eslint disable no-unused-vars

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.

Upvotes: 60

Views: 117148

Answers (8)

DiaMaBo
DiaMaBo

Reputation: 2287

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.

Upvotes: 1

Palak Tiwari
Palak Tiwari

Reputation: 51

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

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

Upvotes: 5

Ritesh Niwane
Ritesh Niwane

Reputation: 131

You can Add rule in package.json file

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

Upvotes: 11

Johnny
Johnny

Reputation: 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

Upvotes: -1

Tom
Tom

Reputation: 17854

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]

Upvotes: 54

tokochi
tokochi

Reputation: 306

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

Upvotes: -3

Makatumba
Makatumba

Reputation: 141

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"
    },
    ... 
}

Upvotes: 9

Rikin
Rikin

Reputation: 5473

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

Upvotes: 5

Related Questions