@peterpme/eslint-plugin-react-native

React Native specific linting rules for ESLint. This repository is structured like (and contains code from) the excellent eslint-plugin-react.

Installation

Install ESLint either locally or globally.

$ npm install --save-dev eslint

To make most use of this plugin, its recommended to install eslint-plugin-react in addition to ESLint. If you installed ESLint globally, you have to install eslint-plugin-react globally too. Otherwise, install it locally.

$ npm install --save-dev eslint-plugin-react

Similarly, install @peterpme/eslint-plugin-react-native

$ npm install --save-dev @peterpme/eslint-plugin-react-native

Configuration

Add plugins section and specify ESLint-plugin-React (optional) and @peterpme/eslint-plugin-react-native as a plugin.

{
  "plugins": ["react", "@peterpme/react-native"]
}

If it is not already the case you must also configure ESLint to support JSX.

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

In order to whitelist all browser-like globals, add @peterpme/react-native/react-native to your config.

{
  "env": {
    "@peterpme/react-native/react-native": true
  }
}

To use a different stylesheet provider:

{
  "settings": {
    "@peterpme/react-native/style-sheet-object-names": ["EStyleSheet", "OtherStyleSheet", "PStyleSheet"]
  }
}

Finally, enable all of the rules that you would like to use.

{
  "rules": {
    "@peterpme/react-native/no-unused-styles": 2,
    "@peterpme/react-native/split-platform-components": 2,
    "@peterpme/react-native/no-inline-styles": 2,
    "@peterpme/react-native/no-color-literals": 2,
    "@peterpme/react-native/no-raw-text": 2,
    "@peterpme/react-native/no-single-element-style-arrays": 2
  }
}

List of supported rules

• no-unused-styles: Detect StyleSheet rules which are not used in your React components
• sort-styles: Require style definitions to be sorted alphabetically
• split-platform-components: Enforce using platform specific filenames when necessary
• no-inline-styles: Detect JSX components with inline styles that contain literal values
• no-color-literals: Detect StyleSheet rules and inline styles containing color literals instead of variables
• no-raw-text: Detect raw text outside of Text component
• no-single-element-style-arrays: No style arrays that have 1 element only <View style={[{height: 10}]}/>

Shareable configurations

All

This plugin also exports an all configuration that includes every available rule.

{
  "plugins": [
    /* ... */
    "@peterpme/react-native"
  ],
  "extends": [/* ... */, "plugin:@peterpme/react-native/all"]
}

Note: These configurations will import @peterpme/eslint-plugin-react-native and enable JSX in parser options.

Thanks

Thanks to @intellicode for creating and maintaining this after all these years