React Native plugin for ESLint
MIT License
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 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
}
}
StyleSheet
rules which are not used in your React componentsStyleSheet
rules and inline styles containing color literals instead of variablesText
component<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.