Repository files navigation

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

InstallESLint either locally or globally.

$ npm install --save-dev eslint

To make most use of this plugin, its recommended to installeslint-plugin-react in addition toESLint. If you installedESLint 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

Addplugins 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 configureESLint to support JSX.

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

In order to whitelist allbrowser-like globals, addreact-native/react-native to your config.

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

To use another stylesheet providers.

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

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,"react-native/no-single-element-style-arrays":2,  }}

• no-unused-styles: DetectStyleSheet 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: DetectStyleSheet rules and inline styles containing color literals instead of variables
• no-raw-text: Detect raw text outside ofText component
• no-single-element-style-arrays: No style arrays that have 1 element only<View style={[{height: 10}]}/>

This plugin also exports anall configuration that includes every available rule.

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

Note: These configurations will importeslint-plugin-react-native and enable JSX inparser options.