EsLint & Prettier Configuration React Native(Airbnb Style)

Steps Breakdown

1. Install Dependencies

Remove the previous ESLint configuration, and install the necessary packages.

Commands:

yarn remove @react-native-community/eslint-config eslint

yarn add -D eslint eslint-plugin-react-native prettier eslint-config-prettier

2. Initialize ESLint

Run the following command to initialize ESLint and generate a configuration file:

npx eslint --init

Follow the prompts as outlined below:

• Q1: Choose “To check syntax, find problems, and enforce code style.”
• Q2: Choose “JavaScript modules (import/export).”
• Q3: Choose “React.”
• Q4: Select “No” for TypeScript support.
• Q5: Choose “Node” (since React Native runs in a Node environment).
• Q6: Choose “Use a popular style guide.”
• Q7: Choose “Airbnb.”
• Q8: Choose “JSON” for the config file format.

Select “Yes” when prompted to install the dependencies.

3. Update .eslintrc.json

Replace the generated .eslintrc.json file with the following configuration to integrate Prettier and React Native-specific rules:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "airbnb/hooks",
    "prettier"
  ],
  "plugins": ["react", "react-native"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/function-component-definition": "off",
    "no-param-reassign": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "no-use-before-define": ["error", { "variables": false }],
    "react/prop-types": ["error", { "ignore": ["navigation", "navigation.navigate"] }],
    "react-native/no-inline-styles": "error",
    "max-lines": ["error", { "max": 500 }]
  }
}

4. Create .eslintignore

Add a .eslintignore file to exclude certain files or directories from ESLint checks.

.eslintignore:

node_modules/
build/*.js
config/*.js
coverage/*.js
coverage/*
jest/*.js
__tests__/*
__tests__/*.js

5. Create .prettierrc.json

Add the following configuration in a .prettierrc.json file to set up Prettier formatting rules:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "singleQuote": true,
  "semi": true,
  "printWidth": 100,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5"
}

6. Add Scripts to package.json

Add the following scripts to your package.json file to run ESLint and Prettier:

package.json:

"scripts": {
  "lint": "eslint .",
  "lintFixAll": "eslint 'src/**/*.{js,jsx}' --fix",
  "prettierFixAll": "prettier --write 'src/**/*.{js,jsx}'",
  "fix:lintPrettier": "yarn prettierFixAll && yarn lintFixAll"
}

This will allow you to lint and fix code formatting issues with a single command.

7. Usage

You can now run the following commands to check and fix issues in your project:

• Lint all files: yarn lint
• Fix all ESLint issues: yarn lintFixAll
• Fix all Prettier formatting issues: yarn prettierFixAll
• Run both Prettier and ESLint fixes: yarn fix:lintPrettier

Conclusion

By following these steps, your React Native project will be set up with ESLint, Prettier, and Airbnb’s style guide, ensuring code quality and formatting consistency.