Quickly add ESLint and Prettier to ReactNative

.eslintrc

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react",
    "prettier/flowtype",
    "plugin:flowtype/recommended"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 9,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "es6": true
  },
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "vars": "all"
      }
    ],
    "arrow-body-style": ["error", "as-needed"],
    "no-param-reassign": [
      "error",
      {
        "props": true
      }
    ],
    "no-console": "warn",
    "react/jsx-filename-extension": [
      "warn",
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "radix": "off",
    "no-shadow": [
      "error",
      {
        "builtinGlobals": false,
        "hoist": "all",
        "allow": [
          "resolve",
          "reject",
          "done",
          "next",
          "err",
          "error",
          "cb",
          "callback"
        ]
      }
    ],
    "quotes": [
      "error",
      "single",
      {
        "avoidEscape": true,
        "allowTemplateLiterals": true
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "all",
        "singleQuote": true,
        "semi": true,
        "printWidth": 80
      }
    ],
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        "components": ["Link"],
        "specialLink": ["hrefLeft", "hrefRight", "to"],
        "aspects": ["noHref", "invalidHref", "preferButton"]
      }
    ],
    "flowtype/define-flow-type": "warn",
    "flowtype/use-flow-type": "warn"
  },
  "settings": {
    "flowtype": {
      "onlyFilesWithFlowAnnotation": true
    }
  },
  "plugins": ["prettier", "flowtype"]
}

Install.md

Step1 Create ReactNative project

$ react-native init my-project
$ cd my-project
$ react-native run-ios
OR
$ react-native run-android

Step2 Add packages for ESLint and Prettier

$ yarn add --dev eslint prettier eslint-plugin-prettier eslint-config-prettier
$ yarn add --dev babel-eslint
$ yarn add --dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
$ yarn add --dev eslint-plugin-flowtype

Step3 Add .eslintrc

$ touch .eslintrc

Step4 Edit VSCode preference

  // Default format for other languages
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  // Disable VSCode settings for javascript
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false,
    "editor.formatOnType": false,
  },
  // Apply only ESLint settings for javascript
  "eslint.enable": true,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,

That's all.