eslint and prettier typescript react code example

Example 1: eslint prettier reactjs

$ yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks

# .eslintrc
{
  "parser": "babel-eslint",
  "extends": ["airbnb-base", "prettier"],
  "plugins": ["import"],
  "env": {
    "browser": true,
    "es6": true
  },
  "globals": {},
  "rules": {
    "import/no-cycle": "warn",
  },
  "parserOptions": {
    "sourceType": "module"
  }
}


# .prettierc
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "arrowParens": "avoid",
  "trailingComma": "all"
}

Example 2: prettier eslint typescript

1yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev