Prettier

Taehun Jeong·2023년 4월 15일
0
post-thumbnail

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 QuotesJSX에서 쌍따옴표 대신 홑따옴표 사용 여부false
Trailing Commas객체, 배열, 함수 등의 후행에 , 사용 여부es5
Bracket Spacing객체의 괄호 사이에 공백 삽입 여부true
Bracket LineHTML, 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 SensitivityHTML 태그 사이의 공백 처리를 결정
css : HTML 코드에서 CSS 스타일 시트를 포맷팅할 때 사용되는 공백 규칙 적용, CSS 코드는 포맷팅하지 않고 HTML 태그와 속성 사이의 공백은 보존
strict : 모든 HTML 태그와 속성 사이의 공백 제거
ignore : 모든 HTML 태그와 속성 사이의 공백 보존
css
Vue files script and style tags indentationVue 파일에서 <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 LineHTML, 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 해결 방안

profile
안녕하세요

0개의 댓글