Prettier와 VSCode 설정으로 코드 스타일 통일하기

코드를 구현하는 일만큼 중요하다고 생각하는게 바로 코드를 정리하는 일입니다.

 

만약 통일된 규칙 없이 작성된다면 불필요한 변경내역(diff)이 쌓여 머지하기 여려워지고,

협업 시에도 서로 다른 스타일로 인해 코드의 가독성이 크게 떨어지게 됩니다.

 

즉, 정해진 규칙대로 작성된 코드는 작업 효율을 높여주고 유지보수에도 유리한 만큼

"내가 보기에도 깔끔하고, 남이 보기에도 한 눈에 이해되는 코드"가 필요한데요.

 

이러한 규칙을 코드 포맷(Code Format) 이라고 하고,

이를 자동으로 도와주는 도구를 코드 포맷터(Code Formatter) 라고 부릅니다.

여기서는 여러 포맷터 중 대중적으로 사용하는 Prettier 포멧터를 기준으로 설명해보겠습니다.

 

Prettier 설치하기

 

먼저, VSCode 왼쪽 사이드바에서 Extensions(확장 프로그램) 아이콘을 클릭합니다.

그 후 prettier 를 검색하여, Prettier - Code formatter 확장을 설치해주면 됩니다.

 

VSCode 설정하기 (.vscode/settings.json) 

다음으로 저장 시 자동으로 코드가 정리되도록 VSCode 설정을 추가해봅시다.

프로젝트 폴더 최상단에 .vscode 라는 폴더를 만들고, 그 안에 settings.json 파일을 추가합니다.

이 파일은 VSCode 의 설정을 코드로 관리하고 수정할 수 있도록 해줍니다.

 

settings.json 파일을 추가했으면, 아래와 같이 작성합니다.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true
}

 

1. "editor.formatOnSave": true

프로젝트를 저장할 때마다 코드 포멧터를 실행합니다.

즉, 저장을 하면 자동으로 코드가 정리되므로 코드 스타일이 달라지는 것을 방지할 수 있습니다.

 

2. "editor.defaultFormatter": "esbenp.prettier-vscode

기본 포맷터를 위에서 설치한 Prettier 로 지정합니다.

 

3. "prettier.requireConfig": true

반드시 .prettierrc 같은 설정 파일이 있을 때만 Prettier가 실행되도록 합니다.

이것으로 프로젝트별 통일된 규칙을 강제할 수 있습니다.

 

Prettier 규칙 설정하기 (.prettierrc)

이제 프로젝트 최상단에 Prettier 규칙을 설정해주는 .prettierrc 파일을 추가합니다.

 

아래는 제가 주로 사용하는 예시입니다.

{
  "singleQuote": false,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "bracketSpacing": true,
  "arrowParens": "always"
}

 

1. singleQuote: false
문자열에 쌍따옴표를 사용합니다. (홑따옴표를 쌍따옴표로 바꿔줍니다.)
예) "use client"; import Link from "next/link";

2. semi: true
문장 끝에 세미콜론을 항상 붙입니다.

3. useTabs: false
들여쓰기를 스페이스로 만듭니다. (탭 문자를 쓰지 않음)

4. tabWidth: 2
들여쓰기 수준 하나를 스페이스 2칸으로 설정합니다.

5. trailingComma: "all"
가능한 모든 곳에 끝 콤마를 붙여요(객체, 배열, import/export, 함수 파라미터까지).
장점: 줄 추가/삭제 시 diff가 깔끔함.

6. printWidth: 120
한 줄 길이가 120자를 넘어가면 줄바꿈.

7. bracketSpacing: true
객체 리터럴/구조분해/임포트 중괄호 안에 스페이스를 둡니다.
예: {foo: bar} → { foo: bar }

8. arrowParens: "always"
화살표 함수의 파라미터가 하나여도 항상 괄호를 씌움.
예) x => x → (x) => x (파라미터가 늘 때 diff 안정적)

 

번외 : 확장 프로그램 추천하기 (.vscode/extensions.json)

협업을 할 때는 프로젝트에 필요한 확장 프로그램 목록을 추천해 줄 수도 있습니다.

프로젝트 루트의 .vscode 폴더 안에 extensions.json 파일을 추가합니다.

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss"
  ]
}

 

이렇게 해두면 팀원이 프로젝트를 열었을 때,

VSCode에서 해당 확장 프로그램 설치를 추천하는 알림이 표시됩니다.

 

이렇게 프로젝트마다 규칙과 설정을 미리 준비해두면,

혼자 작업할 때도 깔끔하고, 협업 시에도 통일된 환경을 유지할 수 있습니다.

 

코드 정리 습관을 자동화로 해결하는 효율적인(?) 방법이였습니다.