타입스크립트 보일러플레이트 바로가기
https://github.com/sangbeomheo/typescript-boilerplate

3탄: TypeScript 환경을 위한 ESLint를 설정하고, 'Airbnb-Style-Guide' 적용해보기

---

1. ESLint

ESLint는 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구로, 코드의 일관성을 높이고 버그를 방지하는 것을 목표로 합니다. 여러 면에서 몇 가지 예외를 제외하고는 JSLint 및 JSHint와 유사합니다.

https://eslint.org/docs/latest/user-guide/getting-started

• 일관된 코드 스타일을 유지하게해 가독성을 높인다.
• 코드 품질을 체크해 잠재적인 오류나 버그를 예방한다.
• ESLint는 완전히 플러그인처럼 작동한다. 개별 rule 들은 하나의 플러그인이고 추가/삭제 할 수 있다.

---

2. ESLint 설치와 기본 설정 알아보기

2.1 ESLint 설치

• 설치 후 설정 파일 ./eslintrc.json를 생성한다.

npm i -D eslint

2.2 root

https://eslint.org/docs/latest/user-guide/configuring/configuration-files#cascading-and-hierarchy

• ESLint는 Linting할 파일이 위치한 디렉토리부터 루트 디렉토리의 eslint 설정파일에 도달할 때까지 발견한 모든 설정파일을 병합한다. 탐색 중 root: true를 만나면 탐색을 멈춘다.

home
└── user
    └── projectA
        ├── .eslintrc.json  <- Not used
        └── lib
            ├── .eslintrc.json  <- { "root": true }
            └── main.js

// ./eslintrc.json
{
  "root": true
}

2.3 env

https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-environments

• 환경은 사전 정의된 전역 변수를 제공한다. 사용 가능한 환경은 공식문서 참고.

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  }
}

2.4 parserOptions

https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-parser-options

• ESLint 사용을 위해 지원하려는 Javascript 언어 옵션을 지정
  • ecmaVersion: 사용할 ECMAScript 버전을 설정
  • sourceType: parser의 export 형태를 설정

  "parserOptions": {
    "ecmaVersion": "lastest",
    "sourceType": "module"
  }

2.5 globals

https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-globals

• 사용자 전역 변수를 추가
• 각 전역 변수 키에 대해 해당 값을 동일하게 설정하고 변수의 덮어쓰기 여부를 설정
  • "writable" :변수 덮어쓰기를 허용
  • "readonly" :덮어쓰기 허용X

{
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  }
}

// eslint가 인식하지못하는 빌트인 전역객체 Atomics, SharedArrayBuffer를 사용하지않게 한다.
// 관련링크: https://stackoverflow.com/questions/68338890/why-do-developers-occasionally-add-sharedarraybuffer-atomics-to-the-esl

2.6 ignorePatterns

• 파일 또는 디렉토리를 린팅에서 제외

{
  "ignorePatterns": ["dist", "node_modules"]
  }
}

2.7 overrides

• 일부 파일만 특정 설정을 적용해야 할 때 사용
• 예) .ts파일에만 typescript-eslint/parser 적용

{
  "overrides": [
    {
      "files": "**/*.+(ts|tsx)",
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "extends": ["plugin:@typescript-eslint/recommended"]
    }
  ]
}

2.9 plugins

• ESLint에서 제공하는 규칙 이외의 추가적인 규칙을 사용할 수 있도록 해준다.
• ESLint는 기본적으로 순수 자바스크립트 코드만 체크할 수 있는데 타입스크립트를 체크하기 위해 @typescript-eslint 플러그인을 설치해 사용할 수 있다.
• 플러그인을 설치한 후 extends, rules 옵션을 통해서 프로젝트에서 실제로 적용할 수 있다.

{
      "plugins": ["import", "@typescript-eslint"],
}

2.9 extends

• extends 옵션을 통해 다른 사람이 공개해놓은 설정을 그래도 가져와 사용할 수 있다.
• 이번에 사용하고자하는 eslint-config-airbnb도 그 중 하나이다.

{
  "plugins": ["import", "react"],
  "extends": [
    "plugin:import/recommended",
    "plugin:react/recommended"
  ]
}

2.10 rules

• 규칙을 개별적으로 제어하기 위해 사용
• 일반적으로 extends로 적용한 base 규칙에서 특정 규칙들을 덮어쓸 때 사용

{
  "extends": ["react"],
  "rules": {
    "no-console": "error",
  }
}

2.11 .eslintrc.json 작성

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": "latest"
  },
  "extends": ["eslint:recommended"], //eslint가 제공하는 기본 설정
  "plugins": [],
  "rules": {},
  "ignorePatterns": ["dist", "node_modules"]
}

---

3. Airbnb 설정 적용하기

https://www.npmjs.com/package/eslint-config-airbnb

3.1 설치 및 적용

• eslint-config-airbnb 설치하기

npm i -D eslint-config-airbnb

• extends 옵션에 airbnb-base 추가하기
• airbnb vs airbnb-base
  • airbnb-base 옵션은 리액트 관련 설정이 들어 있다.

{
  //...
  "extends": [
    "airbnb-base",
  ],
  //...
}

3.2 eslint-plugin-import 설치

• 위에서 eslint-config-airbnb 를 잘 설치했다면 이런 메시지를 확인할 수 있다.
  

eslint-config-airbnb-base@15.0.0 requires a peer of eslint-plugin-import@^2.25.2 but none is installed. You must install peer dependencies yourself

• airbnb-base만 사용하니까 eslint-plugin-import를 설치

https://github.com/import-js/eslint-plugin-import#installation

npm i -D eslint-plugin-import

{
  //...
  "extends": [
    "airbnb-base",
    "plugin:import/recommended",
  ],
  //...
}

3.2 잘 동작하는지 확인해보자 !!

• airbnb-base 설정 적용 전 : eslint 에러 뜨지 않음
  
• airbnb-base 설정 적용 후 : airbnb-base에서는 var 대신 const, let을 권장
  

---

4. Typescript 적용하기

4.1 필요한 패키지 설치

npm i 
@typescript-eslint/eslint-plugin 
@typescript-eslint/parser // eslint가 typescript 파일을 파싱할 수 있게 함
eslint-config-airbnb-typescript // airbnb의 typscript 설정

4.2 설정 적용하기

{
  //...
  "extends": [
    "airbnb-base",
    "airbnb-typescript/base", // +
    "plugin:@typescript-eslint/recommended", // +
    "plugin:import/recommended",
    "plugin:import/typescript" // +
  ],
  //...
}

4.3 잘 동작하는지 확인해보자 !!

• 설정 적용 전 : 에러가 아닌 내용을 에러로 평가한다.
  

• 설정 적용 후
  

4.4 overrides 옵션으로 ts파일에서만 관련 린트가 동작하게 하기

{
  //...
  "extends": ["airbnb-base", "plugin:import/recommended"],
  "overrides": [
    {
      "files": "**/*.+(ts)", // ts파일에서만 적용
      "parser": "@typescript-eslint/parser",
      "extends": [
        "airbnb-typescript/base",
        "plugin:import/typescript",
        "plugin:@typescript-eslint/recommended"
      ]
    }
  ],
  //...
}

4.5 overrides 잘 동작하는 확인해보자 !!

• overrides 적용 전 : js파일인데 @typescript-eslint가 동작한다.
  

• overrides 적용 후
  

---

5. 최종 파일 ./eslintrc.json

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": "latest",
    "project": "./tsconfig.json"
  },
  "extends": ["airbnb-base", "plugin:import/recommended"],
  "overrides": [
    {
      "files": "**/*.+(ts)",
      "parser": "@typescript-eslint/parser",
      "extends": [
        "airbnb-typescript/base",
        "plugin:import/typescript",
        "plugin:@typescript-eslint/recommended"
      ]
    }
  ],
  "ignorePatterns": ["dist", "node_modules"]
}

---

참고자료

https://eslint.org/
https://typescript-eslint.io/
https://www.npmjs.com/package/eslint-config-airbnb
https://www.npmjs.com/package/eslint-config-airbnb-typescript
https://github.com/airbnb/javascript
https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/extensions.md
https://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html#21-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90
https://www.daleseo.com/eslint-config/