ED's Development: VS Code에서 Prettier 설정

들어가며

코드 작성 시 일관된 스타일을 유지하는 것은 가독성과 협업에서 매우 중요합니다. 이를 도와주는 도구로 Prettier가 널리 사용됩니다. 특히, VS Code와 결합하면 자동으로 포맷팅을 적용하여 개발 시간을 절약할 수 있습니다. 이번 글에서는 VS Code에서 Prettier를 설치하고 설정하는 과정을 소개합니다.

Prettier란?

Prettier는 JavaScript, TypeScript, HTML, CSS 등 다양한 언어를 지원하는 코드 포맷터입니다. 팀원 간의 코드 스타일 충돌을 방지하며, 설정한 규칙에 따라 자동으로 코드 스타일을 맞춰주는 것이 특징입니다. 이를 통해 개발자는 코드 작성에만 집중할 수 있습니다.

VS Code에서 Prettier 설정하기

1. Prettier 확장 프로그램 설치

VS Code의 사이드바에서 Extensions 아이콘을 클릭합니다.
검색창에 "Prettier - Code formatter"를 입력하고, Prettier 확장을 설치합니다.

설치가 완료되면, Prettier가 활성화된 상태로 코드 포맷팅을 적용할 준비가 됩니다.

2. 기본 포맷터로 Prettier 설정

VS Code의 기본 포맷터로 Prettier를 설정하려면 아래 단계를 따르세요:

파일 → 환경 설정 → 설정으로 이동합니다.
검색창에 "default formatter"를 입력합니다.
Editor: Default Formatter를 Prettier로 선택합니다.

3. 저장 시 포맷팅 설정

코드를 저장할 때 자동으로 포맷팅되도록 설정하려면 다음 단계를 따르세요:

설정 파일(settings.json)을 엽니다.
다음 내용을 추가합니다:

{
    "editor.formatOnSave": true
}

이제 코드를 저장할 때마다 Prettier가 자동으로 코드 스타일을 정리합니다.

추가 설정: Prettier 규칙 변경하기

Prettier는 기본적으로 표준 스타일을 따르지만, 팀의 요구에 따라 설정을 변경할 수 있습니다. 설정 파일(.prettierrc)을 생성한 후, 아래와 같이 규칙을 정의할 수 있습니다:

{
    "semi": false,
    "singleQuote": true,
    "tabWidth": 2
}

위 설정은 다음과 같은 규칙을 적용합니다:

semi: 세미콜론 생략
singleQuote: 작은따옴표 사용
tabWidth: 들여쓰기 너비 2칸

문제 해결

설정 후 Prettier가 작동하지 않을 경우, 다음을 확인하세요:

Prettier 확장이 제대로 설치되었는지
저장 시 포맷팅 옵션이 활성화되었는지
작업 중인 파일이 Prettier가 지원하는 언어인지

이 외에도 Prettier가 프로젝트별로 다른 설정을 적용하도록 eslint와 함께 사용할 수도 있습니다.

Prettier 옵션

{
  "arrowParens": "always", // 화살표 함수의 매개변수가 하나일 때 괄호를 사용할지 여부
  "bracketSpacing": true, // 객체 리터럴에서 중괄호 내부에 공백 삽입 여부
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
  "jsxSingleQuote": false, // JSX에서 single quote 사용 여부
  "printWidth": 80, // 한 줄에 출력되는 코드의 최대 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식
  "quoteProps": "as-needed", // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single quote 사용 여부
  "tabWidth": 2, // 탭 간격
  "trailingComma": "all", // 여러 줄을 사용할 때 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부
  "parser": '', // 사용할 parser 지정 (자동으로 지정됨)
  "filepath": '', // parser를 유추할 수 있는 파일 경로 지정
  "rangeStart": 0, // 포맷팅을 적용할 파일의 시작 지점
  "rangeEnd": Infinity, // 포맷팅을 적용할 파일의 끝 지점
  "requirePragma": false, // 파일 상단에 정의된 주석을 기반으로 포맷팅 사용 여부
  "insertPragma": false, // 미리 정의된 @format 주석 추가 여부
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ] // 특정 파일별로 옵션을 다르게 설정
}

옵션 상세 설명

옵션	설명
`arrowParens`	화살표 함수의 매개변수가 하나일 때 괄호 사용 여부 (`"always"` 또는 `"avoid"`)
`bracketSpacing`	객체 리터럴에서 중괄호 내부 공백 삽입 여부
`endOfLine`	파일 끝 라인 형식 (`"lf"`, `"crlf"`, `"cr"`, `"auto"`)
`jsxSingleQuote`	JSX에서 single quote 사용 여부
`printWidth`	한 줄에 출력되는 코드의 최대 길이
`semi`	세미콜론 사용 여부
`singleQuote`	single quote 사용 여부
`tabWidth`	탭 간격 (기본값: 2)
`trailingComma`	후행 콤마 사용 방식 (`"none"`, `"es5"`, `"all"`)

ED's Development

20241228

VS Code에서 Prettier 설정