Prettier

<colcolor=#fff,#fff><bgcolor=#1a2b34,#1a2b34> Prettier

<colbgcolor=#1a2b34,#1a2b34> 종류	다중 언어 코드 포매터
최초 개발자	James Long
출시	2017년 5월 27일 #
안정 버전	3.6.2 (2025년 6월 27일)
개발 언어	JavaScript
라이선스	MIT 라이선스 #
링크

1. 개요2. 특징3. 점유율4. 설정5. 지원 언어

5.1. 내장5.2. 확장

6. 개발환경 연동7. 파생 소프트웨어8. 외부 링크9. 관련 문서

1. 개요

An opinionated code formatter

플러그인 방식의 다중 언어 코드 포매터.

2. 특징

By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles.

Why Prettier?

opinionated라는 캐치프레이즈에서도 알 수 있듯이 의미상 똑같은 여러 형태의 코드가 있더라도 반드시 하나의 모양으로 강제한다. 레이아웃과 들여쓰기, 화이트스페이스 등등만 신경쓰는 경량 포매터들과 다르게 따옴표, 괄호 제거, 이스케이프 문자 정리 등 구체적인 요소까지 정해진 모양을 강제한다.

때문에 개발자의 취향이나 사내 컨벤션에 맞게 설정 가능하도록 수많은 설정 옵션을 제공하는 타 포매터와 다르게, 기본 옵션 갯수가 다 합쳐도 10개를 겨우 넘는 수준이다. 이 경우도 들여쓰기 길이나 탭/스페이스같이 자칫 강제했다간 싸움나기 쉬운(...) 설정들뿐이고 대부분의 동작은 유저가 설정 불가능하다.

3. 점유율

프런트엔드 업계 및 JS 생태계에서의 입지는 타 JavaScript 포매터와 비교해 압도적인 편이다.

2021 State of JS(현 devographics) 설문조사에서 응답자 중 83.2%가 Prettier를 사용하며 유틸리티 부문에서 2위를 했고, 1위는 91.4%의 ESLint였다.#

Prettier를 프로젝트에 설정해 사용하는 경우, package.json의 devDependencis에 종속성으로 들어가거나 프로젝트 루트에 .prettier가 있기 때문에 확인이 가능하며, GitHub Dependency graph로 검색하면 GitHub 저장소만 1천만개 가까이 존재한다. #

4. 설정

<rowcolor=#fff,#fff> 설정	설명	기본값
`printWidth`	강제 줄 바꿈 길이	`80`
`tabWidth`	들여쓰기 길이. 탭일 경우 무시한다. EditorConfig의 `indent_size`나 `tab_width`가 설정되어 있다면 이 값을 기본값으로 사용한다.	`2`
`useTabs`	활성화될 경우 탭으로, 비활성화될 경우 공백으로 들여쓰기를 한다. EditorConfig의 `indent_style`가 설정되어 있다면 이 값을 기본값으로 사용한다.	`false`
`semi`	활성화될 경우 모든 문장에 세미콜론을 강제한다.	`true`
`singleQuote`	활성화될 경우 이스케이프를 발생시키지 않는 선에서 문자열 리터럴을 작은따옴표를 쓰도록 강제한다.	`false`
`quoteProps`	`"as-needed"`: 공백이 있는 등 불가피한 경우가 아니면 객체 리터럴 내의 프로퍼티 문법에서 따옴표를 제거한다. `"consistent"`: as-needed와 비슷하나, 프로퍼티 중 하나라도 따옴표가 꼭 필요하면 나머지 모든 필드도 따옴표를 씌운다. `"preserve"`: 별다른 변경 없이 소스를 그대로 출력한다.	`"as-needed"`
`jsxSingleQuote`	활성화될 경우, JSX 어트리뷰트에도 작은따옴표를 강제한다.	`false`
`trailingComma`	기본값이 2025년 7월 5일 출시된 3.0.0 버전 이후 `"es5"`에서 `"all"`로 바뀌었다.[1] 이전 버전 사용시 주의. `"all"`: 세미콜론과 비슷하게, 가능한 모든 경우에 trailing comma를 붙힌다. `"es5"`: all과 사실상 비슷하나, ES6부터 지원된 함수 매개변수 및 호출 구문에서의 trailing comma 문법은 사용하지 않는다. 즉, ES5 호환성을 위해 존재하는 옵션. `"none"`: 항상 trailing comma를 붙히지 않는다.	`"all"`
`bracketSpacing`	활성화될 경우, 단항 객체 리터럴의 중괄호 사이에 항상 공백을 추가한다.	`true`
`objectWrap`	2025년 2월부터 추가된 신규 설정으로, 첫 프로퍼티의 공백 여부에 따라 객체 리터럴을 펼치고 접었던 기본 동작을 설정할 수 있게 해준다. `"preserve"`: 객체 리터럴의 강제 개행 길이를 초과하지 않더라도, 첫 번째 프로퍼티 앞에 개행이 있다면 펼친다. `"collapse"`: 기존 코드의 개행 여부를 무시하고 길이에 따라서만 한 줄로 접을지 펼치를 결정한다.	`"preserve"`
`bracketSameLine`	활성화할 경우, HTML 태그의 속성이 많아서 여러 줄로 펼쳐졌을 때, 닫는 `>`를 마지막 속성의 끝에 둔다.	`false`
`arrowParens`	`"always"`: 화살표 함수를 정의할 때 시그니처 영역에 항상 괄호를 씌운다. `"avoid"`: 생략 가능한 경우(인자가 단 하나인 경우 등), 화살표 함수의 괄호를 생략한다.	`"always"`
`proseWrap`	마크다운 등 화이트스페이스 및 개행 여부, trailing space에 매우 민감한 언어에서 강제 줄 바꿈 적용 여부를 결정한다. `"always"`: 한 줄이 `printWidth`를 넘는다면 항상 강제 줄바꿈한다. `"never"`: 줄 길이와 무관하게 한 줄로 병합한다. `"preserve"`: 소스를 원본 그대로 유지한다.	`"preserve"`
`htmlWhitespaceSensitivity`	HTML 등에서 텍스트 사이에 마크업 태그가 다시 삽입되는 것과 같이 태그 경계 사이에 화이트스페이스를 포함하는 텍스트 노드가 들어가는 경우, 해당 태그가 인라인 태그인지 블록 태그인지 여부에 따라 강제 줄바꿈이 공백으로 렌더될 수도, 무시될 수도 있다. 당연히 JSX에는 적용되지 않는다. `"css"`: 주어진 HTML 태그가 기본적으로 가지는 display 값을 가지고 인라인 태그인지 여부를 판단한다. `"strict"`: 인라인 태그 경계 주위에 화이트스페이스가 있는 경우, 최소한 하나의 화이트스페이스를 유지한다. 반대로 화이트스페이스가 없는 경우, 강제 개행을 해야 하면 속성 나열 스타일과 비슷하게 태그의 닫는 괄호(`>`)를 분리해서 화이트스페이스가 들어가지 않도록 개행한다. `"ignore"`: 모든 태그 경계 주위의 화이트스페이스를 완전히 무시하고 삭제한다.	`"css"`
`vueIndentScriptAndStyle`	활성화될 경우, Vue.js 컴포넌트 파일에서 최상위 태그인 과 `<script>` 태그 안의 JS, CSS 코드를 들여쓰기한다.	`false`
`endOfLine`	운영체제마다 다른 개행 문자를 결정한다. EditorConfig의 `end_of_line`가 설정되어 있다면 이 값을 기본값으로 사용한다. `"lf"`: 라인 피드 문자로 강제한다. `"crlf"`: 윈도우식 CR + LF 조합을 강제한다. `"cr"`: 캐리지 리턴 문자로 강제한다. `"auto"`: 개행 문자를 추론한다. 섞여 있을 경우도 보존하는 것은 아니고, 첫 줄의 개행 문자를 사용한다.	`"lf"`
`singleAttributePerLine`	활성화될 경우, HTML 태그의 속성이 하나 초과인 경우 무조건 한 줄에 속성 하나를 쓰도록 강제로 펼친다.	`false`

EditorConfig를 빌트인으로 지원하며, 위 설정 중 언어 무관하게 editorconfig의 기존 표준과 겹치는 레이아웃 설정은 .editorconfig파일의 내용을 상속할 수 있다.

위 모든 설정은 CLI로 설정할 수도 있지만 대부분은 .prettierrc로 시작하는 설정 파일에 저장한다. JSON, YAML, TOML, JavaScript, TypeScript 파일을 지원하며, 담기는 내용 자체는 거의 똑같다. package.json 파일 내부에 임베드할 수도 있으나, 권장되지는 않는다.

5. 지원 언어

기본적으로 여러 언어를 지원하도록 설계되었으며, 내장 지원되지 않는 언어의 경우 플러그인을 설치해 사용할 수 있다.

다만 워낙 웹 분야, 특히 기본 설정 자체가 JavaScript 문법을 강하게 염두에 두고 설계된 편이라 타 범용 포매터 허브 구현체만큼 언어 중립적이길 기대하기는 어렵다. 대부분 플러그인으로 구현된 언어도 웹 기술 언어들이 대부분이고, 플러그인 개별 설정을 자꾸 추가하다 보면 프로젝트마다 옮기기가 까다로워진다. 원 사상 자체가 opinionated인 만큼 이는 어쩔 수 없는 편.

5.1. 내장

JavaScript

JSONC #

5.2. 확장

6. 개발환경 연동

여러 코드 에디터 및 통합 개발 환경에서 플러그인이나 확장 등의 형태로 지원된다. 주된 기능은 파일 저장 또는 특정한 이벤트 발생 시 현재 파일을 포맷하는 것.

Prettier 자체가 Node.js 런타임을 요구하다 보니 개별 플러그인이 이를 임베드하는 경우는 많지 않고, 로컬 node_modules나 전역에 설치된 Prettier CLI를 찾아 표준 입출력으로 실행하는 방식이다.

Visual Studio: MadsKristensen.JavaScriptPrettier
Visual Studio Code: esbenp.prettier-vscode - 다른 구현체와 달리 코드베이스의 node_modules에서 찾을 수 없으면 그냥 임베딩된 Prettier API를 생으로 호출한다.# 이렇게 되면 Prettier의 버전이 해당 플러그인이 배포될 때 "dependencies"에 기술된 버전으로 고정되기 때문에 일관되지 않은 개발환경을 만들 수 있다. 새 프로젝트를 만들 때마다 항상 -D prettier로 prettier를 devDependencies에 명시적으로 넣어주는 것이 좋다.
Sublime Text: JsPrettier
vim - 통합된 플러그인 시스템이 없다보니 구현 방법상 여러 플러그인이 존재한다.

vim-prettier
neoformat - Prettier와 Prettierd 모두 지원한다.#
ALE
Neovim

formatter.nvim - Prettier 지원이 내장되어 있다.# 설치한 경우 Prettierd도 쓸 수 있다.#
coc-prettier - 네오빔에서 Coc 호환 레이어를 사용할 때 쓸 수 있는 확장.
conform.nvim - formatter.nvim과 거의 비슷한 수준의 기능을 가지고 있다. packer뿐만 아니라 lazy.nvim도 지원하는 것이 특징. Prettier와 Prettierd 모두 기본으로 지원한다.

JetBrains IDE:

intellij.prettierJS - IntelliJ IDEA, CLion, PyCharm, Rider, WebStorm 등 인텔리제이 기반 IDE에서 표준적으로 지원되는 공식 플러그인이다.
특별히 WebStorm의 경우는 Prettier 지원이 기본적으로 내장되어 있고, Prettier가 전역 또는 로컬로 설치된 것을 감지하면 자동으로 사용할 수 있다.[2]

Emacs

7. 파생 소프트웨어

prettierd - Prettier를 CLI가 아닌 데몬으로 따로 띄워놓아 런타임 로딩 속도를 줄이는 래퍼. Node.js 라이브러리 API가 아니라 표준 입출력으로 포맷 데이터를 주고받는 vim 확장 등에서 성능 개선을 목적으로 자주 쓰인다.
parallel-prettier - Prettier CLI를 병렬화한 래퍼.
prettier-chrome - 프리티어를 웹페이지에서 돌릴 수 있는 크롬 브라우저 확장

8. 외부 링크

9. 관련 문서

[1] Change the default value for trailingComma to all (#11479 by @fisker, #13143 by @sosukesuzuki) Since version 2.0. we've changed the default value for trailingComma to es5. Internet Explorer, the last browser to not allow trailing commas in function calls, has been unsupported on June 15, 2022. Accordingly, change the default value for trailingComma to all. # #11479[2] With WebStorm, you can format selected code fragments as well as entire files or directories using the Reformat with Prettier action. WebStorm adds this action as soon as you install Prettier as a dependency in your project or globally on your computer. #