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‘를 검색하고 체크박스에 체크를 합니다. 이렇게 하면 저장할 때마다 코드가 자동으로 정리됩니다.
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 설정
2. VScode의 settings.json에 프리티어 속성값을 설정
: settings.json 파일을 열어서 Prettier 설정 값을 직접 추가하시면 됩니다. 단, 말머리에 “prettier.“을 붙여줘야 합니다.
3. 루트 디렉토리에 “.prettierrc.json” 파일 생성 및 JSON 형식으로 규칙 정의
: 프로젝트 루트 디렉토리에. prettierrc.json 파일을 생성하고 JSON 형식으로 Prettier 규칙을 정의합니다.
▼ 예시
{
"semi": false,
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2
}
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!
관련 이전 게시글
VSCode에서 Live Server 확장 프로그램 설치 및 사용하기
VSCode에서 Markdown All in One 확장 프로그램 사용하는 방법
VSCode 단축키 모음: 개발 속도 향상을 위한 필수 단축키 정리