React Native specific linting rules for ESLint. This repository is structured like (and contains code from) the excellent eslint-plugin-react.
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
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
}
}
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: 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}]}/>
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.