What is Prettier?

---

프로그래밍을 처음 하다보면 구현에만 신경 쓴 나머지 스타일이 뒤죽박죽인 경험이 다들 한 번씩 있을 것이다. 물론, 그 당시에는 알 수 없고 클린 코드의 개념을 알고 난 뒤 과거에 작성한 코드를 보며 충격을 받게 되는 식이다.

이 때 뒤죽박죽한 코드를 깔끔하게 정리해주는 것이 Prettier 의 역할이다.

Prettier 는 그 이름과도 같이 코드를 prettier 하게 (더 예쁘게) 만들어준다. 즉, 코드를 일관되게 작성하도록 도와주는 코드 포맷터이다.

대게 ESLint 와 같이 사용하며 ESLint 는 오류를 잡아주는 기능을 하고, Prettier 는 코드를 말 그대로 형식에 맞게 포맷팅하는 데 특화돼 있기 때문에 둘을 같이 사용하는 것이 일반적이다.

1. 설치

---

1-1. 명령어로 개별 설치

다음 명령어를 입력해 프로젝트를 진행할 폴더에 다운받는다.

$npm install --save-dev --save-exact prettier

• —-save-dev
  prettier 모듈에 대한 정보를 package.json 에 추가한다.

• —save-exact
  항상 package.json 에 적힌 것과 같은 버전의 모듈을 다운받는다. (업그레이드로 인한 어플리케이션 오류 방지)

1-2. extension 으로 전역 설치

Vscode 를 사용할 경우 extension 으로 모든 폴더에 전역적으로 prettier 를 적용할 수 있다.

2. 세팅

---

2-1. 파일 추가

1. root 경로에 .prettierrc.json 라는 이름의 파일을 생성한다.

2. VsCode 의 경우 prettier Extension 에서 확장 설정에 들어가 간편하게 전역 세팅을 해줄 수 있다.

   

2-2. Prettier 속성

가장 기본적이고 많이 사용하는 속성과 그 의미에 대해 알아보자.

semi

세미콜론을 붙일 건지, 말 건지를 정한다.

• true
  세미콜론을 붙인다.
  

• false
  세미콜론을 붙이지 않는다.
  

// true 
console.log('hello'); // <- 세미콜론 있음

// false
console.log('hello') // <- 세미콜론 없음

singleQuote

문자열 등을 표현할 때 작은 따옴표를 사용할 건지 큰 따옴표를 사용할 것인지 정한다.

• true
  작은 따옴표를 사용한다.

• false
  큰 따옴표를 사용한다.
  

console.log('hello'); // 작은 따옴표 사용 - true

console.log("hello"); // 큰 따옴표 사용 - false

tabWidth

인덴트의 크기를 지정한다. 대부분 2 혹은 4를 지정한다.

• <int>
  int 타입의 숫자가 인덱스의 크기이다.
  

// indent 2
const indent2 = () => {
	if (true) {
		console.log('indent 2!!');
	}
}

// indent 4
const indent4 = () => {
		if (true) {
				conssole.log('indent 4!!');
		}
}

trailingComma

배열, 객체 등의 마지막에 콤마를 붙일지 말지를 결정한다.

• all
  함수나 클래스 등 모든 곳에 콤마를 붙인다.
  

• es5
  배열, 객체 등 es5 에서 유효한 곳에만 콤마를 붙인다.

• none
  콤마를 붙이지 않는다.
  

// 'none' 
const arr = {
	1: 'A',
	2: 'B' 
}

// 'all', 'es5'
const arr = {
	1: 'A',
	2: 'B', // 마지막에 콤마를 붙여준다
}

printWidth

한 줄에 어느 정도의 문자를 포함할지 설정한다.

• <int>
  int 형식의 숫자를 값으로 준다. 기본값은 80으로, 80자까지 한줄에 포함할 수 있다.
  

// 80자가 넘어간 경우 
const numStr =
  '11111111111111111111111111111111111111111111111111111111111111111111111111111111';

// 넘어가지 않은 경우
const numStr = '2222222222222222';

arrowParens

화살표 함수 매개변수에 괄호를 넣을지 말지를 결정한다.

• always
  항상 괄호를 포함한다.

• avoid
  생략이 가능한 경우 괄호를 생략한다.
  

// always
const arrow = (x) => { console.log(x); } 

// avoid
const arrow = x => { console.log(x); }

bracketSpacing

괄호 사이 여백을 만들지 말지 결정한다.

• true
  괄호 사이 여백을 만든다.

• false
  괄호 사이 여백을 만들지 않는다.
  

// true
const me = { name: 'suyeon' };

// false
const me = {name: 'suyeon'};

bracketSameLine

html 태그를 사용할 때 닫는 괄호 > 를 같은 줄에 넣을지, 한 줄 뒤에 넣을지를 설정한다.

• true
  닫는 괄호를 같은 줄에 넣는다.
  

• false
  닫는 괄호를 한 줄 다음에 넣는다.
  

// true
<button
	type='submit'
	id='new-button'>
</button>

// false
<button
	type='submit'
	id='new-bitton'
>
</button>

추가 속성들

더 자세한 속성을 보고 싶다면 Prettier 공식 문서 를 참조하자.

2-3. 이제 속성이 읽힌다!

이렇게 한 번 무슨 뜻인지 알고 나니 효리님의 PR 을 참고하여 내 입맛대로 설정을 바꿀 수 있었다.

아래의 파일은 다음 규칙을 의미한다.

{
	// 항상 세미콜론을 붙인다
  "semi": true,
	// 작은 따옴표를 사용한다 
  "singleQuote": true,
	// indent 는 2로 설정한다 
  "tabWidth": 2, 
	// 객체, 배열 등의 마지막 요소에 항상 콤마를 추가한다
  "trailingComma": "all", 
	// 한줄에 최대 80자를 작성한다
  "printWidth": 80, 
	// 화살표 함수의 매개변수는 늘 괄호로 감싼다
  "arrowParens": "always", 
	// 괄호 사이 여백을 준다
  "bracketSpacing": true, 
	// html 태그의 닫는 괄호는 같은 라인에 둔다
  "bracketSameLine": true, 
}

참고로 기본값의 경우는 개인마다 세팅이 다를 수 있으므로 명시적으로 적어주어도 괜찮다고 한다. (알려주신 효리님께 감사인사를...!)

3. prettier 적용

---

3-1. 수동 적용

1. 단축키로 적용하는 방법

Vscode 에선 다음 단축 키를 통해 파일마다 prettier 를 실행할 수 있다.

• Mac
  option + shift + f

• Window
  alt + shift + f
  

2. f1 키로 적용하는 방법

1. f1 키를 누른다.
2. format document 를 검색해서 적용한다.

3-2. 자동 적용

1. vscode 의 설정을 세팅하는 방법

1. vscode 의 왼쪽 아래에 톱니바퀴를 누르고 설정 탭에 들어간다.
2. 상단바에 format on save 를 검색한다.
3. 아래 영역을 체크한다.
   

2. 포맷팅 파일을 만드는 방법

1. root 폴더에 .vscode 폴더를 생성한다.
2. 해당 폴더 아래에 settings.json 파일을 생성한다.
3. 다음과 같이 입력한다.

{
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  }
}