Extra rules for ESLint
$ npm install eslint-plugin-extra --save-dev
Add "extra" to the plugins section.
{
"plugins": [
"extra"
]
}
Enable the rules that you would like to use.
"rules": {
"extra/no-nested-destructuring": ["error"],
"extra/react-prefer-functional-component": ["error"]
}
Forbids using nested destructuring
Nested destructuring may make code hard to read, so it makes sense to disallow it.
Examples of incorrect code for this rule:
const { a: { b } } = obj;
const { a: [ b ] } = obj;
const [[ b ]] = obj;
function foo({ a: { b } }) {
}
Examples of correct code for this rule:
const { a } = obj;
const { b } = a;
const { b } = obj.a;
This rule has an object option:
{
"extra/no-nested-destructuring": ["error", { "allowForArrays": true }]
}
allowForArrays
(default: false
) – Allows nested destructuring for arrays.
Enforce using functional React components
Since hooks are shipped in React, there is not much reason to use class components. See "Motivation for using React Hooks" and "Do Hooks cover all use cases for classes?"
Examples of incorrect code for this rule:
class App extends React.Component {
constructor(props) {
super(props);
this.state = 42;
}
render() {
return (
<div>{this.state}</div>
)
}
}
var Hello = createReactClass({
render: function() { return <div />; };
});
Examples of correct code for this rule:
const App = () => {
const [value] = React.useState(42);
return (
<div>{value}</div>
);
};
class MyComponent extends React.Component {
getSnapshotBeforeUpdate() { ... }
render() {
return (
<div />
);
}
}
class MyComponent extends React.Component {
static getDerivedStateFromError() { ... }
render() {
return (
<div />
);
}
}
class MyComponent extends React.Component {
componentDidCatch() { ... }
render() {
return (
<div />
);
}
}
This rule has an object option:
{
"extra/react-prefer-functional-component": ["error", {
"allowWithComponentDidCatch": true,
"allowWithGetDerivedStateFromError": true,
"allowWithGetSnapshotBeforeUpdate": true
}]
}
allowWithComponentDidCatch
(default: true
) – Allows using class components with componentDidCatch
method.
allowWithGetDerivedStateFromError
(default: true
) – Allows using class components with getDerivedStateFromError
static method.
allowWithGetSnapshotBeforeUpdate
(default: true
) – Allows using class components with getSnapshotBeforeUpdate
method.