Eslint & Prettier Configuration React Native(Airbnb Style)

#javascript #reactnative #productivity #react

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

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

--GITHUB REPO--