개발 환경 Prettier 공부 및 설정하기

prettier

 

개발 환경을 설정할 때 Eslint, Prettier 를 많이 사용한다. 그런데 설정을 하다보면 오류도 많이 나고 둘의 정확한 차이가 무엇인지 헷갈리는 경우가 많다. 이러한 경우로 많은 시간을 낭비하게 되기 때문에 여기서 확실하게 공부하고 정리하는 시간을 가지려고 한다.

 

Prettier

---

Prettier는 코드 포맷터로 작성한 코드가 정해진 코드 스타일을 따르도록 자동으로 변환해 주는 도구이다. 좀 더 쉽게 표현하면 에디터 내에 줄 바꿈, 공백, 들여 쓰기와 같은 코드 텍스트를 일관되게 작성하도록 도와주는 도구이다. 예를 들어보면 A 개발자는 세미콜론을 사용하고, B 개발자는 세미콜론을 사용하지 않는다. 또 A 개발자는 문자열을 큰따옴표( " )를 이용해 감싸주지만 B 개발자는 작은따옴표( ' )로 감싸준다. 서로 다른 코드 작성 스타일을 일관되게 작성하도록 도와줌으로써 생산성과 팀워크를 올려주는 도구이다.

 

Prettier 세팅 방법

---

Prettier를 설치하고 세팅하는 방법은 사용하는 에디터 내부에서 extension으로 설치하는 방법과 라이브러리를 프로젝트 내에서 직접 설치하는 방법이 있다.

 

1. 에디터 내부에서 extension으로 설치 하는 방법

prettier extension, 설정, setting.json

 

VScode를 기준으로 extension으로 prettier를 설치해 준다. 설치를 완료하면 바로 적용된다. 이렇게 설치한 Prettier는 자신의 로컬 환경에서만 적용되는 Prettier 방식이다. 설치한 후 설정에서 Prettier를 검색하면 관련 여러 설정들이 나오는데 자신이 원하는 대로 적용할 수 있고, 또는 setting.json 파일에 직접 설정을 하여 적용할 수 있다. 

 

2. 프로젝트 내에서 직접 설치하는 방법

$npm install -D prettier

$yarn add -D prettier

 

자신이 사용하는 패키지 매니저를 통해 개발 의존성으로 설치해 주면 된다. 이렇게 설치한 Prettier에 Prettier 규칙을 적용하여 프로젝트 내에서 동일한 코드 스타일로 작성할 수 있게 설정할 수 있다. 프로젝트 내에서 Prettier를 적용하는 방법으로는 아래와 같다.

 

2-1. Package.json 에 Prettier 속성 명시

package.json내 prettier 속성 명시

 

위의 이미지처럼 package.json 내부에 prettier 속성을 명시해 주고 사용할 규칙들을 작성해 주면 적용된다. 이 방법은 개발의존성으로 설치하지 않고 extension만 설치되어 있어도 적용이 가능하다. 다만 프로젝트 내에서 사용하려면 여러 개발자들이 이러한 규칙들을 보고 알 수 있도록 이렇게 표시할 수도 있다는 것 정도로 알고 있으면 될 것 같다.

 

2-2. 별도의 설정 파일 생성

.prettierrc 파일

 

프로젝트 내에서 주로 사용되는 방법으로 .prettierrc, .prettierrc.json, .prettierrc.yml, .prettierrc.js 등과 같은 파일의 형태를 만들고 Prettier 규칙을 설정해 주면 적용된다. 위의 이미지는 .prettierrc 파일을 만들고 사용할 옵션들을 설정해 둔 예시이다. 

 

Prettier Options

---

Prettier에서 사용할 수 있는 다양한 옵션들이 있는데 여기서는 주로 사용되는 옵션들 위주로 정리해 보려고 한다. Prettier의 옵션들의 기본 설정값들은 자바스크립트 커뮤니티에서 오랜 기간 합의된 관행과 모범 사례를 기반으로 결정되었다고 한다. 그렇기 때문에 버전이 변경되면 기본 값들이 변경될 수 있다. 이 외에도 다양한 옵션들은 공식 문서 에서 확인할 수 있다.

 

옵션	기본값	의미	사용예시
tabWidth	2 (int)	탭 너비	"tabWidth" : 4
semicolons	ture (bool)	세미콜론 사용 여부	"semi": false
quotes	false (bool)	큰 따옴표, 작은 따옴표 여부	"singleQuote": true
TrailingCommas	all (es5, none)	마지막 요소 쉼표 작성 여부	"trailingComma": "none"
Arrow Function Parentheses	alwats (avoid)	화살표 함수내 매게변수 소괄호 유무	"arrowParens": "avoid"

 

Prettier · Opinionated Code Formatter

 

ESLint 통합해서 사용하기

---

대부분의 프로젝트에서는 Prettier만 혼자 사용하지 않고 ESLint와 함께 사용한다. 코드 품질과 코드 작성 스타일을 일관되게 유지함으로써 개발 효율을 증가시킬 수 있기 때문이다. 그렇기 때문에 두 도구를 통합하여 사용하는데 ESLint와 Prettier가 서로 중복되는 규칙들이 있어 여러 플러그인을 통해 이들의 충돌을 방지할 수 있다. 다만 ESLint v8.53.0부터 포맷팅 규칙들을 적용하지 않는다.

 

$npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier

$yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier

 

ESLint와 Prettier를 설치하고 eslint-config-prettier, eslint-plugin-prettier를 설치한다.  eslint-config-prettier는 ESLint에서 Prettier와 겹치는 포맷팅 규칙을 삭제하고 eslint-plugin-prettier는 ESLint에 Prettier의 포맷팅 규칙을 추가한다. 쉽게 말해 ESLint는 코드 품질만 검사하고 코드 포맷터는 Prettier를 사용하겠다고 설정하는 것이다.

 

React는 package.json에 eslintConfig가 이미 있기 때문에 이것을 제거하고(그대로 사용해도 무방하다) .eslintrc.json 정의해주면 된다.

 

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
  	"prettier/prettier": "error"
  }
}

 

위와 같은 .eslintrc.json에서 "extends": ["prettier"]이 부분은 eslint-config-prettier를 사용 즉 중복되는 규칙을 제거하고 "plugins": ["prettier"]이 부분은 eslint-plugin-prettier를 사용하고, "rules:" { "prettier/prettier": "error" } 는 Prettier 규칙을 위반하게 되면 eslint 에러로 판단하도록 하는 설정이 된다.  하지만 두 플러그인을 모두 사용한다면 하나하나 설정해 주지 않고 아래와 같이 한번에 설정이 가능하다.

 

{
  "extends": ["plugin:prettier/recommended"]
}

 

이렇게 설정해 주면 Prettier 규칙을 정의한 루트 디렉토리 내부에서 .prettierrc 파일을 찾아 규칙을 적용한다.