VSCode에서 Prettier 설정 및 사용법: 코드 스타일 자동 정리

코드를 깔끔하게 유지하는 것은 프로그램의 가독성과 유지 보수성을 향상하는 데 중요한 요소입니다. VSCode에서 Prettier 확장 프로그램을 사용하면 코드를 자동으로 정리하여 일관된 스타일을 유지할 수 있습니다. 이번 글에서는 Prettier확장 프로그램을 설치하고 사용하는 방법에 대해서 알아보겠습니다.

▼ 목차

Prettier 확장 프로그램 설치하기
Format on Save 확인
Default Formatter 확인
Prettier에서 설정 가능한 옵션
설정방법 3가지

1. Prettier 확장 프로그램 설치하기

VSCode에서 Prettier 확장 프로그램을 설치하려면 확장 탭에서 ‘Prettier‘를 검색하고 설치 버튼을 클릭하여 설치하시면 됩니다. 설치가 완료되면 VSCode를 재시작합니다.

2. Format on Save 확인: 체크

VSCode에서 설정으로 이동한 다음 ‘editor.formatOnSave‘를 검색하고 체크박스에 체크를 합니다. 이렇게 하면 저장할 때마다 코드가 자동으로 정리됩니다.

VSCode에서 설정화면서 'editor.formatOnSave'를 검색하고 체크박스에 체크를 합니다.

3. Default Formatter 확인: Prettier – code formatter 선택

VSCode 설정에서 ‘editor.defaultFormatter’를 검색한 후 “Prettier – Code Formatter“를 선택합니다. 이렇게 설정하면 Prettier가 기본 포맷터로 사용됩니다.

4. Prettier에서 설정 가능한 옵션

아래는 Prettier의 주요 설정 옵션입니다. 설정들은 선호도에 따라 조절할 수 있습니다.

arrowParens: 화살표 함수 괄호 사용 방식
bracketSpacing: 객체 리터럴에서 괄호에 공백 삽입 여부
endOfLine: EoF 방식, OS별로 처리 방식이 다름
htmlWhitespaceSensitivity: HTML 공백 감도 설정
jsxBracketSameLine: JSX의 마지막 >를 다음 줄로 내릴지 여부
jsxSingleQuote: JSX에 single 쿼테이션 사용 여부
printWidth: 줄 바꿈 할 폭 길이
proseWrap: markdown 텍스트의 줄 바꿈 방식
quoteProps: 객체 속성에 쿼테이션 적용 방식
semi: 세미콜론 사용 여부
singleQuote: single 쿼테이션 사용 여부
tabWidth: 탭 너비
trailingComma: 여러 줄을 사용할 때 후행 콤마 사용 방식
useTabs: 탭 사용 여부
vueIndentScriptAndStyle: Vue 파일의 script와 style 태그의 들여 쓰기 여부
parser: 사용할 parser를 지정, 자동으로 지정됨
filepath: parser를 유추할 수 있는 파일을 지정
rangeStart: 포맷팅을 부분 적용할 파일의 시작 라인 지정
rangeEnd: 포맷팅 부분 적용할 파일의 끝 라인 지정
requirePragma: 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정
insertPragma: 미리 정의된 @format marker의 사용 여부
overrides: 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용

5. 설정방법 3가지

Prettier 설정을 적용하는 방법에는 세 가지가 있습니다. 세 가지 방법 중 선택하여 Prettier를 사용하시면 됩니다.

1. VSCode 설정 화면에서 ‘Prettier‘ 검색을 통한 UI 설정

VSCode 설정 화면에서 'Prettier' 검색을 통한 UI 화면에서 설정합니다.

2. VScode의 settings.json에 프리티어 속성값을 설정

: settings.json 파일을 열어서 Prettier 설정 값을 직접 추가하시면 됩니다. 단, 말머리에 “prettier.“을 붙여줘야 합니다.

VScode의 settings.json에 프리티어 속성값으로 설정합니다.

3. 루트 디렉토리에 “.prettierrc.json” 파일 생성 및 JSON 형식으로 규칙 정의

: 프로젝트 루트 디렉토리에. prettierrc.json 파일을 생성하고 JSON 형식으로 Prettier 규칙을 정의합니다.

▼ 예시

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

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!