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. 1
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, had they
been used.
App.js written out :
// 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, running npm install
and then npm start, a web page opens in my default web browser.
Pressing F12 makes it look as below.
2
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.
package.json – from start :
{
"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 would be affected.
eslintConfig.json :
,
"eslintConfig": {
"extends": "react-app"
}
When running 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 the 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 indicate that ESLint was installed, but not configured :
Oops! Something went wrong! :(
ESLint: 7.32.0
ESLint couldn't find the plugin "eslint-plugin-react".
My next action is therefore to add the eslintConfig attribute
(back) into package.json.
3
After doing so, the result of running npx eslint . --ext .js is :
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. 4
/*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 all files.
I would prefer to set the ESLint rules for the whole project so that
all JavaScript files automatically adhere to these rules.
How can I get this exact behavior without scattering ugly ESLint comments all over my JavaScript code?
References
- ESLint
- Zip file containing the needed project files
- Create React App (CRA)
- The package
react-scriptsdepends indirectly on ESLint packages - To install ESLint globally rather than locally
(
npm install eslint --global) is not recommended - VS Code ESLint extension
- In VS Code, add
"eslint.nodePath": "C:\\Program Files\\nodejs",tosettings.json
1
The project was originally created as a Create React App (CRA).
I have since deliberately removed the
eslintConfig attribute in package.json for experimental purposes.
2
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.
3
No need to run npm install this time, as no packages are affected.
4 This is likely true for many other text editors and IDE:s as well, such as for example WebStorm by JetBrains.
