.eslintrc.json

{
  // [env] 프로젝트 환경 설정, 브라우저 환경과 ES2021 문법 사용
  "env": {
    "browser": true,
    "es2021": true
  },
  // [parser] typescript를 parser로 사용하도록 함
  "parser": "@typescript-eslint/parser",
  // [plugins] 사용할 eslint 플러그인 설정
  "plugins": ["@typescript-eslint", "prettier"],
  // [extends] 프로젝트에 적용할 eslit 규칙셋
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  // [rules] 상세 규칙
  "rules": {
    // var 금지
    "no-var": "warn",
    // 컴포넌트의 props 검사 비활성화, propstype 사용하지 않아도 경고 띄우지 않음
    "react/prop-types": 0,
    // 불필요한 세미콜론 사용 시 에러 표시
    "no-extra-semi": "error",
    // jsx 파일 확장자 .jx, .jsx, .ts, .tsx 허용
    "react/jsx-filename-extension": [
      2,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    // 사용하지 않는 변수가 있을 때 발생하는 경고 비활성화
    "no-unused-vars": ["off"],
    // 콘솔 사용 시 발생하는 경고 비활성화
    "no-console": ["off"],
    // export문이 하나일 때 default export 사용 권장 경고 비활성화
    "import/prefer-default-export": ["off"],
    // react hooks의 의존성배열이 충분하지 않을 때 경고 표시
    "react-hooks/exhaustive-deps": ["warn"],
    // 컴포넌트 이름은 PascalCase로
    "react/jsx-pascal-case": "warn",
    // 반복문으로 생성하는 요소에 key 강제
    "react/jsx-key": "warn",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    // "jsx-a11y/no-noninteractive-element-interactions": 0,
    // 디버그 허용
    "no-debugger": "off",
    // [error] Delete `␍` prettier/prettier
    "prettier/prettier": ["error", { "endOfLine": "auto" }],
    // [error] Function component is not a function declaration
    "react/function-component-definition": [
      2,
      { "namedComponents": ["arrow-function", "function-declaration"] }
    ],
    "react/react-in-jsx-scope": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-one-expression-per-line": 0,
    "no-nested-ternary": 0,
    // [error] Curly braces are unnecessary here
    "react/jsx-curly-brace-presence": [
      "warn",
      { "props": "always", "children": "always" }
    ],
    // 파일의 경로가 틀렸는지 확인하는 옵션 false
    "import/no-unresolved": ["error", { "caseSensitive": false }],
    // props spreading 허용하지 않는 경고 표시
    "react/jsx-props-no-spreading": [1, { "custom": "ignore" }],
    "linebreak-style": 0,
    "import/extensions": 0,
    "no-use-before-define": 0,
    // 테스트 또는 개발환경을 구성 파일에서는 devDependency 사용 허용
    "import/no-extraneous-dependencies": 0,
    "no-shadow": 0,

    "react/require-default-props": "off",
    "no-underscore-dangle": "off",
    "@typescript-eslint/no-explicit-any": "off"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      },
      "typescript": {
        "alwaysTryTypes": true,
        "project": "."
      }
    }
  }
}