eslint-config-kingstinct-react-native

ESLint configuration for React-native based on Airbnb with some great tweaks

Please use the updated eslint-config-kingstinct package instead. It will keep getting updates, has support for YML and GraphQL and makes it easier to use the same setup for Node and React Native (with optional peerDependencies).

eslint-config-kingstinct-react-native

CI Status

Principles

  1. As many autofixable rules as possible, because enforcing standards that don't require extra developer effort is (almost) always a good idea.
  2. Don't error on non-fixable errors (that don't risk causing unforeseen errors).

If you see something that could be improved based on these principles, please submit a pull request! :)

Usage

This is the base eslint config I use for React Native. It's based on the popular Airbnb-config with a few plugin additions:

  • TypeScript
  • import
  • jest
  • json
  • lodash-fp
  • promise
  • react
  • react-native

I've also made some minor changes to the rules, so if you've got other preferences you might want to override some rules. I highly recommend you to use eslint, flowtype with plugins for your texteditor/IDE.

The two main principles are to catch errors early on and to boost productivity (so for example I've disabled react/sort-comp as it's not fixed automatically yet).

  • Enforce lodash-fp instead of lodash.
    • Why? Many lodash methods are mutable which might cause hard-to-debug side effects, especially when using redux . With lodash-fp you're safe.

    • Disable if you really want to use the mutable lodash flavour (not recommended). Add this to your .eslintrc:

      { ...,
          rules: { ...,
            'lodash-fp/use-fp': 0
          }
      }
      

Install

  1. Install the correct versions of each package, which are listed by the command:
npm info "eslint-config-kingstinct-react-native@latest" peerDependencies

Linux/OSX users can run (if you're using NPM)

(
  export PKG=eslint-config-kingstinct-react-native;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

or (if you're using yarn)

(
  export PKG=eslint-config-kingstinct-react-native;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev "$PKG@latest"
)

Which produces and runs a command like:

npm install --save-dev eslint-config-kingstinct-react-native eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.#

Windows users can either install all the peer dependencies manually, or use the install-peerdeps cli tool.

npm install -g install-peerdeps
install-peerdeps --dev eslint-config-kingstinct-react-native

The cli will produce and run a command like:

npm install --save-dev eslint-config-kingstinct-react-native eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.#
  1. Add "extends": "kingstinct-react-native" to your .eslintrc

Previous versions

Previous versions (before 4.0) used flow for type checking.

Running tests

You can run tests with npm test. It will run the lint config on the project itself.

Made by Kingstinct AB