Repository files navigation

Dear users, first of all, thanks for using the plugin! At the moment development activity is low, I've personally not worked with React Native for many years and have little time to continue updating the plugin. I'll do my best to update the plugin to ensure compatibility with new eslint versions, but unfortunately I do not have time to asses new features/pull requests. Thanks for your understanding!

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.