Prettier 상세 설정 가이드

Prettier는 일관적인 규칙에 따라서 코드를 자동으로 포맷팅해줌으로써 특히 협업 프로젝트에서 개발 생산성을 올려주는 유용한 도구입니다. Prettier는 대부분의 경우에 별다른 설정없이 그대로 사용할 수 있으나 간혹 개발팀의 입맛에 맞게 약간의 설정이 필요한 경우도 생길 수 있는데요.

이번 글에서는 Prettier의 설정 방법을 알아보고 자주 사용되는 옵션에 대해서 살펴보겠습니다.

자바스크립트에서 가장 많이 사용되는 코드 포맷터인 Prettier 자체에 대한 내용은 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다.

Prettier 설정 방법

Prettier는 크게 3가지 방법으로 설정할 수 있습니다.

첫 번째 방법은 prettier 명령어를 실행할 때 커맨드 라인 옵션으로도 넘기는 건데요. 일회성 설정을 해줄 때는 간편하게 쓸 수 있지만 설정할 항목이 조금만 많아져도 오히려 불편해지고 오타가 날 확률도 커질 수 있습니다.

$ prettier . --single-quote --print-width 100 --arrow-parens avoid

두 번째 방법은 package.json 파일의 일부로 prettier 속성에 옵션을 명시하는 것입니다.

{
  // ...
  "dependencies": {
    "prettier": "^3.0.1"
  },
  "prettier": {    "singleQuote": true,    "printWidth": 100,    "arrowParens": "avoid"
  }
}

세 번째 방법은 별도의 설정 파일을 사용하는 건데요. .prettierrc, .prettierrc.json, .prettierrc.yml, .prettierrc.js 등 다양한 형태로 옵션을 저장할 수 있습니다.

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

저는 개인적으로 마지막 방법을 선호하는데요. 팀에 새롭게 합류하는 개발자가 폴더 구조만 보고도 해당 프로젝트에서 Prettier를 사용하는지와 설정 사항을 쉽게 확인할 수 있기 때문입니다.

홑따옴표

Prettier는 문자열을 기본적으로 " 기호(쌍따옴표)를 사용해서 표시하는데요. 대신에 ' 기호(홑따옴표)를 사용하고 싶다면 singleQuote 옵션을 true로 설정해주면 됩니다.

{
  "singleQuote": true
}

자바스크립트 개발자 중에서 홑따옴표를 선호하시는 분들이 워낙 많기 때문에 가장 흔하게 볼 수 있는 Prettier 설정인데요. 저는 쌍따옴표가 당연히 여겨지는 다른 프로그래밍 언어도 많이 써봐서 그런지 크게 개의치 않고 그냥 기본 설정대로 두는 편입니다.

한 줄 최대 글자수

Prettier은 기본적으로 한 줄에 글자수를 최대 80자로 제한하고 있는데요. 한 줄에 최대 글자수를 늘리고 싶다면 printWidth 옵션을 사용하면 됩니다.

{
  "printWidth": 120
}

참고로 사람이 편안하게 코드를 읽으려면 한 줄에 80자 이하의 글자를 쓰는 게 좋다고 하더라고요. 그래도 요즘에는 대형 모니터나 와이드 모니터를 사용하시는 분들이 많으니 80자가 너무 적다고 느껴질 수도 있을 것 같습니다.

세미콜론

Prettier는 기본적으로 각 문장(statement) 뒤에 ; 기호(세미콜론)를 자동으로 붙여주는데요. 이 세미콜론을 생략하고 싶다면 semi 옵션을 false로 설정해주면 됩니다.

{
  "semi": false
}

참고로 자바스크립트에서는 각 문장 뒤에 세미콜론을 붙이는 오래된 관행이 있는데요. 다른 프로그래밍 언어처럼 구문적으로 항상 붙여줘야 하는 것은 아니에요. 세미콜론을 붙이지 않는 것이 코드가 더 깔끔해 보인다고 느끼시는 분들도 있더라고요.

후행 쉼표

여러 줄에서 걸쳐서 배열이나 객체, 매개변수가 작성된 경우 Prettier는 마지막 요소 뒤에도 , 기호(쉼표)를 붙여주는데요. 이 쉼표를 제거하고 싶다면 trailingComma 옵션을 "none"으로 주면 됩니다.

{
  "trailingComma": "none"
}

Prettier에서 trailingComma 옵션의 기본값을 "all"로 하는 이유는 코드 리뷰를 할 때 이점이 있어서 인데요. 이렇게 마지막 요소 뒤에도 쉼표가 없으면 코드 변경과 전과 후를 비교하는 결과가 지저분하게 나오는 경향이 있거든요.

화살표 함수 괄호

화살표 함수를 작성하면 Prettier는 매개변수가 하나 밖에 없더라도 매개변수 부분을 () 기호(소괄호)로 감싸주는데요. 매개변수가 하나일 때는 굳이 () 기호를 사용하고 싶지 않다면 arrowParens 옵션을 "avoid"로 주면 됩니다.

{
  "arrowParens": "avoid"
}

탭 사용

Prettier는 들여쓰기를 할 때 기본적으로 탭 문자 대신에 여러 개의 공백 문자를 사용합니다. 만약에 탭 문자로 들여쓰기를 하고 싶다면 useTabs 옵션을 true로 설정해주면 됩니다.

{
  "useTabs": true
}

탭 너비

Prettier는 기본적으로 공백 2칸을 탭 너비로 사용하는데요. 만약에 탭 너비를 조정하고 싶다면 tabWidth 옵션을 바꿔주시면 됩니다.

{
  "tabWidth": 4
}

당연히 이 옵션은 useTabs를 true로 설정해준 경우에는 의미가 없어지겠죠?

.prettierignore

Prettier는 기본적으로 Git과 같은 버전 컨트롤 시스템에서 사용하는 디렉토리와 npm 패키지가 저장되어 있는 node_modules 디렉토리를 상대로는 포맷팅을 수행하지 않습니다.

**/.git
**/.svn
**/.hg
**/node_modules

만약에 이 밖에도 프로젝트 내에 포맷팅을 하지 말야하는 영역이 있다면 .prettierignore 파일을 생성하고 그 안에 경로를 나열하면 됩니다.

예를 들어, dist 디렉토리와 package.json과 package-lock.json 파일을 포맷팅에서 제외하려면 다음과 같이 .prettierignore 파일을 작성하면 됩니다.

dist
package.json
package-lock.json

마치면서

이상으로 Prettier의 자주 사용되는 옵션을 위주로 어떻게 설정하는지에 대해서 살펴보았습니다. 이 밖에 다른 옵션이 필요하시다면 공식 레퍼런스 페이지를 찾아보시면 좋을 것 같습니다.

Prettier는 다른 포맷터에 대비 상대적으로 설정할 수 있는 부분이 제한적인데요. 사실 의도적으로 그렇게 설계되었다고 합니다. 그래서 저는 가급적 Prettier 설정을 최소화하시라고 추천드리고 싶어요.

Prettier의 기본 설정값들은 자바스크립트 커뮤니티에서 오랫동안 합의된 관행과 모범 사례를 기반으로 결정되었습니다. 또한 사용자의 피드백을 수렴하고 최신 트랜드를 반영하여 버전 업 시 기본 설정값이 변경되기도 합니다.

예를 들어, Prettier v2가 출시되었을 때는 arrowParens 옵션의 기본값이 "always"로 바뀌었었는데요. 얼마 전에 출시된 Prettier v3에서는 trailingComma 옵션의 기본값이 "all"로 바뀌었더라고요.