.eslintrc.json

{
  "extends": ["airbnb", "airbnb/hooks", "react-app", "prettier", "plugin:react/recommended", "plugin:prettier/recommended"],
  "env": {
    "browser": true,
    "jasmine": true,
    "jest": true
  },
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    },
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "rules": {
    "arrow-body-style": "off", // 화살표 함수 본문 주위에 중괄호 사용을 허용하거나 허용하지 않습니다.
    "semi": ["warn", "never"], // 규칙은 "warn" 및 "never"로 설정됩니다. 즉, 세미콜론을 사용하면 eslint가 경고하지만 요구하지는 않습니다.
    "react/function-component-definition": ["warn", { "namedComponents": "arrow-function" }], // named를 정의할 때 화살표 함수 구문을 사용해야 합니다. 
    "react/jsx-one-expression-per-line": "off", // 한 줄에 여러 JSX 표현식을 허용하거나 허용하지 않습니다.
    "react/jsx-filename-extension": [
      "error",
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ], // 이 규칙 "오류"로 설정되고 JSX를 포함하는 모든 파일의 확장자가 .js, .jsx, .ts 또는 .tsx여야 합니다.
    "react-hooks/exhaustive-deps": "off", // React useEffect() 후크에 모든 종속성을 포함하지 않으면 eslint가 경고하지 않습니다.
    "react/jsx-indent": "warn", //  "warn"으로 설정되며 JSX 들여쓰기가 잘못된 경우 경고합니다.
    "react/jsx-props-no-spreading": "off", // JSX props에서 스프레드 연산자의 사용을 허용/금지합니다.
    "react/no-array-index-key": "warn", //  React에서 목록 항목의 키로 배열 인덱스를 사용하는 경우 경고합니다.
    "react/require-default-props": "off", //  React 구성 요소의 모든 props에 대해 기본 props를 정의할 필요가 없습니다.
    "react/jsx-wrap-multilines": "off", // JSX 요소를 괄호로 묶지 않고 여러 줄에 표시할 수 있습니다.
    "react/jsx-uses-react": "off", // JSX를 사용하는 모든 파일에서 명시적으로 React 모듈을 가져올 필요가 없습니다.
    "react/react-in-jsx-scope": "off", // JSX를 사용하는 모든 파일에서 명시적으로 React 모듈을 가져올 필요가 없습니다.
    "import/prefer-default-export": "off", // 모듈에서 여러 값을 내보낼 수 있습니다.
    "import/no-unresolved": "off", // 가져오기를 해결할 수 없는 경우 eslint가 경고하지 않습니다.
    "import/order": "off", // 모듈을 가져올 때 특정 순서를 따를 필요가 없습니다.
    "import/no-anonymous-default-export": "off", // 모듈에서 익명의 기본값을 내보낼 수 있음을 의미합니다.
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [".storybook/**", "src/stories/**"]
      }
    ], // package.json 파일에 지정되지 않은 devDependency를 가져오면 "오류"가 표시되고 경고합니다.
    // "max-lines": ["warn", 150],
    "no-param-reassign": ["error", { "props": false }], // "error"로 설정되며 함수 매개변수를 수정하려고 하면 경고를 표시합니다.
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    // 이전에 변수 또는 함수의 사용을 제어합니다. 그들은 정의됩니다. 첫 번째 규칙은 꺼져 있고 "@typescript-eslint" 
    // 플러그인의 두 번째 규칙은 켜져 있고 "오류" 심각도로 설정되어 있습니다. 즉, 변수나 함수가 정의되기 전에 사용되면 오류가 발생합니다.
    "no-plusplus" :"off", // 단항 증가 및 감소 연산자("++" 및 "--")의 사용을 금지합니다.
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["error"],
    //변수 섀도잉을 방지합니다. 이름을 외부 범위의 변수로 지정하여 외부 변수에 액세스할 수 없도록 합니다. 
    // 첫 번째 규칙은 꺼져 있고 "@typescript-eslint" 플러그인의 두 번째 규칙은 켜져 있고 "오류" 심각도로 설정되어 있습니다.
    "no-unused-expressions": ["warn"],
    "@typescript-eslint/no-unused-vars": [
      "warn",
      { "argsIgnorePattern": "^_" }
    ],
    //사용하지 않는 식과 변수를 각각 감지합니다. 첫 번째 규칙은 "경고" 심각도로 설정되고 
    // "@typescript-eslint" 플러그인의 두 번째 규칙도 "경고" 심각도로 설정되며 밑줄("_")로 시작하는 변수를 무시합니다.
    "@typescript-eslint/naming-convention": "off",
    "@typescript-eslint/unbound-method": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-unsafe-member-access": "off",
    "@typescript-eslint/no-unsafe-assignment": "off",
    // 모두 TypeScript의 유형 안전 및 코드 모범 사례와 관련이 있습니다.
    "prefer-const": ["warn"], //초기화 후 재할당되지 않은 변수에 대해 "const" 사용을 강제합니다. "경고" 심각도로 설정됩니다.
    "prefer-destructuring": ["error", { "object": true, "array": false }], // 가능한 경우 객체 및 배열에 대해 destructuring 사용을 권장하며 " 오류" 심각도.
    "lines-between-class-members": "off", // 클래스 구성원 사이에 빈 줄을 적용하지만 구성에서 꺼져 있습니다.
    "jsx-a11y/click-events-have-key-events": "off", //  대화형 요소에 대한 키보드 이벤트 사용을 강제합니다. 구성에서 꺼져 있습니다.
    "jsx-a11y/label-has-associated-control": [
      "error",
      {
        "labelComponents": ["label"],
        "labelAttributes": ["htmlFor"],
        "controlComponents": ["input"]
      }
    ], //  모든 레이블에 연결된 컨트롤(예: 입력 필드)이 있어야 합니다. 구성은 레이블 및 컨트롤로 간주되어야 하는 구성 요소를 지정합니다.
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
    //  import 문에서 파일 확장자의 일관된 사용을 강제합니다. 구성에서 "오류" 심각도로 설정되고
    // 패키지를 무시하여 소스 파일에 대해 ".js", ".jsx", ".ts" 및 ".tsx" 확장자를 허용합니다.
  }
}