vscode 에서 Prettier 사용하기

Prettier는 코드 포매터로 일관된 코드 스타일을 적용해준다.

처음 팀 프로젝트를 진행할 때 Prettier를 사용하지 않고 git에 코드를 올렸다.
나는 Prettier의 존재를 몰랐고, 왜 써야하는지도 몰랐다.

근데 계속 프로젝트를 진행하다 보니 왜 필요한지 알게 되었다.
팀원끼리 일관된 코드 포맷를 사용하지 않자 소스 코드 관리가 어려웠다.
포매터를 사용하던 팀원도 있었는데, 그 팀원은 다른 사람의 코드를 pull 할 때마다 conflict이 발생했다.
그리고 같은 파일의 코드를 수정-저장하면 포매터가 파일의 전체 코드를 수정해주기 때문에,
commit을 했을 때 코드를 수정한건지, 코드 포매터로 스타일만 바뀐건지 확인해야했다.

Please Prettier

'Prettier 진짜 편해 무조건 사용해야해'
팀원끼리 초기 설정하면 무조건 작업 효율은 증가한다.

지금 회사에서는 코드 포매터를 사용 안하고 있는데,
곧 프론트 파트끼리는 공통 포맷을 정해 사용할 것 같다.

그래서 이것저것 찾아보다가 사용법을 정리했다.

vscode에서 Prettier 기본설정

1. extension에서 Prettier 설치

2. vscode setting 에서 기본 포매터로 설정
Default Formatter(Also modified in Remote) - Prettier

선택사항 : Format On Save (저장할때 코드포매터 자동 설정 여부) 체크하기

이 기능은 Prettier를 사용하는 핵심이다.
무조건 체크해야 하지만 회사에 따라 사용하면 재앙이 될 수도 있다.
코드포매터를 사용하지 않는 소스코드를 저장과 동시에 전체 수정하기 때문에 커밋할때 무조건 문제가 된다.
그래서 부분적인 해결책도 있다.

회사에서 만약 Prettier를 사용하고 있지 않다면, Format On Save 기능을 체크하지 않고 사용하고 싶을 때에만 포매터를 적용하고 싶은 파일에서 오른쪽 마우스 - Format Document 클릭해서 그 파일만 적용하면 된다.
(포매터가 적용된 부분에서 내가 수정한 코드만 복사하고 그 포맷을 적용하기 전으로 돌려 붙여넣기한다. 맞다. 아주 귀찮다.)

js나 ts와 같이 특정 파일에만 적용할 수도 있다.
vscode의 setting.json 파일에 아래의 내용을 추가해준다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  // 적용하려는 형식마다 개별적으로 설정
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[svelte]": {
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.formatOnSave": true
  },
  "[scss]": {
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.formatOnSave": true
  }
}

이렇게 설정하면 다른 파트의 소스코드는 코드포맷터가 작동하지 않아 편리하다.

선택사항 : Prettier 세부 설정

프로젝트 폴더 최상단에 .prettierrc 를 추가해서 정의한다.

{
  "singleQuote": true, // 작은따옴표 사용
  "printWidth": 80, // 행 최대 길이, 작은 수로 설정할수록 코드줄수가 많아짐
  "tabWidth": 2,
  "useTabs": true, // 스페이스 대신 탭 사용
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "avoid", 
  "endOfLine": "auto"
}

• Prettier가 적용되지 않아도 되는 폴더나 파일은 .prettierignore 파일을 만들고 안에 작성해준다.

# 폴더
node_modules
dist

# 모든 html 파일
*.html

# 특정 파일
template.html
template.js

전역적으로 세부 설정을 하고 싶다면!

.prettierrc 파일 없이도 세부 설정을 할 수 있다.
vscode의 setting.json 에서 prettier.으로 시작하는 키워드로 정의하면 된다.

{
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "prettier.useTabs": true,
  "prettier.trailingComma": "none",
  "prettier.bracketSpacing": true,
  "prettier.arrowParens": "avoid",
  "prettier.endOfLine": "auto"
}

이렇게 설정하면 프로젝트 단위가 아닌 단일 파일에도 코드 포맷에 대한 세부 설정이 가능하다.

만약 .prettierrc 와 setting.json 모두 설정하면?

.prettierrc 파일과 settings.json 파일에 상이한 코드 스타일이 있다면, .prettierrc 파일이 우선적으로 적용된다.

기본적으로 Prettier는 프로젝트 루트 디렉토리에서 .prettierrc 파일을 찾아 설정을 적용한다.
그리고 .prettierrc 파일이 없다면, VSCode의 settings.json 파일에 있는 Prettier 설정을 사용한다.
그렇기 때문에 .prettierrc 파일에 있는 설정이 더 우선순위에 있다.