.eslintrc.json

{
  "env": {
    // 이 설정은 전역 변수를 정의합니다.
    "browser": true, // 브라우저 전역 변수 (예: window, document 등)를 사용할 수 있음을 나타냅니다.
    "es2021": true, // ES2021에 도입된 ECMAScript 전역 변수와 문법을 사용할 수 있음을 나타냅니다.
    "node": true, // Node.js 전역 변수와 Node.js scoping을 사용할 수 있음을 나타냅니다.
    "jest": true
  },
  "extends": [
    //  이 설정은 기존의 다른 설정을 확장하고, 덮어쓰거나 추가 설정을 할 수 있도록 해줍니다.
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "airbnb",
    "airbnb-typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 13,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "overrides": [
    {
      "files": [
        "*.ts",
        "*.tsx",
        "*.js",
        "*.jsx"
      ]
    },
    {
      "files": [
        "*.ts",
        "*.tsx"
      ],
      "rules": {}
    },
    {
      "files": [
        "*.js",
        "*.jsx"
      ],
      "rules": {}
    }
  ],
  "rules": {
    "quotes": [
      "error",
      "single"
    ], // 모든 따옴표를 작은 따옴표(')로 강제합니다.
    "@typescript-eslint/quotes": "off", // TypeScript 코드에 대해 따옴표 규칙을 비활성화합니다.
    "@next/next/no-html-link-for-pages": "off", // 이 규칙은 HTML <a> 태그를 사용하여 내부 페이지를 링크하는 것을 금지합니다. "off"는 이 규칙을 비활성화합니다.
    "@typescript-eslint/no-use-before-define": [
      "error"
    ], // 변수, 함수, 클래스를 선언하기 전에 사용하는 것을 금지하는 규칙입니다.
    "@typescript-eslint/no-unsafe-assignment": "error", // 타입이 없는 변수에 안전하지 않은 값을 할당하는 것을 금지하는 규칙입니다.
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    ], // JSX 문법을 사용할 수 있는 파일 확장자를 지정합니다.
    "react/jsx-key": "error", // React에서 배열의 각 요소에 key prop를 제공하는 것은 필수입니다.
    "react/react-in-jsx-scope": "off",
    "react/function-component-definition": [
      2,
      {
        "namedComponents": "function-declaration"
      }
    ], // 함수형 컴포넌트의 정의 방식을 지정합니다.
    "arrow-body-style": [
      "error",
      "always"
    ], // 화살표 함수의 본문은 항상 중괄호 {}로 둘러싸야 합니다.
    "@typescript-eslint/no-unused-vars": [
      "error"
    ], // 정의되었지만 사용되지 않은 변수가 있을 경우 에러를 반환합니다.
    "react-hooks/rules-of-hooks": "error", // React 훅의 규칙을 강제합니다. 예를 들어, 훅은 최상위 레벨에서만 호출되어야 하고, 루프, 조건문, 중첩된 함수 내에서 호출되어서는 안됩니다.
    "react-hooks/exhaustive-deps": "warn", // useEffect 및 관련 훅의 의존성 배열을 검사합니다. 의존성 배열이 완전하지 않으면 경고를 반환합니다.
    "no-console": [
      "error",
      {
        "allow": [
          "warn",
          "error"
        ]
      }
    ], // console.log의 사용을 금지하지만 console.warn와 console.error는 허용합니다.
    "linebreak-style": "off", // 줄 바꿈 스타일을 강제하는 규칙을 비활성화
    "react/require-default-props": "off", // React 컴포넌트에서 default props를 강제하는 규칙을 비활성화
    "react/button-has-type": "off", // button 요소에 type 속성을 강제하는 규칙을 비활성화
    "react/jsx-props-no-spreading": "off", // JSX 문법에서 spread 연산자를 통한 props 넘김을 제한하는 규칙을 비활성화
    "import/prefer-default-export": "off", // 모듈에서 하나의 이름이 지정된 export만 있을 때, 기본 export를 사용하도록 하는 규칙을 비활성화합니다.
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ], // import 구문에서 파일 확장자를 생략해야합니다. 패키지를 import할 때는 이 규칙을 무시합니다.
    "import/order": [ // import 순서를 지정합니다.
      "error",
      {
        "groups": [ // 먼저 해당 groups의 순서를 갖습니다.
          "type",
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "unknown"
        ],
        "pathGroups": [ // 기본 groups 외 특정 순서를 지정할 수 있습니다.
          {
            "pattern": "react*",
            "group": "external",
            "position": "before"
          },
          {
            "pattern": "@/public/images/*",
            "group": "unknown",
            "position": "after"
          }
        ],
        "pathGroupsExcludedImportTypes": [
          "type"
        ], // type 종류는 pathGroups를 적용하지 않습니다.
        "newlines-between": "always", // import grouping 간에 한 줄을 추가합니다.
        "alphabetize": { // 같은 grouping 내에선 알파벳 순서를 따릅니다.
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],
    "import/no-extraneous-dependencies": [ // 아래 devDependencies 내 파일들은 해당 룰에 영향을 받지 않습니다.
      "error",
      {
        "devDependencies": [
          "test.{ts,tsx}", // repos with a single test file
          "test-*.{ts,tsx}", // repos with multiple top-level test files
          "**/*{.,_}{test,spec}.{ts,tsx}", // tests where the extension or filename suffix denotes that it is a test
          "**/vitest.config.ts", // vitest config
          "**/vitest.setup.ts", // vitest setup
          "**/test-utils.tsx" // test-utils file
        ],
        "optionalDependencies": false
      }
    ]
  }
}