VS Code에서 Prettier 설정

들어가며

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

Prettier란?

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

VS Code에서 Prettier 설정하기

1. Prettier 확장 프로그램 설치

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

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

2. 기본 포맷터로 Prettier 설정

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

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

3. 저장 시 포맷팅 설정

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

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

{
    "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")

ESLint 및 Prettier 줄바꿈 오류 해결 방안

문제 발생 상황

환경:

• 운영 체제는 Windows입니다.
• VSCode를 사용하여 프로젝트를 개발하고 있습니다.
• 프로젝트는 Mac 사용자가 생성했으며, Mac/Linux 환경의 기본 줄바꿈 방식인 LF를 사용하고 있습니다.
• ESLint와 Prettier가 설정된 프로젝트입니다.

프로젝트 ESLint 설정:

• ESLint는 plugin:prettier/recommended를 통해 Prettier 규칙을 ESLint 규칙으로 통합하고 있습니다.
• Prettier 규칙 위반 시 ESLint가 오류로 보고하도록 설정되어 있습니다.
• Prettier는 기본적으로 줄바꿈 방식을 Unix 스타일(LF)로 강제하고 있습니다.

문제 증상

pnpm i 실행 후 ESLint 및 Prettier에서 다음과 같은 오류가 발생하였습니다:

• [eslint] prettier/prettier: Delete ␍

Prettier가 줄바꿈 방식으로 LF를 요구했으나, Windows 환경에서 파일이 CRLF로 변환된 것이 원인으로 보입니다.

문제 원인

운영 체제 별 줄바꿈 차이:

• Mac 사용자는 기본적으로 LF 줄바꿈 방식을 사용하지만, Windows에서는 Git의 core.autocrlf 설정에 따라 파일을 CRLF로 변환합니다.
• Prettier는 줄바꿈 방식을 엄격히 검사하며, CRLF를 허용하지 않고 LF를 요구합니다.

Git의 줄바꿈 변환:

• Windows의 기본 설정인 core.autocrlf=true로 인해 파일을 Git 저장소에서 내 컴퓨터의 작업 디렉토리로 가져오면 CRLF로 변환됩니다.

Prettier와 ESLint 규칙의 엄격성:

• Prettier는 줄바꿈 방식의 일관성을 유지하도록 강제하며, ESLint는 Prettier 규칙 위반을 오류로 보고합니다.

해결 방법

1. Git 전역 설정 변경

리모트 레포지토리를 로컬로 클론할 때, 줄바꿈 방식을 LF로 고정하여 CRLF로 변환되는 문제를 방지합니다.

git config --global core.autocrlf false
git config --global core.eol lf

• git config --global core.autocrlf false: Git이 줄바꿈을 자동 변환하지 않도록 설정합니다.
• git config --global core.eol lf: 파일을 항상 LF 줄바꿈 방식으로 저장하도록 강제합니다.

2. ESLint와 Prettier 설정 고정을 통한 문제 해결

ESLint와 Prettier 설정을 고정하여 줄바꿈 방식을 강제하는 방법입니다.

Prettier 설정 추가

{
  "endOfLine": "lf"
}

ESLint 규칙 추가

{
  "extends": ["plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "lf"
      }
    ]
  }
}

주의: endOfLine: "auto"는 줄바꿈 방식을 강제하지 않으므로, LF와 CRLF 두 방식 모두 허용합니다.

3. 프로젝트 VSCode 설정

Windows 개발자의 편의를 위해 VSCode에서 파일 생성 시 자동으로 LF 방식으로 생성되도록 설정합니다.

{
  "files.eol": "\n",
  "editor.formatOnSave": true
}

• files.eol: "\n": 새로 생성되는 모든 파일의 줄바꿈 방식을 LF로 강제합니다.
• editor.formatOnSave: true: 저장 시 Prettier 등의 포매터를 자동 실행하여 줄바꿈 방식을 다시 정리합니다.

VSCode에서 수동으로 줄바꿈 방식을 변경하는 방법

VSCode에서 하단 상태 바에 있는 LF 또는 CRLF를 클릭하면 줄바꿈 방식을 선택할 수 있는 옵션이 나타납니다. 하지만, 이 방법은 현재 파일에만 적용되므로, 앞으로 생성되는 모든 파일에 일관된 줄바꿈 방식을 사용하려면 위에서 설명한 방법처럼 설정에서 기본값을 변경하는 것이 좋습니다.

결론

위 해결 방법을 통해 운영 체제 간의 줄바꿈 방식 차이로 인해 발생하는 문제를 완벽히 해결할 수 있습니다. 이 방법을 프로젝트 초기 설정에 포함시키면, 줄바꿈 문제로 인한 불필요한 시간 낭비를 방지하고, 모든 팀원이 동일한 환경에서 작업할 수 있는 기반을 마련할 수 있습니다.