How to disable warnings for identifiers prefixed with underscore (_)

Contents hide

Background and introduction

As a developer in React.js I highly appreciate the automated help I
can get from ESLint on code issues such as
unused identifiers.

I have a very small example project in a zip file
that I use for experimenting with ESLint.

Even without explicit ESLint rules, Visual Studio Code indicates what
identifiers are unused by showing them in a less vibrant color.
In the screenshot below, unUsedArgument and unUsedVariable would
have been displayed in about the same color as prevToggle, if they
had been used.

App.js in text :

// App.js
import React, { useCallback, useState } from 'react';
import './App.css';
import Button from './components/UI/Button/Button';

function App(unUsedArgument) {
  const [unUsedVariable, setShowParagraph] = useState(true);
  const showParagraphFcn = useCallback(() => {
    setShowParagraph((prevToggle) => !prevToggle);
  },[]);
  console.log('App RUNNING');
  return (
    <div className='app'>
      <h1>Hi there!</h1>
      <Button onClick={showParagraphFcn}>A Button</Button>
    </div>
  );
}
export default App;

After downloading the mentioned zip file, and then running
npm install followed by npm start, a web page opens in my default
web browser.
When I hit F12 it looks as below.
¹

The screenshot shows that – without ESLint – no errors or warnings are
displayed in the console of the browser.
This is despite the fact that both unUsedArgument and
unUsedVariable are indeed unused.

My package.json is as below – to start with.

package.json :

{
  "name": "Disable warnings when prefixed with underscore (_)",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version"
    ]
  }
}

In addition, I have an eslintConfig.json file whose contents were
originally in package.json, but which I deliberately removed from
there to see how the behavior is affected.

eslintConfig.json :

,
  "eslintConfig": {
    "extends": "react-app"
  }

When I run npm install, the ESLint packages are downloaded – 18
subdirectories of node_modules containing the word eslint.
(This happens because the package react-scripts depends indirectly
on these 18 ESLint packages.)

Here is how to run the ESLint command from the command line.

npx eslint . --ext .js

The first three lines of the response somewhat confusingly read:

Oops! Something went wrong! :(
ESLint: 7.32.0
ESLint couldn't find the plugin "eslint-plugin-react".

The three messages seem to suggest that ESLint was installed, but
not configured for React.js.

My next action is therefore to add the eslintConfig attribute
(back) into package.json (right after browserslist).
²
After doing so, the result of running the ESLint command

npx eslint . --ext .js

is now

The warning reads :

'unUsedVariable' is assigned a value but never used no-unused-vars

Thus, without any further configurations, ESLint warns about the
unused variable but not about the unused argument (parameter).
I would prefer to be warned about both identifiers that are unused.
In addition, I would like to have the option to disable ESLint
warnings for unused arguments and variables that start with an
underscore (_).
Having such a rule would mean that I could easily turn off these
warnings – permanently or temporarily – by simply prefixing the
identifier with _ (an underscore).

In Visual Studio Code I can achieve this by adding a specially
designed ESLint comment.
³

/*eslint no-unused-vars: ["warn",{"argsIgnorePattern": "^_","varsIgnorePattern": "^_"}]*/

The question I want to ask

This is all looking good.
But what I don’t like, is to clutter my JavaScript code with ESLint
comments in each and every file.
I would prefer to set the ESLint rules for the whole project so that
all JavaScript files adhere to these rules.

How can I get this exact behavior without scattering ugly ESLint
comments all over my JavaScript code?

References

^{1

For me, the `npm install` command has taken any time from 4 to 11

minutes to complete.

The `npm install` command downloads and installs all Node.js packages

listed in the `package.json` file.

The `npm start` command starts a local web server and opens the

`public/index.html` file in your default web browser, in my case

Google Chrome Version 98.0.4758.102, 64-bit, running on Windows 10.

When you want to close the server, do so it by hitting

Ctrl+C.}

2
It turns out you don’t need to run npm install this time.

3
This would likely work for many other text editors and
IDE:s as well, such as for example WebStorm by JetBrains.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

How can I get this exact behavior without scattering ugly ESLint
comments all over my JavaScript code?

Just add rules under the eslintConfig attribute, to make
package.json look as follows.
¹

package.json :

{
  "name": "Disable warnings when prefixed with underscore (_)",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version"
    ]
  },
  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "no-unused-vars": [
        "warn",
        {
          "argsIgnorePattern": "^_",
          "varsIgnorePattern": "^_"
        }
      ]
    }
  }
}

Now you can remove the ESLint comment from App.js and still get the
desired behavior.

Check to see that you were successful:

npx eslint . --ext .js

Expect to see:

If your text editor (VS Code in my case) is still open, make sure that
you restart it before you expect to see this new behavior.
Play around in your text editor by adding and removing an underscore
prefix to see the warning go away and appear again.

Note!
I advise against putting the ESLint rules in a separate
.eslintrc.* configuration file.
²

References

^{1 In this case you don’t need to run `npm install`.

Just adding the `rules` attribute under `eslintConfig` should be

enough.}

2
If you want to know why, compare this long answer with this short answer.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating