React+TypeScript+Airbnb EsLint 설정하기

• Airbnb는 공식적으로 TypeScript 지원을 하지 않음 → eslint-config-airbnb-typescript 사용
• If you are using React, use eslint-config-airbnb, or if you aren't using React, use eslint-config-airbnb-base.

      → React 사용 시, eslint-config-airbnb를 사용

 

1. ESLint, Prettier, TypeScript 설치:

npm install eslint prettier typescript --save-dev

 

2. @typescript-eslint 플러그인 설치:

npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

•  2024-06-18 기준, eslint 최신 버전인 9.5 버전에서는 @typescript-eslint/parser의 요구 버전과 호환이 되지 않아 아래와 같이 버전을 지정하여 설치

npm install eslint@8.57.0 @typescript-eslint/parser@7.13.1 @typescript-eslint/eslint-plugin@7.13.1 --save-dev

 

 

3. eslint-config-prettier와 eslint-plugin-prettier 설치:

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

 

 

4. 프로젝트 루트에 .eslintrc.json 작성:

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    // 파일 확장자를 무시하고 패키지를 가져오도록 설정
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    // JSX 코드를 .jsx와 .tsx 파일에서만 사용할 수 있도록 제한
    "react/jsx-filename-extension": [
      "error",
      { "extensions": [".jsx", ".tsx"] }
    ],
    // 함수형 컴포넌트를 화살표 함수나 함수 선언으로 정의할 수 있도록 지정
    "react/function-component-definition": [
      2,
      { "namedComponents": ["arrow-function", "function-declaration"] }
    ]
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {}, // TypeScript 경로를 해석할 수 있도록 설정
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

 

5. 프로젝트 루트에 .prettierrc.json 작성

{
// 쌍따옴표 대신 홑따옴표 사용
"singleQuote": true,
// 모든 구문 끝에 세미콜론 출력
"semi": true,
// 탭 대신 공백으로 들여쓰기
"useTabs": false,
// 들여쓰기 공백 수
"tabWidth": 2,
// ES5에서 유효한 모든 장소에 쉼표를 추가 (객체, 배열 등)
"trailingComma": "es5",
// 줄 바꿈할 길이
"printWidth": 80,
// 객체 괄호에 공백 삽입
"bracketSpacing": true,
// 항상 화살표 함수의 매개 변수를 괄호로 감쌈
"arrowParens": "always",
// OS에 따른 코드라인 끝 처리 방식 사용
"endOfLine": "auto"
}