eslint-config-react-native

Pluggable ESLint config for React Native that you can import, extend and override

React Native: Safety Checks and Best Practices with a bias toward code concision / brevity

Usage

In your js project directory:

npm install --save-dev eslint-config-react-native

And in your .eslintrc.yaml:

extends:
  - react-native

Alternatively, in your .eslintrc.js or .eslintrc.json:

{
  "extends": ["react-native"]
}

To add a git-hook to your commits, consider using husky

npm install --save-dev husky

And in your package.json:

  "scripts": {
    "precommit": "eslint ."
  }

Config

This config is biased and opinionated, and errs on the side of too many rules instead of too few. Think of this as a superset of your repo's lint config, and discard what you don't like in it. It's easy to override and disable the rules you find inconvenient.

env:
  browser: true

enables browser features and global variables

plugins:
  - react
  - react-native

provides React, JSX and React Native specific rules

extends:
  - esnext
  - plugin:react/recommended

enables jsx parsing, includes config and rules from eslint-config-esnext and the following react-specific recommended rules:

• react/display-name: prevent missing displayName in a React component definition
• react/jsx-no-duplicate-props: prevent duplicate properties in JSX components
• react/jsx-no-undef: disallow undeclared variables as JSX components
• react/jsx-uses-react: prevent React from being marked as unused in a file using JSX
• react/jsx-uses-vars: prevent variables used in JSX to be incorrectly marked as unused
• react/no-deprecated: prevent usage of deprecated methods
• react/no-direct-mutation-state: prevent direct mutation of this.state
• react/no-is-mounted: prevent usage of isMounted
• react/no-unknown-property: prevent usage of unknown DOM property
• react/prop-types: prevent missing props validation in a React component definition
• react/react-in-jsx-scope: prevent missing React when using JSX
• react/require-render-return: prevent missing return in render()

rules:

selected from here, configured to:

• react-native/no-color-literals: detect StyleSheet rules and inline styles containing color literals instead of variables
• react-native/no-inline-styles: detect JSX components with inline styles that contain literal values
• react-native/no-unused-styles: detect unused StyleSheet rules
• react-native/split-platform-components: enforce using platform specific filenames when necessary
• react/jsx-boolean-value: prefer shorthand if an attribute has a true value in JSX
• react/jsx-handler-names: enforce event handler naming conventions in JSX
• react/jsx-key: validate JSX has key prop when in array or iterator; set to warn only
• react/jsx-no-bind: prevent usage of .bind() and arrow functions in JSX props; set to warn only
• react/jsx-pascal-case: enforce PascalCase for user-defined JSX components
• react/jsx-wrap-multilines: prevent missing parentheses around multiline JSX
• react/no-danger: prevent usage of dangerouslySetInnerHTML
• react/no-did-mount-set-state: prevent usage of setState in componentDidMount, but allow inside callbacks
• react/no-did-update-set-state: prevent usage of setState in componentDidUpdate, but allow inside callbacks
• react/no-find-dom-node: Prevent usage of findDOMNode
• react/no-multi-comp: prevent multiple component definitions per file, apart from stateless functional components
• react/no-render-return-value: prevent usage of the return value of ReactDOM.render()
• react/no-string-refs: prevent using string references in ref attribute
• react/no-unused-prop-types: prevent definitions of unused prop types
• react/prefer-es6-class: enforce ES5 or ES6 class for React Components
• react/prefer-stateless-function: enforce stateless React Components to be written as a pure function

React Native Style Guide