Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including eslint-plugin-react-native with all npm packages installed. Try it out:

require("eslint/package.json"); // eslint is a peer dependency. var eslintPluginReactNative = require("eslint-plugin-react-native")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

eslint-plugin-react-native v3.6.0

React Native specific linting rules for ESLint

ESLint plugin for React Native

Greenkeeper badge

Maintenance Status NPM version Build Status Dependency Status Coverage Status Code Climate BCH compliance

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 eslint-plugin-react-native

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

Configuration

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

{
  "plugins": [
    "react",
    "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 react-native/react-native to your config.

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

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

{
  "rules": {
    "react-native/no-unused-styles": 2,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 2,
    "react-native/no-color-literals": 2,
    "react-native/no-raw-text": 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

Shareable configurations

All

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

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

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free