ESLint and Prettier are commonly used tools in React Native projects, just as they are in React projects. They help maintain code quality, enforce coding standards, and ensure consistent formatting across the codebase.
1. Installation
Run these command:
yarn remove @react-native-community/eslint-config eslint
yarn add -D eslint eslint-plugin-react-native prettier eslint-config-prettier
2. Configurations:
a) Run npx eslint --init
Then choose accordingly:
# question 1:
? How would you like to use ESLint? …
To check syntax only
To check syntax and find problems
❯ To check syntax, find problems, and enforce code style
# question 2:
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
# question 3:
? Which framework does your project use? …
❯ React
Vue.js
None of these
# question 4 (select "No", because we won't add TypeScript support for this project):
? Does your project use TypeScript? › No / Yes
# question 5:
? Where does your code run? …
Browser
✔ Node
# question 6:
? How would you like to define a style for your project? …
❯ Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)
# question 7 (we'll rely on Airbnb's JavaScript style guide here):
? Which style guide do you want to follow? …
❯ Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
# question 8:
? What format do you want your config file to be in? …
JavaScript
YAML
❯ JSON
# the final prompt here is where eslint will ask you if you want to install all the necessary dependencies. Select "Yes" and hit enter:
Checking peerDependencies of eslint-config-airbnb@latest
The config that you have selected requires the following dependencies:
eslint-plugin-react@^7.21.5 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0
? Would you like to install them now with npm? › No / Yes
b) Replace .eslintrc.json
code with below: (REF->)
// REF: https://github.com/vasilestefirta/react-native-eslint-prettier-example
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks", "prettier"],
"plugins": ["react", "react-native"],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
//you can turn off warning by making it "off"
"react/function-component-definition": "off",
"no-param-reassign": "off",
// allow .js files to contain JSX code
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
// prevent eslint to complain about the "styles" variable being used before it was defined
"no-use-before-define": ["error", { "variables": false }],
// ignore errors for the react-navigation package
"react/prop-types": ["error", { "ignore": ["navigation", "navigation.navigate"] }],
// enforce a maximum of two styles for inline styles
"react-native/no-inline-styles": "error", // Add this line
// enforce a maximum file length of 500 lines
"max-lines": ["error", { "max": 500 }]
}
}
c) Add .eslintignore
file and put below code: (REF->)
node_modules/
build/*.js
config/*.js
coverage/*.js
coverage/*
jest/*.js
__tests__/*
__tests__/*.js
d) Create .prettierrc.json
file and put below code: (REF->)
{
"arrowParens": "always",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"quoteProps": "as-needed",
"singleQuote": true,
"semi": true,
"printWidth": 100,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "es5"
}
e) At last append below code in package.json
inside scripts{}
(REF->)
"lint": "eslint .",
"lintFixAll":"eslint 'src/**/*.{js,jsx}'",
"prettierFixAll":"prettier --write 'src/**/*.{js,jsx}'",
"fix:lintPrettier":"yarn prettierFixAll && yarn lintFixAll"
Now you are good to go, with above commands you can check or fix all files at once(Remember: You need to put all required files inside
src
folder that needs to be checked, then only above commands will work.)