Pluggable ESLint config for React Native that you can import, extend and override
npm install eslint-config-react-nativeshell
npm install --save-dev eslint-config-react-native
`
And in your .eslintrc.yaml:
`yaml
extends:
- react-native
`
Alternatively, in your .eslintrc.js or .eslintrc.json:
`json
{
"extends": ["react-native"]
}
`
To add a git-hook to your commits, consider using husky
`shell
npm install --save-dev husky
`
And in your package.json:
`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.
`yaml
env:
browser: true
`
enables browser features and global variables
`yaml
plugins:
- react
- react-native
`
provides React, JSX and React Native specific rules
`yaml
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()
`yaml
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