Does anyone know how to resolve this linting issue? It's claiming that I'm not using the TasksComponent. Thanks!
'TasksComponent' is assigned a value but never used. (no-unused-vars)
describe('root tests', () => {
it('renders without crashing', () => {
const TasksComponent = TasksWithData(Tasks);
const root = document.createElement('root');
ReactDOM.render(<TasksComponent {...taskconfig} />, root);
ReactDOM.unmountComponentAtNode(root);
});
});
This is my .eslintrc file:
module.exports = {
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
4
],
"quotes": [
"warn",
"single"
],
"semi": [
"error",
"always"
]
}
};
Do you have the rules
jsx-uses-vars
and
jsx-uses-react
Added to your eslint config?
I think those should fix your problem.
Related
Eslint is giving me the Expected to return a value at the end of arrow function error. How do I fix this?
useEffect(() => {
if (show && inView) {
const timer = () => {
setCount(count + 1);
};
if (count >= number) {
const plus = setPlus('+');
return plus;
}
const interval = setInterval(timer, 800 / number);
return () => clearInterval(interval);
}
setCount(1);
setPlus('');
setShow(false);
}, [count, inView, number, plus, show]);
do you use some react extensions for eslint in your project ?
Here's a standard eslint config for react projects:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'react',
'prefer-arrow',
],
}
Try it in your .eslintrc and tell me if you still got this error
EDIT:
Can you join your eslint config file ?
You shouldn't get this error. Maybe I can explain you some stuff about it.
Or your can just disable this rule for your project by editing your .eslintrc file and adding:
rules: {
'consistent-return': 'off',
}
This is my .eslintrc
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"react-app",
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"react/jsx-uses-react": ["off"],
"react/react-in-jsx-scope": ["off"],
"react/jsx-props-no-spreading": ["warn"],
"no-shadow": "off"
}
}
we have React project with Typescript.
We use TSDoc to standardize the doc comments used in TypeScript code
Our eslint.trc file as follow:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"google",
"plugin:#typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint/eslint-plugin",
"eslint-plugin-tsdoc"
],
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"tsdoc/syntax": "warn",
"valid-jsdoc" : 0,
"#typescript-eslint/explicit-module-boundary-types": "off"
}
}
How to configure this configuration file, for not asking ESLINT about documenting standard react methods, like constructor(),static getDerivedStateFromProps(),render(),componentDidMount() and etc.
We can switch "require-jsdoc":"off", but it also will not ask out user defined methods in class.
I've resolved this problem with this plugin
https://www.npmjs.com/package/eslint-plugin-require-jsdoc-except?activeTab=readme
You can add your function names at ignore:
"ignore":[
"constructor", "render","componentDidUpdate","getDerivedStateFromProps","componentDidMount"
]
Add this to your .eslintrc.js rules:
rules: {
'require-jsdoc': [
'error',
{
require: {
FunctionDeclaration: false,
MethodDefinition: false,
ClassDeclaration: false,
ArrowFunctionExpression: false,
FunctionExpression: false,
},
},
],
},
Read more:
https://eslint.org/docs/latest/rules/require-jsdoc
Trying to call a redux action creator inside a useEffect hook the following warning-
React Hook useEffect has a missing dependency: 'getPlanQuotes'. Either include it or remove the dependency array react-hooks/exhaustive-deps
This is the useEffect hook-
const { getPlanQuotes } = props;
useEffect(() => {
getPlanQuotes();
}, []);
So I tried disabling it using // eslint-disable-next-line react-hooks/exhaustive-deps. Like this-
useEffect(() => {
getPlanQuotes();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
But it still throws the warning on the console without the react-hooks/exhaustive-deps being specified
And also the editor throws the following error-
.eslintrc config-
{
"parser": "babel-eslint",
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
"env": {
"jest": true,
"browser": true,
"node": true,
"es6": true
},
"plugins": ["json", "prettier"],
"rules": {
"prettier/prettier": ["error"],
"no-console": "off"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"rules": {
"no-underscore-dangle": [
"error",
{
"allow": ["_id", "b_codes_id"]
}
],
"react/prop-types": [1]
},
"settings": {
"import/resolver": "meteor"
},
"globals": {
"_": true,
"CSSModule": true,
"Streamy": true,
"ReactClass": true,
"SyntheticKeyboardEvent": true
}
}
}
It was a problem with the .eslintrc configuration as #DrewReese suspected. The plugins array was missing react-hooks and the rules object was missing react-hooks rules.
So, the final configuration is as follows-
{
"parser": "babel-eslint",
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
"env": {
"jest": true,
"browser": true,
"node": true,
"es6": true
},
"plugins": ["json", "prettier", "react-hooks"], //added "react-hooks" here
"rules": {
"prettier/prettier": ["error"],
"no-console": "off"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"rules": {
"no-underscore-dangle": [
"error",
{
"allow": ["_id", "b_codes_id"]
}
],
"react/prop-types": [1],
"react-hooks/rules-of-hooks": "error", // added "react-hooks/rules-of-hooks"
"react-hooks/exhaustive-deps": "warn" // added "react-hooks/exhaustive-deps"
},
"settings": {
"import/resolver": "meteor"
},
"globals": {
"_": true,
"CSSModule": true,
"Streamy": true,
"ReactClass": true,
"SyntheticKeyboardEvent": true
}
}
}
I am using JEST and Enzyme. In my eslint file I have added jest as true under env. But I get a lint error for shallow as I have included it globally. Error is- error 'shallow' is not defined no-undef
setupTests.js
//as we are accessing our application with a http://localhost prefix, we need to update our jest configuration
import { shallow, render, mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// React 16 Enzyme adapter
configure({ adapter: new Adapter() });
// Make Enzyme functions available in all test files without importing
global.shallow = shallow;
global.render = render;
global.mount = mount;
.eslintrc
{
parser: "babel-eslint",
"extends": ["airbnb"],
"env": {
"browser": true,
"jest": true
},
"rules": {
"max-len": [1, 200, 2, {ignoreComments: true}],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"no-underscore-dangle": [0, { "allow": [] }],
"jsx-a11y/label-has-associated-control": [
"error", {
"required": {
"every": [ "id" ]
}
}
],
"jsx-a11y/label-has-for": [
"error", {
"required": {
"every": [ "id" ]
}
}
]
}
}
app.test.js
import React from 'react';
import { LoginFormComponent } from '../../components';
describe('LoginForm', () => {
const loginform = shallow(<LoginFormComponent />);
it('renders correctly', () => {
expect(loginform).toMatchSnapshot();
});
});
package.json
"scripts": {
"dev": "webpack-dev-server --historyApiFallback true --port 8888 --content-base build/",
"test": "jest",
"lint": "eslint ./src",
"lintfix": "eslint ./src --fix"
},
"jest": {
"verbose": true,
"testURL": "http://localhost/",
"transform": {
"^.+\\.js$": "babel-jest"
},
"setupFiles": [
"./setupTests.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
The error comes in my app.test.js where I am trying to use shallow. Do I have to add something in my eslint config for enzyme the way I have made jest as true?
How about add global statement? eslint no-undef docs
/*global someFunction b:true*/
/*eslint no-undef: "error"*/
var a = someFunction();
b = 10;
or set global on .eslintrc (eslint global)
{
"globals": {
"shallow": true,
"render": true,
"mount": true
}
}
Updated .eslintrc
{
parser: "babel-eslint",
"extends": ["airbnb"],
"env": {
"browser": true,
"jest": true
},
"globals": {
"shallow": true
},
"rules": {
"max-len": [1, 200, 2, {ignoreComments: true}],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"no-underscore-dangle": [0, { "allow": [] }],
"jsx-a11y/label-has-associated-control": [
"error", {
"required": {
"every": [ "id" ]
}
}
],
"jsx-a11y/label-has-for": [
"error", {
"required": {
"every": [ "id" ]
}
}
]
}
}
Since globals are only used in test files the best practise is not to set them globally but only for the test files. That can be done by using overrides property with proper files glob:
overrides: [
{
files: "*.test.js",
globals: {
shallow: true,
render: true,
mount: true,
},
},
],
Full .eslintrc after addition in the snippet.
{
"parser": "babel-eslint",
"extends": ["airbnb"],
"env": {
"browser": true,
"jest": true
},
"rules": {
"max-len": [1, 200, 2, { "ignoreComments": true }],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"no-underscore-dangle": [0, { "allow": [] }],
"jsx-a11y/label-has-associated-control": [
"error",
{
"required": {
"every": ["id"]
}
}
],
"jsx-a11y/label-has-for": [
"error",
{
"required": {
"every": ["id"]
}
}
]
},
"overrides": [
{
"files": "*.test.js",
"globals": {
"shallow": true,
"render": true,
"mount": true
}
}
]
}
i have configuration like this.
`module.exports = {
"globals": {
"angular": 1
},
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
extends: ['plugin:angular/johnpapa', 'eslint:recommended'],
"parserOptions": {
"sourceType": "module"
},
"plugins": [
"angular"
],
"rules": {
"no-console": 0,
"angular/ng_controller_name": 0,
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
};
`
and i get this warning in terminal
Filename must be "callsController.js" angular/file-name
The angular plugin is running a file name rule, I'm guessing by default since I don't see it in your rule list. You should be able to override this with "angular/file-name":0 in your eslintrc.
In your .eslintrc add "angular/file-name": 0 in the rules section, like so:
{
"extends": "eslint:recommended",
"plugins": ["angular"],
"env": {
...
},
"globals": {
"angular": true,
"module": true,
"inject": true
},
"rules": {
"angular/file-name": 0
}
}