prettier 2.0 에서 달라진 옵션 살펴보기

Published in

Jung-han

6 min readMay 29, 2020

prettier 2.0은 두 달 전(2020.3) 정식 릴리즈되었습니다. 바로 적용을 하려다 조금 기간을 두고 적용하자는 의견이 있어 쪼-금 두고 봤습니다. 두 달 정도 시간이 지나 Chart 4.0 개발에 Prettier2.0을 적용했고, 이전과 달라진 점을 간단하게 달라진 점을 정리해봤습니다.

Prettier는?

Prettier는 코드 포맷팅 도구입니다. 자바스크립트나 JSX, Vue, Angular, HTML, CSS 부터 마크다운 등등 여러 스타일의 코드를 자동으로 포맷팅 해줍니다.

위 처럼 작성된 코드를 살펴보면 어떤가요? ‘길다’ 라는 느낌이 드시나요? Prettier는 아래처럼 일관된 코드 스타일을 자동으로 적용하기 위해 사용하는 도구입니다.

FE개발랩에서는 꽤 오래전부터 ESLint와 함께 Prettier를 사용하며 일관된 코딩스타일을 추구하기 위해 노력하고 있습니다. 논쟁이 있을법한 여러 가지 스타일을 Prettier에 맡기며 한 사람이 작성한 것처럼 코드 스타일을 유지할 수 있게 되었고 가독성이 많이 올라갔었습니다.(혹시 아직 적용 하지 않았다면 적용하는 것을 추천합니다! 꽤 많은 스타일 논쟁을 줄일 수 있습니다.)

그럼 이제 2.0에서 달라진 점을 살펴보겠습니다. 모든 내용을 살펴보진 않고 옵션에서 달라진 내용을 살펴보려고 합니다.

2.0에서 달라진 점(breaking change)

링크: https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes

1. Prettier Dot(`.`) 설정 파일이 override 가능해집니다.

2. Node 10 버전 이전 지원은 중단되었습니다.

3. `trailingComma` default를 `none`에서 `es5`로 변경

기존 구형 브라우저(IE8)에서 해당 기능을 제공하지 않아 none으로 처리했지만, git Diff를 좀 더 깨끗하게 유지 할 수 있고 값을 제거할 때 쉽게 제거할 수 있게 되는 등 많은 이점을 놓친것이 아쉬웠다고 합니다. 그래서 v2.0부터 해당 옵션이 디폴트로 들어가게 되었습니다.

4. `arrowParens` default를 `avoid`에서 `always`로 변경

arrowParens는 v1.9.0에서 추가된 내용입니다. 화살표 함수에서 단일 파라미터에 괄호를 붙일지("always") 말지("avoid")에 대한 여부를 결정합니다. 언뜻 보기에 avoid는 시각적으로 깔끔합니다. 하지만, always로 괄호를 항상 넣음으로써 새로운 파라미터를 추가하거나 타입을 추가할 때 더 좋은 사용성을 주게 된다고 판단했습니다. 이러한 부분은 개발자에게 일관된 사용성을 제공한다 판단했고 디폴트값이 변경되게 되었습니다.

5. `endOfLine`의 default를 `auto`에서 `lf`로 변경

기존 파일들의 호환성을 위해 auto로 정의되어 있었습니다. 개행 문자로 인해 git diff과 git blame의 어려움을 제거하고자 lf를 사용하기로 했다고 합니다. lf로 강제할 경우 줄 끝이 섞이거나 잘못된 git blame을 피할 수 있습니다.

6. 그리고..

prettier.getSupportInfo의 파라미터인 version이 사라졌습니다. (링크)
deprecated 된 options와 options값들이 제거 되었습니다.(링크)
prettier.util API가 수정되었습니다. (링크)
search 결과를 캐싱합니다.(링크)

그 외의 여러 변경점들이 존재합니다. 기존에 “왜 이걸 이렇게 바꾸지?”했던 부분들이 꽤 합리적인 방향으로 많이 변경이 된 것 같습니다. 위 링크를 방문해서 한번 확인해보는 걸 추천드립니다!

2.0은 아니지만 vueIndentScriptAndStyle

2.0 버전이 나오기 전 마지막 버전인 v1.19.0에서 새로운 옵션인 vueIndentScriptAndStyle가 추가되었습니다. Vue 파일에서 <script>나 <style> 태그내의 코드가 개행이 되는 것을 선택할 수 있게 추가된 옵션입니다. 이 부분도 꽤 취향을 많이 타는 부분이라 옵션이 추가 된 것 같지만 개인적으로는 옵션명이 이쁘지는 않네요..

위 코드가 default값인 false일 때 코드입니다. false일 경우 개행을 하지 않습니다.

위 옵션이 탄생된 이야기가 궁금하다면 이 이슈를 살펴봐도 좋을 것 같습니다.

적용하기

기존 FE개발랩에서는 Default 옵션을 제외하고 변경된 내용만 명시하는 식으로 Prettier 설정을 작성해 사용했습니다. 하지만 앞으로 Prettier의 버전이 올라가면서 변경되는 Default 값이 많아질 것이라 예상되어 가능한 모든 옵션을 명시해서 사용하는 것으로 변경했습니다.

저희는 아래 옵션을 사용해 개발을 진행하고 있습니다.

{
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "arrowParens": "always",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "vueIndentScriptAndStyle": false
}

추가로..

prettier와 ESLint를 사용하는데 중복되는 스타일 이슈를 정리하기 위해 eslint-config-prettier와 eslint-plugin-prettier를 사용하고 계신분이 많을겁니다.

eslint-config-prettier는 6.10.0버전 이후를 사용하면 prettier 2.0을 사용할 수 있습니다.
eslint-plugin-prettier는 업데이트 필요없이 사용할 수 있다고 합니다.관련 이슈: https://github.com/prettier/eslint-plugin-prettier/issues/273

준비한 내용은 여기까지 입니다. 끝! 🙆‍♂️