Common development setup for React => Babel, ESLint and Prettier (with or without Flow).

.eslintignore

# dependencies
/node_modules

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

#flow-typed annotations
flow-typed/

.flowconfig

[ignore]
.*/node_modules/.*

[include]
./src

[libs]

[lints]

[options]
module.name_mapper='^Components\/\(.*\)$' -> '<PROJECT_ROOT>/src/Components/\1'
module.name_mapper='^Styles\/\(.*\)$' -> '<PROJECT_ROOT>/src/Styles/\1'
module.file_ext=.js
module.file_ext=.scss
module.name_mapper.extension='scss' -> 'empty/object'

[strict]

.prettierrc

{
  "endOfLine": "lf",
  "tabWidth": 4,
  "printWidth": 120,
  "trailingComma": "all",
  "semi": true,
  "singleQuote": true
}

flow-reminder.txt

NOTE:

1. Don't forget to install flow-typed
2. run flow-typed install
3. Ignore /flow-typed directory from Git and ESLint

package.json

"scripts": {
    "lint": "eslint --fix . && echo 'Lint complete.'",
    "eslint-check": "eslint --print-config .eslintrc.json | eslint-config-prettier-check",
    "start": "node server.js"
  },

packages.txt

Without @Flow
yarn add -D babel-eslint eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier pretty-quick

With @Flow
yarn add flow-bin && yarn add -D babel-eslint eslint eslint-plugin-flowtype flow-typed eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier pretty-quick

with-flow.eslintrc

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true,
    "jest": true
  },
  "plugins": [
    "react",
    "react-hooks",
    "prettier",
    "flowtype"
  ],
  "extends": [
    "airbnb",
    "prettier",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "plugin:flowtype/recommended",
    "prettier/flowtype",
    "prettier/react"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018,
    "allowImportExportEverywhere": false,
    "codeFrame": false
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "flowtype": {
      "onlyFilesWithFlowAnnotation": false
    }
  },
  "rules": {
    "react/no-unused-prop-types": 0,
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "max-len": ["error", {"code": 120}],
    "prefer-promise-reject-errors": ["off"],
    "react/jsx-filename-extension": ["off"],
    "no-nested-ternary": "off",
    "no-return-assign": ["off"],
    "prettier/prettier": "error",
    "flowtype/boolean-style": [
      2,
      "boolean"
    ],
    "flowtype/define-flow-type": 1,
    "flowtype/delimiter-dangle": [
      2,
      "always"
    ],
    "flowtype/generic-spacing": [
      2,
      "never"
    ],
    "flowtype/no-mixed": 2,
    "flowtype/no-primitive-constructor-types": 2,
    "flowtype/no-types-missing-file-annotation": 2,
    "flowtype/no-weak-types": [
      2, {
        "any": false,
        "Object": false,
        "Function": true
      }
    ],
    "flowtype/object-type-delimiter": [
      2,
      "comma"
    ],
    "flowtype/require-parameter-type": [
      2,
      {
        "excludeArrowFunctions": true
      }
    ],
    "flowtype/require-readonly-react-props": 0,
    "flowtype/require-return-type": [
      2,
      "always",
      {
        "annotateUndefined": "never",
        "excludeArrowFunctions": true,
        "excludeMatching": ["render"]
      }
    ],
    "flowtype/require-valid-file-annotation": 2,
    "flowtype/semi": [
      2,
      "always"
    ],
    "flowtype/space-after-type-colon": [
      2,
      "always"
    ],
    "flowtype/space-before-generic-bracket": [
      2,
      "never"
    ],
    "flowtype/space-before-type-colon": [
      2,
      "never"
    ],
    "flowtype/type-id-match": [
      2,
      "^([A-Z][a-z0-9]+)+Type$"
    ],
    "flowtype/union-intersection-spacing": [
      2,
      "always"
    ],
    "flowtype/use-flow-type": 1,
    "flowtype/valid-syntax": 1
  }
}

without-flow.eslintrc

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true,
    "jest": true
  },
  "plugins": [
    "react",
    "react-hooks",
    "prettier"
  ],
  "extends": [
    "airbnb",
    "prettier",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "prettier/react"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018,
    "allowImportExportEverywhere": false,
    "codeFrame": false
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "flowtype": {
      "onlyFilesWithFlowAnnotation": false
    }
  },
  "rules": {
    "react/no-unused-prop-types": 0,
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "max-len": ["error", {"code": 120}],
    "prefer-promise-reject-errors": ["off"],
    "react/jsx-filename-extension": ["off"],
    "no-nested-ternary": "off",
    "no-return-assign": ["off"],
    "prettier/prettier": "error"
  }
}