Prettier

Visual Studio Code의 Extension중 Prettier라는 코드 스타일 정리 도구가 있다.
이 Prettier를 사용하면 어떻게 코드 스타일이 정리가 되는지 보자.

foo(arg1, arg2, arg3, arg4);

별다른 문제가 없어보인다. 하지만 다음 같은 경우를 살펴보자

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

이렇게 한줄에 길게 작성이 되었을 경우

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

대부분의 사람은 이렇게 코드를 나누게 된다. ESLint 같은 애는 훈수둘줄만 알지 이런 코드 정리는 할 수 없다.

Prettier를 사용하면 이런 것을 자동으로 해준다.

들여쓰기 같은 기본적인 것부터, JSX문법의 경우 빠진 세미콜론을 추가해주기도 하며, 작은따옴표는 모두 큰따옴표로 변경도 해준다.

이런 스타일을 쉽게 커스터마이징 하는 것도 가능하다.

.prettierrc, .JSON, .JS, .YAML, .TOML 와 같은 형태로 작성 가능하다.
.prettierrc 파일은 JSON이나 YAML 형태로 읽어주는데
다음과 같이 작성 가능하다.

.prettierrc

{
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 4,
  "semi": false
}

옵션을 살펴보면, 탭 관련 내용, 탭의 간격 설정도 보인다.
사람마다 들여쓰기에 대한 스타일이 다르다.

개인적인 경험만으로 봤을 경우 크게 탭, 스페이스 두 번, 스페이스 네 번 이렇게 세 분류로 나뉘는 것 같은데, 이렇게 코드 포매팅을 해주면, 다른 사람의 코드도 쉽게 바꾸는 게 가능하다.

다른 옵션들은 아래의 주소에서 확인이 가능하다.
Prettier Options

HTML, JSON, GraphQL, TypeScript 등 여러 언어도 지원한다.

내가 쓰는 prettier 설정은 아래와 같다. jsx 첩자도 보이긴 하는데, 필요 없으면 빼도 된다.

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "jsxSingleQuote": true,
  "jsxBracketSameLine": true
}

이정도만 해주고 나머지 수정할 일은 가끔 프로젝트 중 eslint가 패키지 내부에 플러그인으로 내장이 되어있거나, 내가 내부를 새로 고치기 귀찮을 떄 설정을 조금씩 바꿔서 사용한다.

Published 2020-02-18

vscode