[RTK] Typescript todoList 만들기 (5) - eslint, prettier 적용해보기- 1

※ 해당글은 약간의 시행착오가 있어 모든 포스팅이 완료 된 후 따라해주세요.

[RTK] Typescript todoList 환경에 eslint, prettier 적용하기 - 1

 

 

내가 만드는 TodoList 앱 RTK + Typescript 환경에 ESLint와 Prettier를 적용해 보겠다.

 

ESLint?

ESLint

ESLint는 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 정적 코드 분석 도구이다.

코드의 일관성을 높여주고 버그를 방지하는 것이 주목적이다.

쉽게 말하면 코드의 규칙을 적용하여, 문제를 사전에 방지할 수 있도록 하는 툴이다. 

규칙을 커스텀할 수 도 있다.

 

https://eslint.org/

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

 

타입 스크립트 ESLint 설정은 다음과 같은 사이트에서 설명을 볼 수 있다.

https://typescript-eslint.io/docs/

Getting Started | TypeScript ESLint

 

 

---

1. ESLint 설치하기

 

다음과 같은 패키지들을 설치한다.

 

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

 

패키지들을 설명하자면 다음과 같다.

- eslint : ESlint 패키지 설치

- @typescript-eslint/parser : 타입 스크립트에서 ESLint를 사용할 수 있게 파싱 해준다.

- @typescript-eslint/eslint-plugin : 타입 스크립트 코드 베이스에 대한 Lint 규칙을 제공하는 ESLint 플러그인이다.

 

 

---

2. project root 경로에. eslintrc 파일을 만든다.

 

 

프로젝트 루트 경로에 .eslintrc 파일을 생성하고 다음과 같이 작성한다.

타입 스크립트 문서를 보면. eslintrc.cjs로 예제가 나와있는데. js로 작성하여도 무방하다. 

ESLint는 여러 형식의 설정 파일을 지원하며. js,. cjs,. yaml,. yml,. json, package.json에서도 설정이 가능하다. 

동일한 경로에 여러 설정 파일이 있을 경우 우선순위는 위에서 나열한 대로 읽는데 단 하나의 파일만 읽을 수 있다.

 

. eslintrc

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
      "@typescript-eslint/rule-name": "error"
  }
}

설정한 코드를 차례대로 보면

- parser : @typescript-eslint/parser를 적용해 준다.

- plugin : 앞에서 설치한 plugin을 적용함.

- extends :  "eslint:recommended" ESLint에서 추천하는 설정을 사용할 수 있다.

"plugin:@typescript-eslint/recommended" 타입 스크립트 esLint 권장 규칙을 사용한다.

- root : true로 설정하지 않으면 상위 폴더까지 탐색하기 때문에 설정해준다.

 

---

3. . eslintignore 파일 생성

.eslintignore 파일을 만들고 무시할 파일을 설정해준다. gitignore와 같은 기능을 한다고 생각하면 된다.

 

.eslintignore

node_modules
dist

 

실행해보기 

 

다음의 명령어로 실행을 한다.

 

npx eslint . --ext .js,.jsx,.ts,.tsx

 

실행해보면 다음과 같은 문제들이 내 프로젝트에 존재하는 것을 확인할 수 있다.

현재 오류는 아직 내 프로젝트의 규칙들을 esLint가 읽어올 수 없어서 나는 오류이다.

마저 설정하도록 하자.

 

---

4. eslint-config-airbnb-typescript

React를 사용하기 위해서는 airbnb 규칙들을 가져와서 사용해야 한다. 

그때 사용하는 라이브러리이다.

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

eslint-config-airbnb-typescript

라이브러리에 base가 따로 있는데 base는 React를 사용하지 않을 때 사용하면 된다.

 

 

다음의 명령어로 설치한다.

 

npm i eslint-config-airbnb-typescript

 

여기서 eslint-config-airbnb 가 의존하는 라이브러리들도 같이 설치해준다.

의존하는 라이브러리는 다음과 같은 명령어로 볼 수 있다.

 

npm info eslint-config-airbnb peerDependencies

 

나는 다음과 같이 나타났다.

다음의 명령어로 설치해준다.

npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hook

 

적용을 하고

npx eslint .

명령어로 실행을 해보니 다음과 같은 오류가 나타났다.

한참을 삽질하다가...

1:1번 줄의 내용은 React 17 버전 이후로 오면서 import react from 'react'가 사용할 필요가 없어서 그렇다는데

좀 더 찾아봐야겠다. 

 

 

다음 포스팅에 이어서 작성하며 적용을 해봐야겠다.

오류가 나는 에러를 하나하나 보면서, ESLint와 tsconfig.json의 내용을 좀 더 알아보고 설정 코드를 수정해야겠다.