1. Prettier

1) Prettier 란?

Code Formatter 의 한 종류로써, 정해진 규칙에 따라 코드 스타일을 통일 시켜주는 툴이다.

후술할 ESLint 와의 차이점은, ESLint 는 JavaScript에 한정된 Code Formatter 라면, Prettier 는 전체 코드 스타일을 다루는 Code Formatter 이다.

2) 설치

🔔 참고) React Native v0.71.7 기준 cli로 설치하면 기본적으로 prettier 가 설치되어 있다.

$ yarn add prettier -D

만일 본인이 VSCode 를 사용한다면 Prettier Extension 을 사용하는 것을 적극 권장한다.
Prettier Extension 은 파일을 저장할 때, prettier --write 명령어가 실행되어 규칙에 맞게 자동으로 수정이 되는 편리한 VSCode 플러그인이다.

설치가 끝났다면 VSCode에서 cmd + , 를 눌러 설정파일을 열고 settings.json을 검색 후 settings.json 파일에 다음과 같이 수정한다.

{
  ...
  "editor.formatOnSave": true,
  ...
}

3) 기본 설정

프로젝트의 root에서 .prettierrc 를 생성한다. (.prettier.js , .prettier.json 도 사용한다.)

아래 설정 코드를 확인하며 입맛에 맞게 설정한다.

{
  /**
   * @template: bracketSpacing: <'always'| 'avoid'>
   * 화살표 함수가 하나의 매개변수를 받을 때 괄호 사용여부
   * always : 괄호 사용
   * avoid : 괄호 제거
   */
  "arrowParens": "avoid",
  /**
   * @template: jsxBracketSameLine: <bool>
   * @description: ">" 다음 줄에 혼자 있는 대신 여러 줄 JSX 요소를 마지막 줄 끝에 넣습니다
   * true: 줄넘김하지 않음
   * false: 줄넘김을 수행
   */
  "bracketSameLine": true,

  /**
   * @template: bracketSpacing: <bool>
   * @description: 개체 리터럴에서 대괄호 사이의 공백을 넣을지 여부
   * true: 공백을 넣음 { foo: bar }
   * false: 공백을 제외 {foo: bar}
   */
  "bracketSpacing": true,
  /**
   * @template: trailingComma: "<es5|none|all>"
   * @description: 객체나 배열을 작성하여 데이터를 넣을때, 마지막에 후행쉼표를 넣을지 여부
   * es5: 후행쉼표 제외
   * none: 후행쉼표 없음
   * all: 후행쉼표 포함
   */
  "trailingComma": "all",
  /**
   * @template: singleQuote: <bool>
   * @description: 큰따옴표("") 대신 작은따옴표('') 사용여부
   * true: 홀따옴표로 사용
   * false: 큰따옴표로 사용
   */
  "singleQuote": true,
  /**
   * @template: semi: <bool>
   * @description: 명령문의 끝에 세미콜론(;)을 인쇄합니다.
   * true: (;)를 추가함
   * false: (;)를 지움
   */
  "semi": true,
  /**
   * @template: useTabs: <bool>
   * @description: 탭 사용 여부
   */
  "useTabs": false,
  /**
   * @template: tabWidth: <int>
   * @description: 들여쓰기 너비 수
   */
  "tabWidth": 2,
  /**
   * @template: printWidth: <int>
   * @description: 코드 한줄 너비
   */
  "printWidth": 120,
  /**
   * @description: EoF 방식
   */
  "endOfLine": "auto",
}

4) 추가 설정

후술 할 ESLint 와 함께 사용하기 위해 추가적으로 설치할 패키지가 존재한다.
아래 명령어를 통해 설치하자

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

각 패키지는 다음과 같은 역할을 한다.

• "eslint-config-prettier" : ESLint 와 Prettier 사이의 겹치는 포맷팅 룰을 삭제한다.
• "eslint-plugin-prettier" : ESLint 에 Prettier 의 포맷팅 규칙을 추가할 수 있도록 도와준다. (Prettier에서 인식하는 포맷 오류를 ESLint 오류로 출력하기 위함)

즉, "eslint-config-prettier" 로 ESLint 의 포맷팅 기능을 없애고, "eslint-plugin-prettier" 로 Prettier 의 포맷팅 기능을 사용한다.

이렇게 해야지만 코드 스타일은 ESLint 로 가져가면서 동시에 포맷팅은 Prettier 를 사용할 수 있는 것이다.

다음은 .eslintrrc 관련 파일에 다음 커맨드를 추가하여 "eslint-plugin-prettier" 을 동작시킨다.

# .eslintrc.json
{
  ...
  "extends": [..., "plugin:prettier/recommended"],
  "plugins": [..., "prettier"],
  "rules": {
    ...
    "prettier/prettier": "error"
  }
}

---

2. ESLint

1) ESLint 란?

ES(EcmaScript) + Lint(에러 코드 표식) 합성어로 JavaScript 코드를 분석하고 코드 스타일을 통일하도록 도와주는 툴이다.

2) 설치

🔔 참고) React Native v0.71.7 기준 cli로 설치하면 기본적으로 eslint 가 설치되어 있다.

$ yarn add eslint -D

동일하게 VSCode 를 사용하고 있다면 ESLint Extension 을 사용하는 것을 적극 권장한다.
ESLint Extension 은 파일을 저장할 때, eslint --fix 명령어가 실행되어 규칙에 맞게 자동으로 수정이 되는 편리한 VSCode 플로그인이다.

3) 기본 설정

설치 후 아래 명령어를 실행한다.

$ yarn eslint --init

실행하면 @react-native-community/eslint-config 를 설치하냐는 문구가 나오면 설치한다.

설치가 완료되면 아래와 같은 설정 화면을 만날 수 있다.

1. 문법 체크, 자동 수정 등을 설정을 묻는다.

? How would you like to use ESLint? (Use arrow keys)
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

2. 주로 import/export 를 사용하므로 첫 번째를 선택한다.

? What type of modules does your project use? (Use arrow keys)
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

3. React Native 는 당연히 React 기반이기 때문에 React를 선택한다.

? Which framework does your project use? (Use arrow keys)
❯ React
  Vue.js
  None of these

4. TypeScript 는 필수기 때문에 Yes를 선택한다.

? Does your project use TypeScript? (y/N)

5. React Native 는 Node 로 운영된다.

? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◯ Browser
❯◉ Node

6. .eslintrc 파일이 어떤 스타일 가이드를 따를지 선택하는 화면이다. .js 는 RN에서 에러가 나므로 본인은 .json 으로 선택했다.

? What format do you want your config file to be in? (Use arrow keys)
  JavaScript
  YAML
❯ JSON

7. 패키지 매니저를 묻는다. 본인은 yarn 을 사용한다.

? Which package manager do you want to use? …
  npm
❯ yarn
  pnpm

4) 추가 설정

📌 본인이 airbnb style guide 또는 google style guide 등을 따르길 원하면, 일일이 커스터마이징하여 사용하는 이 추가 설정은 스킵해야 한다. airbnb style guide를 따르고 싶다면 아래 3번 항목을 참고하자!

지금까지는 기본적인 설정이었다면, 지금부터는 React 기반의 코드와 TypeScript 에 맞춘 상세 설정을 설명한다.

먼저, 아래와 같이 설정에 필요한 추가 플로그인을 설치하자.
(상기 설정에서 일부 라이브러리를 추가 설치하겠냐고 묻는 메시지가 나왔고 이미 설치했다면, 그 라이브러리는 빼도 된다.)

$ yarn add eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react-hooks eslint-plugin-import -D

추가한 패키지에 대한 설명은 다음과 같다.

• "eslint-plugin-react" : React 코드에서 일반적인 오류와 관행을 식별하는 플러그인
• "@typescript-eslint/eslint-plugin" : TypeScript 룰 모음집
• "@typescript-eslint/parser" : TypeScript 코드를 검사 및 분석하고 파싱하기 위한 플러그인
• "eslint-plugin-react-hooks" : React Hooks 규칙을 검사하고 검증하는 데 사용되는 플러그인
• "eslint-plugin-import" : ES6+의 import/export 문법과 파일 경로 및 파일명이 제대로 입력되었는지를 체크해주는 플러그인

---

3. airbnb style guide

1) 설치

본인은 airbnb style guide 에 따라 코드 스타일을 맞출 것이기 때문에 필요한 라이브러리를 함께 알아보자.
필요한 dependencies 들을 알아보기 위해 다음과 같은 명령어를 실행해보자.

$ yarn info eslint-config-airbnb peerDependencies

v19.0.4 기준 다음과 같은 리스트를 보여주었다.

{
  eslint: '^7.32.0 || ^8.2.0',
  'eslint-plugin-import': '^2.25.3',
  'eslint-plugin-jsx-a11y': '^6.5.1',
  'eslint-plugin-react': '^7.28.0',
  'eslint-plugin-react-hooks': '^4.3.0'
}

의존성 패키지들의 역할은 다음과 같다.

• "eslint-plugin-import" : ES6+의 import/export 문법과 파일 경로 및 파일명이 제대로 입력되었는지를 체크해주는 플러그인
• "eslint-plugin-jsx-a11y" : JSX 엘리먼트의 접근성 관련 규칙을 체크해주는 플러그인
• "eslint-plugin-react" : React 코드에서 일반적인 오류와 관행을 식별하는 플러그인
• "eslint-plugin-react-hooks" : React Hooks 규칙을 검사하고 검증하는 데 사용되는 플러그인

하지만 위 airbnb 설정은 JavaScript 를 위한 용도이다.
따라서 우리는 TypeScript 를 위한 설정을 위해 추가적인 다운로드가 필요하다.

$ yarn info eslint-config-airbnb-typescript peerDependencies

v17.1.0 기준 다음과 같은 리스트를 보여주었다.

{
  eslint: '^7.32.0 || ^8.2.0',
  '@typescript-eslint/eslint-plugin': '^5.13.0 || ^6.0.0',
  '@typescript-eslint/parser': '^5.0.0 || ^6.0.0',
  'eslint-plugin-import': '^2.25.3'
}

겹치는 것이 몇 개 보인다.
역할은 다음과 같다.

• "@typescript-eslint/eslint-plugin" : TypeScript 룰 모음집
• "@typescript-eslint/parser" : TypeScript 코드를 검사 및 분석하고 파싱하기 위한 ESLint 플러그인

2) .eslintrc 적용

설치가 끝났으니 본격적으로 .eslintrc 파일에 적용해보자 (본인은 .eslintrc.json 으로 생성했다.)

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "extends": [
    "prettier",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "react", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

위 .eslintrc.json 파일의 내용은 앞서 설명한 prettier 설정을 포함한 기본적인 포맷임을 알린다.

각 Key 값의 의미는 다음과 같다.

• "env" : 프로젝트의 사용 환경을 설정
• "settings" : 플러그인의 추가적인 설정이 필요할 때 사용된다.
  • import/resolver 에 주목해보자. 배열 안의 확장자는 import 시 굳이 선언하지 않아도 에러로 표시하지 않겠다는 설정이다.
• "extends" : ESLint의 기본 설정을 확장해서 사용하는 개념.
  • 대부분의 plugin은 recommended (추천 규칙 적용), all (전체 규칙 적용) 등의 자체 설정을 제공한다.
  • 이렇게 자체 규칙을 사용하면 "rules" 에 따로 규칙을 넣어주지 않아도 된다.
• "plugins" : ESLint에서 제공하지 않는 plugin을 설정할 수 있다.
  • 플러그인을 가져오는 것만으로는 아무 일도 일어나지 안흔ㄴ다.
  • 설정 방법으로는 rules에 plugin에 대한 규칙을 일일이 적용하는 방법과, extends에 설정해서 한 번에 적용하는 방법이 있다. (recommended, all 등)
• "rules" : 여기서 원하는 규칙을 직접 설정할 수 있다. extends 옵션을 통해서 가져온 규칙보다 우선 순위가 높다.
  • "off" : 규칙을 사용하지 않음
  • "warn" : 규칙을 경고로 사용
  • "error" : 규칙을 오류로 사용