DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on • Updated on

Eslint & Prettier Configuration React Native(Airbnb Style)

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
Enter fullscreen mode Exit fullscreen mode
yarn add -D eslint eslint-plugin-react-native prettier eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

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
  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? …
✔ 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:

# question 8:
? What format do you want your config file to be in? …

# 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
Enter fullscreen mode Exit fullscreen mode

b) Replace .eslintrc.json code with below: (REF->)

// REF:

  "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 }]

Enter fullscreen mode Exit fullscreen mode

c) Add .eslintignore file and put below code: (REF->)

Enter fullscreen mode Exit fullscreen mode

d) Create .prettierrc.jsonfile 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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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.)


Top comments (2)

artxe2 profile image
Yeom suyun

Does lintFixAll actually perform the fixes?

ajmal_hasan profile image
Ajmal Hasan