[React Native] eslint 와 prettier 설정 (+타입스크립트)

처음으로 자바스크립트를 사용하게 되면서 eslint 라는 것을 접하게 되었는데, 아직도 완벽하게 이해는 못하고 있지만 아는 만큼 정리를 해보고자 한다.

 

eslint 란?

코드에 문제가 있는지 알려주는 플러그인이라고 생각하면 되는 것 같은데, eslint 에 의해 나타나는 경고나 에러는 반드시 컴파일 시에 나타나는 에러와 관련이 있지는 않다.

eslint 라는 것은 그래서 프로젝트 내에서 지키고자 하는 규칙과 관련이 있다고 볼 수도 있다고 생각한다.

예를 들자면 리액트에서 함수를 function 으로 선언하도록 eslint 로 정함으로써 const 로 함수 선언 시 에러가 발생하여 규칙을 지키도록 할 수 있다.

 

prettier 란?

코드 포매터 (code formatter) 라고 일컫는 것 같은데, 말 그대로 들여쓰기는 어떤 방식으로 할지, 몇 칸으로 할지와 같은 포맷과 관련되어 규칙을 지키도록 하는 플러그인이다.

처음에는 왜 필요한지 몰랐으나, 왜 자바에는 이런게 없지? 싶을 정도로 편하다.

 

eslint 와 prettier 의 차이점

어떻게 보면 정말 닮은 두 플러그인이지만 차이점은 명확하다.

prettier 는 단순히 코드의 포맷에만 관여하지만

eslint 는 포맷뿐만 아니라 언어나 라이브러리의 문법에도 관여한다는 점이다.

eslint 도 포맷에 관여한다는 부분에서 prettier 와 eslint 는 겹치는 부분이 존재하게 되는데,

이 부분은 eslint 플러그인 중에서 코드 포맷팅 기능을 무시하는 플러그인이 있어서 설치하면 문제없이 사용가능하다.

 

근데 여기서 의문인 점은 이전에 vue 로 작업 시에는 prettier 는 사용하지 않고 eslint 만으로 설정해서 코드 포맷팅까지 설정했는데,

리액트는 왜 대부분의 블로그에서 eslint 와 prettier 를 같이 사용하도록 설명하고 있는지는 잘 모르겠다.

vue 는 <template> 태그를 이용함으로써 자바스크립트 문법과 달라서 그런 것인지, 확장자가 vue 라서 그런 것인지...

나중에 알아봐야겠다.

 

eslint 와 prettier 설정

여러 방법들이 있었지만, 나는 airbnb 에서 만든 eslint 설정을 사용하고자 한다.

 

플러그인 목록

1. eslint

- 말그대로 eslint 플러그인이다. 리액트 네이티브 프로젝트 만들 때 처음부터 설치되어 있지만 그냥 최신버전으로 설치한다.

2. @typescript-eslint/parser

- 타입스크립트에서 eslint 를 사용하도록 변환해 주는 parser 라고 한다. 필수.

3. @typescript-eslint/eslint-plugin

- 타입스크립트 사용 시 적용되는 rule 들이 포함되어 있는 플러그인이다. rule 은 아래에서 설명하겠다.

4. eslint-config-airbnb

- airbnb 에서 사용하는 eslint rule 이 설정되어 있는 플러그인이다.

- 설치 시 peerdependency 가 함께 설치되도록 한다. 포함된 플러그인으로는 이와 같은 것이 있다.

• eslint
• eslint-plugin-import
• eslint-plugin-jsx-a11y 
• eslint-plugin-react
• eslint-plugin-react-hooks 

5. eslint-config-airbnb-typescript

- airbnb eslint 를 타입스크립트에서 사용하고자 할 때 필요한 플러그인이다.

6. prettier

- prettier 또한 처음에 설치되어 있지만 최신버전으로 다시 설치해 준다.

7. eslint-plugin-prettier

- prettier 에서 정한 rule 에 어긋난 것을 eslint 에러로서 나타나도록 해주는 플러그인이다.

8. eslint-config-prettier

- eslint 의 formatting rule 을 모두 꺼서 prettier 와의 충돌을 방지한다.

 

모두 개발 의존성으로 설치하고 prettier 는 --exact 명령어 없이 설치 시 beta 버전이 설치되는 경우가 있어서 반드시 붙여준다.

처음에 저걸 몰라서 한참 헤맸던 기억이...

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

npx install-peerdeps -D eslint-config-airbnb

yarn add -D eslint-config-airbnb-typescript

yarn add -D prettier --exact

yarn add -D eslint-config-prettier eslint-plugin-prettier

 

설치만 해준다고 끝이 아니고 이제 설정을 해주어야 한다.

리액트 네이티브 프로젝트를 생성했다면 처음부터 .eslintrc.js 와 .prettierrc.js 파일이 존재할 텐데 없다면 만들어주면 된다.

나는 js 파일로 사용하면 eslint 에 걸리거나 하는 등 귀찮은 일들이 생겨서 그냥 json 으로 바꿔서 사용한다.

.eslintrc.js 와 .eslintrc.json 파일이 같이 존재한다면 js 파일이 우선순위가 높은 것으로 알고 있다.

 

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "env": {
    "node": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
  }
}

eslintrc 파일 설정 때문에 블로그를 30개는 본 것 같은데 별별 설정들이 많이 있다.

하지만, 이 정도 설정으로도 문제없이 잘 사용하고 있다.

물론 rules 은 그때그때 불편하면 추가하면서 사용하고 있다.

여기서 extends 와 rule 의 차이와, 다른 글들을 참고하면 plugins 라는 항목에 이것저것 들어있는데 여기는 없음이 궁금할 수 있다.

 

1. plugins

- rules 의 목록을 정의해 놓은 것이라고 생각하면 된다.

2. extends

- rules 들에 대해서 규칙을 정의해 놓은 것을 상속? 받아서 이용한다고 생각하면 된다.

3. rules

- plugins 에 들어있는 규칙들에 대해서 무시할 건지, 경고를 나타낼 건지, 에러를 나타낼건지 혹은 더 세부적인 설정을 할 것인지를 작성하는 곳이다.

 

내 설정대로면 plugins 가 없는데 어떻게 rules 를 정의할 수가 있냐고 생각할 수 있는데, extends 를 넣게 되면 해당하는 extend 마다 사용하는 plugin 이 자동으로 입력이 되고, 해당하는 rules 가 정의가 된다고 생각하면 된다.

 

또한 extends 보다 rules 가 우선순위가 높기 때문에 사용하다가 불편한 rule 은 rules 에 정의함으로써 규칙을 덮어쓸 수 있다.

 

rules 예시

나와 같이 설정한다면 기본적으로 컴포넌트 선언 시 function 이 아닌 arrow function 이면 에러가 발생하도록 되어있다.

나는 arrow function 을 사용할 것이기 때문에 아래와 같이 rule 을 override 하였다.

  "rules": {
    "react/function-component-definition": [
      "error",
      {
        "namedComponents": "arrow-function"
      }
    ],
  }

사용하면서 불편한 규칙은 에러를 잘 보면 뒤에 규칙명이 나와있는데 해당 규칙을 검색해서 다른 사람들은 어떻게 설정했나 참고하면 된다.

 

.prettierrc.json

{
  "arrowParens": "avoid",
  "singleQuote": true,
  "printWidth": 100,

  // default value
  "bracketSameLine": false,
  "semi": true,
  "bracketSpacing": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "endOfLine": "lf"
}

https://prettier.io/docs/en/options

주로 사용할 것 같은 설정만 작성해 놓았다. 모든 설정을 보고 싶으면 위에 들어가면 잘 설명되어 있다.

 

prettier 옵션 설명

• arrowParens
  • 화살표 함수 사용 시 파라미터가 하나인 경우 괄호 생략이 가능한지 설정
  • 기본값 - always (생략 불가) / avoid (생략 가능)

 

• singleQuote
  • 홑 따옴표 사용 여부
  • 기본값 - false (쌍 따옴표 사용) / true (홑 따옴표 사용)

 

• printWidth
  • 해당 넓이를 넘어가면 줄 바꿈 실행
  • 기본값 - 80

 

• bracketSameLine
  • 태그 속성 값이 길어져서 줄바꿈이 일어났을 때 닫는 괄호를 개행 후 작성되도록 설정

 

• semi
  • 마지막에 무조건 세미콜론 작성

 

• bracketSpacing
  • 중괄호 및 소괄호 맨 앞과 맨 뒤에 공백이 생기도록 설정

 

• tabWidth
  • 탭 간격 설정

 

• useTabs
  • 탭 간격을 스페이스 바에 의한 간격이 아닌 탭 간격으로 사용

 

• trailingComma
  • 객체에서 마지막 항목 뒤에도 comma 가 항상 있도록 설정

 

• endOfLIne
  • 기본 설정이 windows 는 crlf 이고 다른 os 는 lf 여서 통일시켜주기 위해 있는 설정으로 알고 있다.

 

 

package.json

{
...
  "scripts": {
    ...
    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
    "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
    ...
  }
...
}

src 폴더 내부의 파일만 검사하도록 lint 명령어 설정

 

인텔리제이에서 저장 시 자동 적용되도록 하기

eslint 는 저장 시 실행되지 않도록 하고 사용해도 되지만 나는 이게 편해서 사용하고 있다.

경로를 src 내부로 지정하여 사용하면 더 좋을 것 같다.

 

prettier 는 안 사용하면 일일이 fix를 해줘야 하는 번거로움이 강하고 사용했을 때 편리함과 쾌감이 정말 좋기 때문에 꼭 사용해야 한다.