React Native ESLint and Prettier config
Install the following packages globally
npm install eslint eslint-plugin-react eslint-plugin-react-native --global
Then install the following packages locally in your react native project
npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-native @babel/eslint-parser prettier eslint-config-prettier eslint-plugin-prettier
Once the installs are completed initialize eslint,
npm init @eslint/config
Answer the questions as follow,
- To check syntax, find problems, and enforce code style
- JavaScript modules (import/export)
- React
- No TypeScript
- Browser and Node
- Use a popular style guide - Airbnb
- JavaScript config file
- Yes install packages
Add react-native to the plugins section
// .eslintrc
{
"plugins": [
"react",
"react-native"
]
}
Configure ESLint to support JSX
// .eslintrc.json
{
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
}
Whitelist all browser-like globals by adding react-native/react-native to the config
// .eslintrc.json
{
"env": {
"browser": true,
"react-native/react-native": true,
}
}
The .eslintrc.js file should now look like this,
module.exports = {
env: {
browser: true,
'react-native/react-native': true,
es2021: true,
node: true,
},
extends: ['plugin:react/recommended', 'airbnb', 'airbnb/hooks', 'prettier'],
parser: '@babel/eslint-parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react', 'react-native', 'prettier'],
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/sort-styles': [
'error',
'asc',
{
ignoreClassNames: false,
ignoreStyleProperties: false,
},
],
// allow .js files to contain JSX code
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
'import/prefer-default-export': 'off',
},
};
Create a .prettierrc file and add the following,
{
"arrowParens": "always",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"quoteProps": "as-needed",
"singleQuote": true,
"semi": true,
"printWidth": 180,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "es5"
}
`'`