[React/ typescript] eslint, prettier 설정하기

수많은 오류가 엄청 많이 났었다 ㅠ

우선 오류를 다 찾아보고 최대한 오류 안나는 부분까지 고친 부분인데

이게 우선 오늘의 내가 최선이다 !!

#npm
npm install eslint@^7.2.0 eslint-plugin-import@^2.22.1 --save-dev
npm install eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react@^7.21.5 --save-dev
npm install eslint-plugin-react-hooks@^4 eslint-config-prettier --save-dev
npm install eslint-plugin-prettier eslint-config-airbnb prettier --save-dev
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

#yarn
yarn add eslint@^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 --dev
yarn add eslint-plugin-react@^7.21.5 eslint-plugin-react-hooks@^4 --dev
yarn add eslint-config-prettier eslint-plugin-prettier --dev
yarn add eslint-config-airbnb prettier --dev
yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

//.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2020: true,
    es6: true,
  },
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "prettier"],
  extends: [
    "airbnb",
    "airbnb/hooks",
    "plugin:import/errors",
    "plugin:import/warnings",
    // "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],

  rules: {
    "prettier/prettier": ["error", { singleQuote: false }],
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "no-console": "off",
    "no-underscore-dangle": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "object-curly-newline": "off",
    "linebreak-style": "off",
    "no-param-reassign": "off",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "import/extensions": [
      "error",
      "ignorePackages",
      { js: "never", jsx: "never", ts: "never", tsx: "never" },
    ],
  },
  settings: {
    "import/resolver": { node: { extensions: [".js", ".jsx", ".ts", ".tsx"] } },
  },
};

//.prettierc.js

module.exports = {
  singleQuote: true,
  semi: true,
  useTabs: false,
  tabWidth: 2,
  // 들여쓰기 너비는 2칸
  trailingComma: 'all',
  printWidth: 80,
  arrowParens: 'avoid',
  endOfLine: 'auto',
};