eslint airbnb 8 설치

기존 설치 된거 삭제하기

• npm uninstall eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks typescript-eslint @eslint/js
• 기존에 vite로 설치하면 기본적으로 깔려있는 것들이 있는데 혹시 몰르니 깔끔하게 다 삭제해준다.

✨ ESLint + Airbnb + TypeScript + Prettier + Vite 설정 가이드 (Windows 기준)

프론트엔드 개발 시 코드 품질과 일관된 스타일 유지를 위해 사용하는 ESLint + Prettier 조합.
여기에 Airbnb 스타일 가이드를 기반으로, TypeScript와 Vite 프로젝트에서 사용하는 완벽한 설정을 정리합니다.

---

📦 설치 명령어

npm install -D eslint@8.57.0 eslint-config-airbnb@19.0.4 eslint-plugin-import@2.29.1 eslint-plugin-react@7.33.2 eslint-plugin-react-hooks@4.6.0 eslint-plugin-jsx-a11y@6.8.0 @typescript-eslint/eslint-plugin@6.21.0 @typescript-eslint/parser@6.21.0 eslint-import-resolver-typescript prettier eslint-config-prettier typescript@5.3.3

👍 .eslintrc.json 파일 설정하기

{
  // TypeScript 코드를 ESLint가 해석할 수 있게 해주는 파서 설정
  "parser": "@typescript-eslint/parser",

  "parserOptions": {
    // 최신 ECMAScript 문법을 사용 가능하게 함 (예: optional chaining 등)
    "ecmaVersion": "latest",
    // import/export 문법을 허용
    "sourceType": "module",
    // JSX 문법 사용 허용 (React용)
    "ecmaFeatures": {
      "jsx": true
    },
    // TypeScript 타입 기반 린트를 활성화하기 위한 tsconfig 파일 경로들
    "project": ["./tsconfig.app.json", "./tsconfig.node.json"]
  },

  "settings": {
    "react": {
      // 설치된 React 버전을 자동으로 감지해서 그에 맞는 린트 룰을 적용
      "version": "detect"
    },
    "import/resolver": {
      // TypeScript의 경로 별칭(import alias) 등을 ESLint가 해석 가능하게 해줌
      "typescript": {"project": "./tsconfig.app.json"}
    }
  },

  // 코드가 실행되는 환경 설정 (전역 객체들을 인식할 수 있게 해줌)
  "env": {
    "browser": true,     // window, document 등 브라우저 전역 객체 허용
    "es2021": true,      // 최신 JS 문법 전역 사용 허용
    "node": true         // Node.js 전역 객체 사용 허용 (require, process 등)
  },

  // 사용할 ESLint 플러그인 모음 (확장 기능들)
  "plugins": [
    "@typescript-eslint", // TypeScript 전용 룰
    "react",              // React 룰
    "react-hooks",        // React Hooks 사용 시 규칙 검사
    "jsx-a11y"            // JSX 접근성 관련 검사 (a 태그에 href 없을 경우 등)
  ],

  // 규칙 세트들을 확장 (기본 룰 묶음들을 불러오는 역할)
  "extends": [
    "airbnb",                            // Airbnb 스타일 가이드
    "airbnb/hooks",                      // Airbnb의 React Hooks 룰 추가
    "plugin:@typescript-eslint/recommended", // TS 전용 추천 룰
    "plugin:import/typescript",         // TS import 관련 경로 검사 룰
    "plugin:jsx-a11y/recommended",      // JSX 접근성 추천 룰
    "prettier"                           // Prettier와 충돌나는 룰 비활성화
  ],

  // 규칙 커스터마이징
  "rules": {
    // import 할 떄 .tsx 이렇게 가져올꺼냐? .tsx 없이 가져오게 허용
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never",
        "js": "never"
      }
    ],
    // vite.config.ts 같은 설정 파일에서는 devDependencies import 허용 msw등 설정
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "**/vite.config.ts",
          "**/src/mocks/**",
          "**/test/**",
          "**/*.test.{js,ts,tsx}",
          "**/setupTests.{js,ts,tsx}"
        ]
      }
    ],
    // React 17+ 이후로 JSX에서 React import가 필요 없기 때문에 꺼줌
    "react/react-in-jsx-scope": "off",
    // 컴포넌트에 props spread (`...props`) 허용
    "react/jsx-props-no-spreading": "off",
    // prop-types는 TypeScript가 대신하므로 꺼줌
    "react/prop-types": "off",
    // 기본 props 설정 강제하지 않음 (defaultProps)
    "react/require-default-props": "off",
    // default export 강제하지 않음 (named export 사용 가능)
    "import/prefer-default-export": "off",
    // 정의 전에 사용하는 것 허용 (TS용으로 대체하므로 꺼줌)
    "no-use-before-define": "off",
    // TypeScript 기준으로 정의 이전 사용을 제한
    "@typescript-eslint/no-use-before-define": ["error"],
    // var 금지 (let, const만 허용)
    "no-var": "error",
    // JSX를 사용할 수 있는 파일 확장자 허용 (.tsx 포함)
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }]
  }
}

🙇‍♂️ .prettierrc 설정하기

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

⚙️ package.json 스크립트 예시

"scripts": {
  "dev": "vite",
  "build": "tsc -b && vite build",
  "preview": "vite preview",
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\""
}

🚩tsconifg.app.json, tsconfig.node.json

• 이거 삭제해주기

  "noUncheckedSideEffectImports": true