코드 포매터 Prettier 설명 및 설치 방법 (+저장 시 자동 포맷 설정 방법)

코드 포매터(Code Formatter), Prettier가 무엇인가요?

코드 포매터란 정한 코딩 컨벤션(코드 작성 스타일 규칙)에 따라 코드 스타일을 알아서 정리해주는 도구입니다.

Prettier는 VSCode Extension으로, 코드 포매터입니다.

코딩 컨벤션을 정하고 코드 포매터를 활용하면 아래 밈처럼 두 개발자 사이의 시빌워가 생기지 않습니다.

정한 코딩 컨벤션에 맞춰 알아서 포맷팅해주기 때문에 코딩 컨벤션을 지키지 않아 다른 개발자를 화나게 하는 일 혹은 추후에 수정해야하는 노고를 줄여줍니다.

또한 개발할 때도 코딩 컨벤션을 일일이 찾아보면서 스타일을 맞추는 수고없이 코드를 짜기만 하면 됩니다.

코딩 컨벤션으로 인한 두 개발자 사이의 시빌워

 

Prettier 설치 및 설정 방법 (+저장 시 자동 정렬 설정)

좌측 메뉴바의 Extensions를 클릭합니다. 이후 Prettier를 검색해 설치합니다.

저는 이미 설치되어 있어 "Uninstall"이 뜨지만 처음 설치하신다면 "Install"이라고 뜨실 겁니다. 해당 버튼을 눌러 설치하시면 됩니다.

 

설치했다면 원하는 대로 코딩 스타일을 지정할 수 있습니다.

첫번째 방법은 Settings에 들어가서 지정하는 방법입니다. 설정에 들어가서 Prettier 검색을 하면 Prettier 관련 설정화면이 뜹니다. 아래 화면에서 원하는 대로 설정할 수 있습니다.

 

두번째 방법은 Prettier configuration 파일을 통해 관리하는 것입니다.

.prettierrc.json 혹은 .prettierrc.js 등으로 관리합니다. 파일 예시는 다음과 같습니다.

// .prettierrc.json
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "bracketSpacing": true,
  "printWidth": 80
}

// prettier.config.js or .prettierrc.js
module.exports = {
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "bracketSpacing": true,
  "printWidth": 80
}

 

설정에서 아래와 같이 경로 설정을 해줍니다.

.prettierignore을 통해 Prettier의 영향을 받지 않는 파일도 별도로 지정가능합니다.

 

마지막으로, 저장 시 자동으로 정렬하도록 설정하는 방법입니다.

Default Formatter를 Prettier로 설정한 다음 Format on Save 설정을 체크해주세요. 저장 이외에도 타이핑했을 때마다 붙여넣기 할 때마다 자동으로 포맷되도록 설정할 수 있습니다. 저장 시 자동 포맷팅 기능을 활용하면 편하게 개발이 가능합니다. 그럼 모두 즐코딩 :D

 

+) 혹시 설정이 잘 안 먹힌다면 일단 껐다 켜보세요