@zinserjan/eslint-config-react
v0.1.0
Published
A set of opinionated ESLint rules tailored for React Components
Downloads
3
Readme
eslint-config-react
A mostly reasonable approach to React and JSX based on the great Airbnb React/JSX Style Guide
Installation
npm install --save-dev @zinserjan/eslint-config-react
.eslintrc
{
"extends": [
"@zinserjan/eslint-config-react"
]
}
Table of Contents
- Basic Rules
- Class vs
React.createClass
vs stateless - Naming
- Declaration
- Alignment
- Quotes
- Spacing
- Props
- Refs
- Parentheses
- Tags
- Methods
- Control structures
- Ordering
isMounted
Basic Rules
- Only include one React component per file.
- However, multiple Stateless, or Pure, Components are allowed per file. eslint:
react/no-multi-comp
.
- However, multiple Stateless, or Pure, Components are allowed per file. eslint:
- Avoid usage of
React.createClass
- Always use JSX syntax.
- Always add type definition for properties
- Do not use
React.createElement
unless you're initializing the app from a file that is not JSX.
Class vs React.createClass
vs stateless
If you have internal state and/or refs, prefer
class extends React.Component
overReact.createClass
. eslint:react/prefer-es6-class
react/prefer-stateless-function
// bad const Listing = React.createClass({ // ... render() { return <div>{this.state.hello}</div>; } }); // good class Listing extends React.Component { // ... render() { return <div>{this.state.hello}</div>; } }
And if you don't have state or refs, prefer normal functions (not arrow functions) over classes:
// bad class Listing extends React.Component { render() { return <div>{this.props.hello}</div>; } } // bad (relying on function name inference is discouraged) const Listing = ({ hello }) => ( <div>{hello}</div> ); // good function Listing({ hello }) { return <div>{hello}</div>; }
Naming
Filename: Use PascalCase for filenames. E.g.,
ReservationCard.js
.Reference Naming: Use PascalCase for React components and camelCase for their instances. eslint:
react/jsx-pascal-case
// bad import reservationCard from "./ReservationCard"; // good import ReservationCard from "./ReservationCard"; // bad const ReservationItem = <ReservationCard />; // good const reservationItem = <ReservationCard />;
Component Naming: Use the filename as the component name. For example,
ReservationCard.js
should have a reference name ofReservationCard
.// bad - Component defined in index.js import Footer from "./Footer"; import Footer from "./Footer/index"; // good import Footer from "./footer/Footer"; // good - without folder import Footer from "./Footer";
Higher-order Component Naming: Use a composite of the higher-order component's name and the passed-in component's name as the
displayName
on the generated component. For example, the higher-order componentwithFoo()
, when passed a componentBar
should produce a component with adisplayName
ofwithFoo(Bar)
.
Why? A component's
displayName
may be used by developer tools or in error messages, and having a value that clearly expresses this relationship helps people understand what is happening.
```jsx
// bad
export default function withFoo(WrappedComponent) {
return function WithFoo(props) {
return <WrappedComponent {...props} foo />;
}
}
// good
export default function withFoo(WrappedComponent) {
function WithFoo(props) {
return <WrappedComponent {...props} foo />;
}
const wrappedComponentName = WrappedComponent.displayName
|| WrappedComponent.name
|| "Component";
WithFoo.displayName = `withFoo(${wrappedComponentName})`;
return WithFoo;
}
```
- Props Naming: Avoid using DOM component prop names for different purposes.
Why? People expect props like
style
andclassName
to mean one specific thing. Varying this API for a subset of your app makes the code less readable and less maintainable, and may cause bugs.
```jsx
// bad
<MyComponent style="fancy" />
// good
<MyComponent variant="fancy" />
```
Declaration
Do not use
displayName
for naming components. Instead, name the component by reference.// bad export default React.createClass({ displayName: "ReservationCard", // stuff goes here }); // bad function ReservationCard() { } ReservationCard.displayName = "ReservationCard"; // good export default class ReservationCard extends React.Component { } // good function ReservationCard() { }
Alignment
Follow these alignment styles for JSX syntax. eslint:
react/jsx-closing-bracket-location
// bad <Foo superLongParam="bar" anotherSuperLongParam="baz" /> // good <Foo superLongParam="bar" anotherSuperLongParam="baz" /> // if props fit in one line then keep it on the same line <Foo bar="bar" /> // children get indented normally <Foo superLongParam="bar" anotherSuperLongParam="baz" > <Quux /> </Foo>
Quotes
- Always use double quotes (
"
) for JSX attributes. eslint:jsx-quotes
Why? Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.
```jsx
// bad
<Foo bar='bar' />
// good
<Foo bar="bar" />
// bad
<Foo style={{ left: '20px' }} />
// good
<Foo style={{ left: "20px" }} />
```
Spacing
Always include a single space in your self-closing tag. eslint:
no-multi-spaces
,react/jsx-space-before-closing
// bad <Foo/> // very bad <Foo /> // bad <Foo /> // good <Foo />
Do not pad JSX curly braces with spaces. eslint:
react/jsx-curly-spacing
// bad <Foo bar={ baz } /> // good <Foo bar={baz} />
Props
Always use camelCase for prop names.
// bad <Foo UserName="hello" phone_number={12345678} /> // good <Foo userName="hello" phoneNumber={12345678} />
Omit the value of the prop when it is explicitly
true
. eslint:react/jsx-boolean-value
// bad <Foo hidden={true} /> // good <Foo hidden />
Always include an
alt
prop on<img>
tags. If the image is presentational,alt
can be an empty string or the<img>
must haverole="presentation"
. eslint:jsx-a11y/img-has-alt
// bad <img src="hello.jpg" /> // good <img src="hello.jpg" alt="Me waving hello" /> // good <img src="hello.jpg" alt="" /> // good <img src="hello.jpg" role="presentation" />
Do not use words like "image", "photo", or "picture" in
<img>
alt
props. eslint:jsx-a11y/img-redundant-alt
Why? Screenreaders already announce
img
elements as images, so there is no need to include this information in the alt text.
```jsx
// bad
<img src="hello.jpg" alt="Picture of me waving hello" />
// good
<img src="hello.jpg" alt="Me waving hello" />
```
Use only valid, non-abstract ARIA roles. eslint:
jsx-a11y/aria-role
// bad - not an ARIA role <div role="datepicker" /> // bad - abstract ARIA role <div role="range" /> // good <div role="button" />
Do not use
accessKey
on elements. eslint:jsx-a11y/no-access-key
Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility.
```jsx
// bad
<div accessKey="h" />
// good
<div />
```
Avoid using an array index as
key
prop, prefer a unique ID. (why?) eslint:react/no-array-index-key
// bad {todos.map((todo, index) => <Todo {...todo} key={index} /> )} // good {todos.map(todo => ( <Todo {...todo} key={todo.id} /> ))}
Do not pass CSS classes & styles between custom components. This rule only applies to Components (e.g.
<Foo />
) and not DOM nodes (e.g.<div />
). eslint:react/forbid-component-props
Why? These add lots of complexity to Components.
```jsx
// bad
<Hello className="foo" />
<Hello style={{color: "red"}} />
// good
<Hello name="Joe" />
<div className="foo" />
<div style={{color: "red"}} />
```
Always define propTypes accurately for all props and avoid PropTypes.any, PropTypes.array, PropTypes.object. eslint:
react/forbid-prop-types
// bad class Component extends React.Component { ... } Component.propTypes = { a: React.PropTypes.any, r: React.PropTypes.array, o: React.PropTypes.object }; class Component extends React.Component { static propTypes = { a: React.PropTypes.any, r: React.PropTypes.array, o: React.PropTypes.object }; render() { return <div />; } } // good class Component extends React.Component { ... } Component.propTypes = { a: React.PropTypes.string, r: React.PropTypes.arrayOf(PropTypes.string), o: React.PropTypes.shape({ id: PropTypes.number.isRequired }) }; class Component extends React.Component { static propTypes = { a: React.PropTypes.string, r: React.PropTypes.arrayOf(PropTypes.string), o: React.PropTypes.shape({ id: PropTypes.number.isRequired }) }; render() { return <div />; } }
Always define explicit defaultProps for all non-required props. eslint:
react/require-default-props
Why? propTypes are a form of documentation, and providing defaultProps means the reader of your code doesn’t have to assume as much. In addition, it can mean that your code can omit certain type checks.
// bad
function SFC({ foo, bar, children }) {
return <div>{foo}{bar}{children}</div>;
}
SFC.propTypes = {
foo: PropTypes.number.isRequired,
bar: PropTypes.string,
children: PropTypes.node,
};
// good
function SFC({ foo, bar }) {
return <div>{foo}{bar}</div>;
}
SFC.propTypes = {
foo: PropTypes.number.isRequired,
bar: PropTypes.string,
};
SFC.defaultProps = {
bar: "",
children: null,
};
Refs
Always use ref callbacks. eslint:
react/no-string-refs
// bad <Foo ref="myRef" /> // good <Foo ref={ref => { this.myRef = ref; }} />
Parentheses
Wrap JSX tags in parentheses when they span more than one line. eslint:
react/wrap-multilines
// bad render() { return <MyComponent className="long body" foo="bar"> <MyChild /> </MyComponent>; } // good render() { return ( <MyComponent className="long body" foo="bar"> <MyChild /> </MyComponent> ); } // good, when single line render() { const body = <div>hello</div>; return <MyComponent>{body}</MyComponent>; }
Tags
Always self-close tags that have no children. eslint:
react/self-closing-comp
// bad <Foo className="stuff"></Foo> // good <Foo className="stuff" />
If your component has multi-line properties, close its tag on a new line. eslint:
react/jsx-closing-bracket-location
// bad <Foo bar="bar" baz="baz" /> // good <Foo bar="bar" baz="baz" />
Methods
Use arrow functions to close over local variables.
function ItemList(props) { return ( <ul> {props.items.map((item, index) => ( <Item key={item.key} onClick={() => doSomethingWith(item.name, index)} /> ))} </ul> ); }
Bind event handlers for the render method in the constructor. eslint:
react/jsx-no-bind
Why? A bind call in the render path creates a brand new function on every single render.
```jsx
// bad
class extends React.Component {
onClickDiv() {
// do stuff
}
render() {
return <div onClick={this.onClickDiv.bind(this)} />
}
}
// good
class extends React.Component {
constructor(props) {
super(props);
this.onClickDiv = this.onClickDiv.bind(this);
}
onClickDiv() {
// do stuff
}
render() {
return <div onClick={this.onClickDiv} />
}
}
// good with class properties
class extends React.Component {
onClickDiv = () => {
// do stuff
};
render() {
return <div onClick={this.onClickDiv} />
}
}
```
- Do not use underscore prefix for internal methods of a React component.
Why? Underscore prefixes are sometimes used as a convention in other languages to denote privacy. But, unlike those languages, there is no native support for privacy in JavaScript, everything is public. Regardless of your intentions, adding underscore prefixes to your properties does not actually make them private, and any property (underscore-prefixed or not) should be treated as being public. See issues #1024, and #490 for a more in-depth discussion.
```jsx
// bad
React.createClass({
_onClickSubmit() {
// do stuff
},
// other stuff
});
// good
class extends React.Component {
onClickSubmit() {
// do stuff
}
// other stuff
}
```
Be sure to return a value in your
render
methods. eslint:react/require-render-return
// bad render() { (<div />); } // good render() { return (<div />); }
Control structures
React doesn't provide helpers for control structures out of the box and just allows the usage of native javascript helpers like ternary operator or Array.map. There is no if/else
or each
statement like in Handlebars.
To eliminate this lack we use JSX Control Statements which gives us some of the missing helpers :)
Conditional rendering. eslint: jsx-control-statements/jsx-if-require-condition
<div> <If condition={true}> <span>IfBlock</span> </If> </div>
Conditional rendering with alternatives eslint: jsx-control-statements/jsx-choose-not-empty, jsx-control-statements/jsx-when-require-condition, jsx-control-statements/jsx-otherwise-once-last
<div> <Choose> <When condition={test1}> <span>IfBlock</span> </When> <When condition={test2}> <span>ElseIfBlock</span> <span>Another ElseIfBlock</span> <span>...</span> </When> <Otherwise> <span>ElseBlock</span> </Otherwise> </Choose> </div>
Loops via native [].map
// single element <div> {[1,2,3].map((n) => { return <p>{n}</p> })} </div> // multiple elements <div> {[1,2,3].map((n) => { return ([ <h3></h3>, // note the comma <p></p> ]); })} </div>
Ordering
- Ordering for
class extends React.Component
:
- optional type annotations (flowtype)
- optional
static
methods constructor
getChildContext
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
- clickHandlers or eventHandlers like
onClickSubmit()
oronChangeDescription()
- getter methods for
render
likegetSelectReason()
orgetFooterContent()
- optional render methods like
renderNavigation()
orrenderProfilePicture()
render
- How to define
propTypes
,defaultProps
,contextTypes
, etc...
without class properties
```jsx
import React, { Component, PropTypes } from "react";
const propTypes = {
id: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
text: PropTypes.string,
};
const defaultProps = {
text: "Hello World",
};
class Link extends Component {
static methodsAreOk() {
return true;
}
render() {
return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
}
}
Link.propTypes = propTypes;
Link.defaultProps = defaultProps;
export default Link;
```
with class properties
```jsx
import React, { Component, PropTypes } from "react";
export default class Link extends Component {
static propTypes = {
id: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
text: PropTypes.string,
};
static defaultProps = {
text: "Hello World",
};
static methodsAreOk() {
return true;
}
render() {
return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
}
}
```
isMounted
- Do not use
isMounted
. eslint:react/no-is-mounted
Why?
isMounted
is an anti-pattern, is not available when using ES6 classes, and is on its way to being officially deprecated.