Eslint & Prettier Configuration React Native(Airbnb Style)

This is a step-by-step guide for integrating ESLint and Prettier into a React Native project to ensure code quality and consistent formatting. You are essentially setting up Airbnb's style guide with React-specific configurations, and integrating it with Prettier to automatically format the code.

---

Some important vs code extension to have:

dsznajder.es7-react-js-snippets
dbaeumer.vscode-eslint
rvest.vs-code-prettier-eslint
esbenp.prettier-vscode
rvest.vs-code-prettier-eslint
YoavBls.pretty-ts-errors
SonarSource.sonarlint-vscode
naumovs.color-highlight
streetsidesoftware.code-spell-checker

Also enable format on save in vscode settings:

---

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

---

8. Additionally you can add VS Code project level settings in:

.vscode/settings.json

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "explorer.confirmDelete": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "explicit",
    "source.sortMembers": "explicit"
  }
}

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.

Comments

[Yeom suyun]

Does lintFixAll actually perform the fixes?

[Ajmal Hasan]

Yes