I am using class component and want to initialize state inside constructor, but eslint gives parsing error unexpected token = for state initialization and when initialize it inside constructor error goes away, what eslint rule should I use to turn this rule off?
class Component extends React.Component {
state = {
name: ''
};
}
and my eslint config is:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"airbnb/hooks",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"import/no-named-as-default": 0,
"react/prop-types": "off",
"react/jsx-props-no-spreading": "off"
}
}
Related
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
I am attempting to make use of typescript-eslint in an existing react project, and eslint is detecting an issue that I don't think is correct, and I'm curious of the proper way to get around it. As an example to demonstrate the issue, here is a simple interface with a functional member:
export interface MyInterface {
myProperty: number,
myFunction: (myParam: string) => string
}
eslint underlines myParam: string in yellow and supplies the following warning:
'myParam' is defined but never used. eslint(no-unused-vars)
Here are my eslint configuration settings:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended"
],
"globals": {
"module": true,
"__dirname": true,
"require": false,
"$": false
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"ecmaVersion": 6,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"off",
2
],
"linebreak-style": [
"off",
"windows"
],
"quotes": [
"warn",
"single"
],
"semi": [
"error",
"always"
],
"no-console": [
"off"
],
"no-debugger": [
"warn"
],
"no-extra-semi": [
"warn"
],
"no-unused-vars": [
"warn"
]
},
"settings": {
"react": {
"version": "detect"
}
}
}
I understand that I have "no-unused-vars": ["warn"] in my rules, but it seems to me no-unused-vars should not apply to a function definition. Has anyone else come across this issue?
Thank you so much in advance for any help!
I'm using webpack with React and Eslint, I have set the extends on Eslint, however, it still says 'React' is defined but never used.eslintno-unused-vars
This is my .eslintrc file:
{
"parser": "babel-eslint",
"extends": ["eslint:recommended", "plugin:react/recommended", "airbnb", "prettier"],
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2015
},
"env": {
"browser": true,
"node": true,
"jest": true,
"commonjs": true
},
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"linebreak-style": "off",
"no-undef": "off",
"no-debugger": "off",
"no-alert": "off",
"indent": ["error", 4],
"quotes": "off",
"no-console": "off"
}
}
React version is ^17.0.1
babel-eslint is ^10.1.0
eslint is ^7.14.0
eslint-plugin-react is ^7.21.5
Looks like it has to do with actual JSX in the file
Your config worked fine on a file that actually contains valid JSX:
// App.jsx
import React from 'react'; //
const App = () => {
return <div />; // JSX
}
export default App
But if no JSX is found in the file it throws the error you described:
// App.jsx
import React from 'react'; // 'React' is defined but never used
const App = () => {
return 1; // no JSX
}
export default App
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 trying to set an eslint rule for methods in class that are never used. Like in the following react component I have a method unUsedMethod which is never used, but eslint does not show an error for it.
class Sample extends Component {
unUsedMethod() {
console.log('I am never used');
}
render() {
return 'Hello!';
}
}
My eslint file looks like this
{
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"sourceType": "module",
"allowImportExportEverywhere": false,
"codeFrame": false
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [2, 4, {"SwitchCase": 1, "ObjectExpression": "first"}],
"linebreak-style": [
"error",
"unix"
],
"semi": [
"error",
"always"
],
"react/display-name": 0,
"react/prop-types": 0, // Temporary
"react/no-unescaped-entities": 0,
"no-trailing-spaces": 1
}
}
This plugin does what you are asking for. However a word of caution.
https://www.npmjs.com/package/eslint-plugin-no-unused-react-component-methods
Currently it is impossible to simply have a parser that would check for unused component properties, because component properties can be called dynamically.
For example:
class Sample extends Component {
// Plugin falsely flags this as unused.
unUsedMethod() {
console.log('I am used dynamically');
}
render() {
// No way to parse dynamic function calls reliably
this['unUsedMethod']();
return 'Hello!';
}
}
It also wouldn't work with react-onclickoutside package, as it requires a function to be attached to the component, that is called by wrapping the component in a HOC. https://www.npmjs.com/package/react-onclickoutside
Still the plugin helped me find a few unused functions, so it is worth a try in my opinion.
First install the package: npm i eslint-plugin-no-unused-react-component-methods --save-dev
Add "no-unused-react-component-methods" to your eslint configuration in the plugins section:
{
"plugins": [
"no-unused-react-component-methods"
],
}
And add into the rules section
{
"rules": {
"no-unused-react-component-methods/no-unused-react-component-methods": 2,
}
}
So your config would look like:
{
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"sourceType": "module",
"allowImportExportEverywhere": false,
"codeFrame": false
},
"sourceType": "module"
},
"plugins": [
"react",
"no-unused-react-component-methods"
],
"rules": {
"no-unused-react-component-methods/no-unused-react-component-methods": 2,
"indent": [2, 4, { "SwitchCase": 1, "ObjectExpression": "first" }],
"linebreak-style": ["error", "unix"],
"semi": ["error", "always"],
"react/display-name": 0,
"react/prop-types": 0, // Temporary
"react/no-unescaped-entities": 0,
"no-trailing-spaces": 1
}
}
Now it should highlight any seemingly unused functions! Let me know if it works or not.