How to add the ESLint to React-Native App

Let’s learn something about linting.

So, firstly the question arises what is ESLint, and why do we need this?
the answer is simple it’s a tool, and why we need this
it’s used for identifying and reporting on patterns found in ECMAScript/JavaScript code

so we can make code more consistent and avoid bugs.

Basically, in simple words it makes coding easier, so let’s see how to use this

You can install and configure ESLint using this command:

npm init @eslint/config

When you run this command these options will show:

? 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
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
? Which framework does your project use? … 
❯ React //so as we are React-Native Developers we'll choose option 1st
  Vue.js
  None of these
? Does your project use TypeScript? › No / Yes
? Where does your code run? 
  Browser
✔ Node

? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest
? Would you like to install them now? › No / Yes

Successfully created .eslintrc.js file 

you’ll have an .eslintrc.{js,yml,json} file in your directory. In it, you’ll see some rules configured like this:

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

The names "semi" and "quotes" are the names of rules in ESLint. The first value is the error level of the rule and can be one of these values:

• "off" or 0 - turn the rule off
• "warn" or 1 - turn the rule on as a warning
• "error" or 2 - turn the rule on as an error

The three error levels allow you fine-grained control over how ESLint applies rules (for more configuration options and details, see the configuration docs).

here is the link to the Eslint rules which can be configured

for example : .eslintrc.js

module.exports = {
  root: true,
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "@react-native-community",
    "prettier",
  ],
  ignorePatterns: [
    "**/*/*.js",
    "*.js",
    "*.svg",
    "*.json",
    "*.png",
    "**/node_modules/**",
    "package.json",
    "package-lock.json",
  ],
  parser: "@typescript-eslint/parser",
  plugins: [
    "import",
    "react",
    "react-native",
    "prettier",
    "react-hooks",
    "@typescript-eslint",
    "promise",
    "unused-imports",
  ],
  env: {
    browser: true,
    node: true,
    es2021: true,
    "react-native/react-native": true,
  },
  rules: {
    quotes: [
      "error",
      "double",
      {
        avoidEscape: true,
      },
    ],
    "max-len": ["error", 150],
    "@typescript-eslint/ban-ts-comment": 2,
    "@typescript-eslint/no-explicit-any": 1,
    "react-native/no-unused-styles": 2,
    "react-native/no-inline-styles": 1,
    "@typescript-eslint/no-empty-interface": 1,
    "react-hooks/rules-of-hooks": 2,
    "react-hooks/exhaustive-deps": 0,
    "prefer-destructuring": 2,
    "no-nested-ternary": 2,
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
    "import/no-unused-modules": "error",
  },
};

hope this article is useful for you!🙂🙂

If you enjoyed this article, share it with your friends and colleagues!😇