[React] React에서 Typescript + ESLint(Airbnb) + Prettier 적용하기

1. ESLint란

코드를 실행하기 전에 코드를 분석해 문법적인 오류나 안티 패턴을 찾아 잠재적 위험요소를 사전에 방지하고, 일관된 코드 스타일로 작성할 수 있도록 도와주는 코딩 컨벤션이다.

코딩 컨벤션: 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(작성 표준)이다. 

ESLint 특징

• 직접 코드 규칙(rules)을 설정할 수 있으며 규칙을 어긴 코드에는 error 또는 warnig을 발생시킬 수 있다.
• airbnb esLint와 같이 큰 기업에서 사용하는 코딩 스타일 가이드를 적용할 수 있다.

팀 프로젝트를 진행하다 보면 팀원 간 각자의 코딩 스타일이 다르다.

세미콜론을 사용하는 사람과 사용하지 않는 사람, 조건문 사용 시 중괄호를 사용하는 사람과 사용하지 않는 사람 등

ESLint로 코딩 컨벤션을 설정하면 위와 같은 상황을 줄일 수 있다.

ES Lint 장점

• 일관된 코딩 스타일로 코드 유지보수 및 가독성 향상
• 잠재적인 버그 감소

2. Prettier란

개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해 주는 코드 포맷터(Code Formatter)이다.

ESLint와 Prettier의 차이

ESLint는 문법 에러나 설정한 룰과 맞지 않는 코드를 검사하고 알려주기 위한 툴이라면,

Prettier은 설정한 코딩 스타일에 맞게 코드를 일괄적으로 바꿔주는 역할을 한다. (예를 들어 코드의 한 줄 길이나, 세미콜론 여부 등의 설정을 해준다.)

3. 프로젝트 적용하기

1) 프로젝트 생성

먼저 적용할 프로젝트를 생성한다. 본인은 CRA + Typescript 프로젝트로 생성했다.

# yarn
yarn create react-app myapp --template typescript
# npm
npx create-react-app myapp --typescript

2) ESLint와 패키지 설치

프로젝트가 생성됐으면 이제 ESLint와 패키지를 설치해 보자!

ESLint는 개발 환경에서만 사용하면 되기 때문에 package.json "devDependencies"에서 관리한다.

# yarn
yarn add -D eslint
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add -D eslint-config-airbnb eslint-config-airbnb-typescript
yarn add -D eslint-config-prettier eslint-plugin-prettier
yarn add -D eslint-plugin-react eslint-plugin-react-hooks
yarn add -D eslint-plugin-jsx-a11y eslint-plugin-import
# ctrl c + v
yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import

# npm
npm i -D eslint
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i -D eslint-config-airbnb eslint-config-airbnb-typescript
npm i -D eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-plugin-react eslint-plugin-react-hooks
npm i -D eslint-plugin-jsx-a11y eslint-plugin-import
# ctrl c + v
npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import

•  eslint  : eslint 설치
•  @typescript-eslint/eslint-plugin  : Typescript 관련 Linting 규칙을 설정하는 플러그인
•  @typescript-eslint/parser  : Typescript용 ESLint 파서이다.
•  eslint-config-airbnb  : airbnb 코딩 규칙을 사용한다. (react)
  • react 외에 다른 곳에서 사용하고 싶다면 eslint-config-airbnb-base 명령어를 사용한다.
• eslint-config-airbnb-typescript :  airbnb TypeScript 지원 
•  eslint-config-prettier  : ESLint의 formatting 관련 설정 중 Prettier와 충돌할 수 있는 모든 규칙을 비활성화한다.
•  eslint-plugin-prettier  : Prettier에서 인식하는 코드 상의 포맷 오류를 ESLint 오류로 출력해 준다.
•  eslint-plugin-react  : React에 대한 lint 설정 지원
•  eslint-plugin-react-hooks  : React Hooks 지원
•  eslint-plugin-jsx-a11y  : JSX 접근성 지원
•  eslint-plugin-import  : ES2015+의 import/export 구문을 지원

3) ESLint 설정

프로젝트 최상위 경로에 .eslintrc.ts 파일을 생성하고 아래와 같이 설정한다.

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  extends: [
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "prettier",
    "plugin:jest/recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
  ],
  plugins: [
    "jest",
    "prettier",
    "@typescript-eslint",
    "react",
    "react-hooks",
    "jsx-a11y",
    "import",
  ],
  rules: {
    "prettier/prettier": ["error"],
    "no-param-reassign": ["error", { props: false }],
  },
};

 env  : 프로젝트의 사용 환경을 설정한다.

 extends  : ESLint의 기본 설정을 확장해서 사용하는 개념이다.

• 대부분의 plugin은 recommended (추천 규칙 적용), all (전체 규칙 적용) 등의 자체 설정을 제공한다. 이렇게 자체 규칙을 사용하면 rules에 따로 규칙을 넣어주지 않아도 된다.

 

 plugins  : eslint에서 제공하지 않는 plugin을 설정할 수 있다.

• 플러그인을 가져오는 것만으로는 아무 일도 일어나지 않는다.
• 설정 방법으로는 rules에 plugin에 대한 규칙을 일일이 적용하는 방법과, extends에 설정해서 한 번에 적용하는 방법이 있다. (recommended, all 등)

 

 rules  : 규칙을 직접 설정할 수 있다.

• "off" : 규칙을 사용하지 않음
• "warn" : 규칙을 경고로 사용
• "error" : 규칙을 오류로 사용

4)  Prettier 설치

# yarn
yarn add -D prettier
# npm
npm i -D prettier

5)  Prettier 설정

.prettierrc.json 파일을 생성한다.

prettier문서에서 원하는 옵션을 찾아 설정해 주도록 하자.

{
  "semi": true, // 구문에 세미콜론
  "printWidth": 80, // 오른쪽으로 열 갯수
  "singleQuote": true, // 홀따옴표
  "useTabs": false, // 공백 대신 탭을 사용하여 줄을 들여쓰는 옵션
  "tabWidth": 2, // 들여쓰기 기본 폭
  "trailingComma": "all",
  "arrowParens": "always" // 항상 괄호를 포함 예시:(x) => x
}

6) VS Code Prettier 익스텐션 설치 및 설정

prettier을 명령어가 아닌 저장 시 바로 적용할 수 있도록 VSCode에서 설정해주도록 한다.

설치가 완료됐으면 자동 저장을 위해 설정을 해야 하는데 설정 창 단축키는

Windows, Linux에서는 Ctrl + ,

Mac에서는 Cmd + , 이다.

 

설정창에 들어와서 아래 format on save를 검색 후 해당 설정을 체크해 주면 적용이 완료된다.

 

2023-01-11 추가

어느 날부터 Prettier가 적용 안 되는 문제가 있었다

설정창에 들어와서 default formatter을 검색한다.

Default Formatter 항목이 None으로 되어 있을 텐데 'Prettier - Code formatter enbenp.prettier-vscode'으로 수정해 준다.