Prettier

Prettier

Prettier는 코드 포맷터 (Code Formatter) 중 하나로, 작성된 코드의 스타일을 일관되게 유지해주면서 보기좋게 정렬해주는 기능을 제공하는 도구이다. 자동으로 들여쓰기, 줄 바꿈, 공백, 쌍따옴표, 세미콜론 등 코드 스타일에 관련된 여러 가지 요소를 조정한다. 코드가 읽기 편해야 가독성이 올라가며 가독성이 좋은 코드는 협업에 있어 필수적이다. 협업을 진행하면서 Prettier를 사용해 코드의 스타일을 일관되게 유지해주면 협업 능률도 향상될 수 있다. 다양한 언어와 다양한 개발환경에서 지원하며 옵션을 수정해주어 자신이 원하는 대로 사용할 수도 있다.

---

Options

Prettier (작성 시점 최신 버전 v2.8.7 기준) 사용 가능한 옵션은 다음과 같다.

옵션	내용	Default
Print Width	한 줄에 쓸 수 있는 최대 글자 수 넘으면 개행 후 들여쓰기 됨	80
Tab Width	탭 너비	2
Tabs	들여쓰의 tab / space 여부 지정 true라면 tab 사용 false라면 space 사용	false
Semicolons	줄의 끝마다 세미콜론 사용 강제 여부	true
Quotes	쌍따옴표 대신 홑따옴표의 사용 여부	false
Quote Props	객체의 key에 대한 따옴표 사용 여부 as-needed : - 등 따옴표가 필요한 경우에만 사용 consistent : 하나의 key라도 따옴표를 쓰면 모든 key에 적용 preserve : Syntax 이상이 없으면 입력을 그대로 적용	as-needed
JSX Quotes	JSX에서 쌍따옴표 대신 홑따옴표 사용 여부	false
Trailing Commas	객체, 배열, 함수 등의 후행에 , 사용 여부	es5
Bracket Spacing	객체의 괄호 사이에 공백 삽입 여부	true
Bracket Line	HTML, JSX 등에서 다수의 줄을 사용하는 요소의 끝에 > 붙여쓸지 여부	false
Arrow Function Parentheses	화살표 함수에서의 괄호 사용 여부 always : 괄호를 항상 사용 함 (x) => x avoid : 가능하면 생략함 x => x	always
Range	지정된 범위에만 코드 포맷팅 적용 선택된 범위의 첫번째 줄의 시작부터 선택된 범위의 마지막 줄의 끝까지 범위 확장 가능 cursorOffset 옵션과는 같이 사용 불가	0 Infinity
Parser	사용할 Parser의 종류를 특정	Link for Valid Options
File Path	적용할 Parser를 추론하기 위해 코드 포맷팅을 수행할 파일의 이름을 지정	None
Require Pragma	특정한 코드 영역을 가리키는 pragma가 지정된 범위에만 포맷팅 수행 여부 지정	false
Insert Pragma	포맷팅 수행한 코드 상단에 @format 마커 생성 --require-pragma이 있어야 사용 가능	false
Prose Wrap	일반 텍스트를 포맷팅할 때 줄 바꿈을 적용하는 방식을 지정 always : print width를 초과하면 줄 바꿈 수행 never : 줄 바꿈 적용하지 않음 preserve : 옵션 적용하지 않음	preserve
HTML Whitespace Sensitivity	HTML 태그 사이의 공백 처리를 결정 css : HTML 코드에서 CSS 스타일 시트를 포맷팅할 때 사용되는 공백 규칙 적용, CSS 코드는 포맷팅하지 않고 HTML 태그와 속성 사이의 공백은 보존 strict : 모든 HTML 태그와 속성 사이의 공백 제거 ignore : 모든 HTML 태그와 속성 사이의 공백 보존	css
Vue files script and style tags indentation	Vue 파일에서 <script>나 <style> 내 들여쓰기 적용 여부	false
End of Line	개행 문자 통일 lf : 개행 문자로 \n 사용 crlf : 개행 문자로 \r\n 사용 cr : 개행 문자로 \r 사용 auto : 옵션 적용하지 않음	lf
Embedded Language Formatting	특정 언어의 코드를 HTML, JSX, Vue 등의 다른 언어와 함께 사용할 때 사용 auto : 해당 코드를 자동으로 감지하여 포맷팅 적용 off : 해당 코드에 대해 포맷팅 적용하지 않음	auto
Single Attribute Per Line	HTML, JSX 등에서 attribute를 한 줄에 하나씩 작성	false

---

End of Line

Prettier 설정에서 개행 문자에 관한 옵션을 지정해줄 때 crlf, lf를 지정할 수 있다. 이는 타자기를 사용하던 때부터 있던 기능으로부터 생긴 것이다. cr은 'Carrige Return', lf는 'Line Feed'를 의미한다. 타자기를 사용할 때, 한 줄의 끝까지 입력하면 다음 줄의 처음부터 입력하기 위해, 인쇄 헤드를 문자열의 시작 위치로 옮기고 (Carrige Return) 문서의 아래줄로 이동 (Line Feed) 시킨다. Windwos 등의 운영체제에서는 이러한 기능의 흔적으로 개행 문자를 입력하면 기본값으로 crlf를 수행해 \r\n이 입력되며, Linux 계열 운영체제나 현재의 MacOS에서는 \n가 입력된다. 각각의 바이트 코드가 다르므로 서로 다른 운영체제 간의 호환성을 해칠 수 있어 End of Line 옵션을 통해 개행 문자를 통일해주는 것이다.

warning: in the working copy of 'index.html'
lf will be replaced by crlf the next time git touches it

Windows에서 "endOfLine": "lf"을 지정해주고 git add를 수행하면 위의 경고를 볼 수 있다. Windows의 Git에서는 기본적으로 개행 문자를 crlf로 저장하는 것을 수행하기 때문이다. 이러한 경고를 방지하기 위해 Git의 core.autocrlf 설정을 사용하여 줄바꿈 문자열을 관리할 수 있다.

for Windows, DOS

git config --global core.autocrlf true

for Linux, MacOS

git config --global core.autocrlf input

check-in, check-out할 때 파일을 어떻게 처리할지 설정하는 변수로 true로 설정하면 Git은 저장소에 커밋할 때 줄바꿈 문자열을 변경하지 않는다.

---

사용

VS Code는 Extensions 탭에서 설치해줌으로써 사용할 수 있다.

프로젝트 내에서 Prettier를 사용하려면

yarn install prettier

npm install prettier

등으로 Prettier를 설치하고, 프로젝트의 루트 디렉토리에 Prettier의 설정을 지정해주기 위해 .prettierrc, 또는 .prettierrc.js나 .prettierrc.json을 생성한다.

JSON 방식으로 사용할 경우 아래처럼

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "arrowParens": "always",
  "bracketSpacing": true,
  "proseWrap": "preserve",
  "endOfLine": "lf",
  "singleAttributePerLine": true,
}

또는, JS 방식으로 사용할 경우 아래와 같이 사용한다. 작성된 옵션은 필자가 주로 사용하는 설정이다.

module.exports = {
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "arrowParens": "always",
  "bracketSpacing": true,
  "proseWrap": "preserve",
  "endOfLine": "lf",
  "singleAttributePerLine": true,
};

---

References

Prettier) Options
Site Title) prettier에서 quote Props 설정 방법
Inpa Dev 👨‍💻) [VS Code] 💽 Prettier 도구 설정법 - 한방 코드 포맷터
dev_yong.log) CRLF와 LF차이의 이해
다보의 개발일기) [Git 경고 메세지] LF will be replaced by CRLF in 해결 방안