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

4탄: 일관된 코드 포맷팅을 위한 Prettier를 설정하고, ESLint와 통합하기

---

1. Prettier

Prettier is an opinionated code formatter with support for:
JavaScript (including experimental features), JSX, Angular, Vue, Flow, TypeScript ,CSS, Less, and SCSS ...

https://prettier.io/docs/en/index.html

• 프리티어는 JavaScript, TypeScript, CSS 등을 지원하는 독선적인? 코드 포맷터이다.
  • opinionated(독선적인)의 의미는 아마도 프리티어는 일관적인(지정한) 코드 스타일을 강제하는 것을 의미하는 것 같다.
• 코드의 기존 스타일을 전부 제거하고 출력된 모든 코드가 일관된 스타일을 따르도록 한다.
• 프리티어는 코드를 자체 규칙으로 분석하고 분석된 코드를 다시 프린트한다.

• 내가 생각했을 때 Prettier의 장점은
  • 일관된 코드 포맷팅을 위한 노력을 줄여준다. 코드 포맷터가 없다면 코드를 작성하는 중간중간 계속 포맷팅을 직접 챙겨야한다. 이건 상당히 귀찮은 일이고, 100% 정확성을 장담할 수 없다.
  • 일관된 코드 포맷팅으로 협업을 도와준다. 같은 코드 포맷팅 옵션을 사용한다고 해도 동료의 코드를 보고 이해하는 것은 쉽지 않다. 만약 모두가 각자의 스타일로 코드를 작성한다면 동료의 코드를 이해하는데 훨씬 더 많은 시간이 걸릴 것이다.
  • 코드 스타일 가이드를 제시해준다. 프리티어는 기본 값으로 가이드를 제시해준다. 협업의 경험을 돌이켜보면 프리티어에서 제공하는 기본 가이드를 대부분 이견없이 따르고, 일부 옵션들을 결정하기 위해 논의를 했던 기억이 있다. 이 몇 안되는 옵션을 정하는 것도 꽤 시간이 걸렸는데 전체 스타일 가이드를 처음부터 만든다고 생각하면 아찔하다.

---

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

2.1 Prettier 설치

• 설치 후 설정 파일 .prettierrc.json를 생성한다.
• singleQuote, arrowParens 두 가지 옵션만 별도로 지정했음

npm i -D prettier

// .prettierrc.json
{
  "singleQuote": true,
  "arrowParens": "avoid"
}

기본적인 몇 가지 옵션만 글에서 소개하겠습니다. 자세한 옵션 내용은 공식 문서를 확인해주세요.

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

2.2 singleQuote

Use single quotes instead of double quotes.

https://prettier.io/docs/en/options.html#quotes

• 개인적으로 single quotes가 double quotes 보다 더 보이게 깔끔해보이기 이유로 사용. 기능에 영향이 전혀 없어서 부담 없이 설정했다.

  "singleQuote": true, // default: false

2.2 arrowParens

Include parentheses around a sole arrow function parameter.

https://prettier.io/docs/en/options.html#arrow-function-parentheses

• always(default) - Always include parens. Example: (x) => x
• avoid - Omit parens when possible. Example: x => x
• v2.0.0 부터 default가 avoid에서 always로 변경됐다.

{
  "arrowParens": "avoid"
}

2.3 Semicolons

Print semicolons at the ends of statements.

https://prettier.io/docs/en/options.html#semicolons

• true(default) - Add a semicolon at the end of every statement.
• false - Only add semicolons at the beginning of lines that may introduce ASI failures. https://prettier.io/docs/en/rationale.html#semicolons

커뮤니티에서 자바스크립트 코드 작성 시 세미 콜론 사용 여부에 대한 논쟁을 쉽게 찾아볼 수 있다. 관련 내용이 정리된 블로그 글을 첨부한다.

"
1. 자바스크립트는 구문구분 시 세미콜론을 넣어야 한다
2. 세미콜론을 넣지 않을 때 인터프리터가 자동으로 넣어준다.
3. 자동으로 넣어줄 때 오류가 생길 예외사항에 대해 과거에 많은 사람이 세미콜론을 강제했다.
4. 인터프리터의 과정을 이해하여 코딩할 경우 세미콜론이 없어도 충분히 예외사항이 생기지 않는다.
5. 인터프리터의 과정에 따라 코딩스타일이 정립된다면 세미콜론을 강제할 필요가 없다.
6. 하지만 여전히 논쟁거리
"
https://okayoon.tistory.com/entry/자바스크립트-세미콜론-꼭-써야하나요 [Zzolab Blog :):티스토리]

• 개인적으론 세미콜론을 붙이는 방식을 선호한다. 그 이유는
  • 일단 구문마다 세미콜론을 붙이는 것이 기본 규칙이다.
  • 세미콜론을 사용하지 않아 생기는 문제를 애초에 막고 싶다. 문제가 발생하는 예외 상황들을 코드 작성시 인식하고 있기 보다 애초에 해당하는 문제가 발생할 수 없는 환경에서 코드를 작성하고 싶다.

3. ESLint와 통합하기

• ESLint도 코드 코맷팅 기능을 지원한다. 그래서 Prettier를 같이 쓰게되면 충돌을 할 수 있다. 그래서 ESLint의 코드 코맷팅 기능을 꺼서 해당 기능은 오롯이 Prettier가 담당하게 해야한다.
• ESLint에서 플러그인을 사용해 lint 동작시 prettier도 같이 동작하게 통합할 수 있다.

3.1 설치 및 적용

npm i -D eslint-config-prettier eslint-plugin-prettier

• eslint-config-prettier :
  • Turns off all rules that are unnecessary or might conflict with Prettier.
  • https://github.com/prettier/eslint-config-prettier
• eslint-plugin-prettier :
  • Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
  • https://www.npmjs.com/package/eslint-plugin-prettier

// .eslintrc.json
{
  ...
  "extends": [
    "airbnb-base",
    "plugin:import/recommended",
    "plugin:prettier/recommended" // 한 줄 축약형, eslint에서 prettier 관련 기능을 끄고, prettier 오류를 lint의 rule로 적용해 lint 오류로 보여줌
  ],
  ...
}

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

설정 적용 전 : eslint에서 제공하는 코드 포맷팅 기능이 작동함. 프리티어와 각각 동작 중

• eslint가 포맷팅 관련 오류를 잡는 중
  

• prettier의 arrowParens적용된 코드를 eslint가 오류로 잡는다.
  

설정 적용 후 : prettier의 rule 사용

---

4. 최종 파일 .prettierc.json, .eslintrc.json

• .prettierc.json

{
  "singleQuote": true,
  "arrowParens": "avoid"
}

• .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",
    "plugin:prettier/recommended"
  ],
  "overrides": [
    {
      "files": "**/*.+(ts)",
      "parser": "@typescript-eslint/parser",
      "extends": [
        "airbnb-typescript/base",
        "plugin:import/typescript",
        "plugin:@typescript-eslint/recommended"
      ]
    }
  ],
  "ignorePatterns": ["dist", "node_modules"]
}

---

참고자료

https://prettier.io/docs/en/index.html
https://prettier.io/docs/en/options.html
https://github.com/prettier/eslint-config-prettier
https://www.npmjs.com/package/eslint-plugin-prettier