JSPM

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

Usage

In your js project directory:

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

And in your .eslintrc.yaml:

---
  extends:
    - react-native
    - react-native/style-guide #optional

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

{
  "extends": ["react-native", "react-native/style-guide"]
}

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

npm install --save-dev husky

And in your package.json:

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

safety checks and best practices supporting commonly used ESNext features with a bias toward code concision / brevity

  plugins:
    - react
    - react-native

provides React, JSX and React Native specific rules

  extends:
    - esnext
    - plugin:react/recommended

enables jsx parsing, includes 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-danger: prevent usage of dangerouslySetInnerHTML
• react/no-deprecated: prevent usage of deprecated methods
• 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-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

  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-pascal-case: enforce PascalCase for user-defined JSX components
• 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/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/require-render-return: prevent missing return in render()
• react/wrap-multilines: prevent missing parentheses around multiline JSX

style-guide: for consistency, readability and more brevity

---
  extends: esnext/style-guide

includes rules from eslint-config-esnext

  rules:

selected from here, configured to:

• jsx-quotes: enforce the consistent use of double quotes in JSX attributes
• react/jsx-closing-bracket-location: enforce JSX closing brackets to be line-aligned
• react/jsx-curly-spacing: enforce spaces inside of curly braces in JSX attributes
• react/jsx-equals-spacing: disallow spaces around the equal sign in JSX attributes
• react/jsx-first-prop-new-line: enforce first property to be placed on a new line when the properties are spread over multiple lines
• react/jsx-indent: enforce tabs for indentation
• react/jsx-indent-props: enforce tabs for indenting props
• react/jsx-max-props-per-line: limit to a maximum of 2 props on a single line in JSX
• react/jsx-sort-props: enforce alphabetical sorting of props, with shorthand props first and callbacks last
• react/jsx-space-before-closing: require spacing before closing bracket in JSX
• react/self-closing-comp: prevent extra closing tags for components without children
• react/sort-comp: enforce component methods to be in lifecycle order
• react/sort-prop-types: enforce propTypes declarations to be alphabetically sorted, object first and