VSCode 자동 포맷팅 설정 방법, 코드를 작성하고 파일을 저장했는데 들여쓰기가 엉망이 되어 디버깅이 어려워지고 매번 포맷 명령을 실행해야 하는 불편함을 겪고 있다면 이 문제는 에디터의 기본 설정이 포맷터와 연동되지 않아 발생합니다. 코드의 들여쓰기(Indentation)가 불규칙하면 가독성이 떨어질 뿐만 아니라, 실제 로직 오류를 유발하거나 Git을 통한 협업 시 불필요한 충돌(Diff Conflict)을 만드는 주범이기도 합니다. 이 글에서는 단축키 하나로 복잡한 코드가 정돈되는 환경을 만드는 VSCode 자동 포맷팅 설정 방법을 구체적인 단계와 도구 비교를 통해 완벽하게 해결해 드립니다.
많은 개발자가 저장 버튼을 누를 때마다 코드가 자동으로 정리되기를 기대하지만, VSCode는 기본적으로 이 기능이 비활성화되어 있거나 사용 중인 확장 도구와 충돌할 수 있습니다. 단순히 보기 좋게 만드는 것을 넘어, Prettier나 ESLint 같은 도구를 에디터와 완벽하게 연동하여 파일 저장 시 즉시 일관된 코드 스타일을 적용하는 설정법을 상세히 다룹니다. 특히 최근 프로젝트에서 필수적인 팀 코딩 규칙(Convention) 준수를 위해서는 개별 개발자의 취향을 배제하고 기계적으로 코드 스타일을 통일하는 과정이 필수적입니다.
개발 속도를 저해하는 잦은 수동 포맷팅에서 벗어나, 오로지 로직에만 집중할 수 있는 깔끔한 개발 환경을 구축하는 과정을 하나씩 따라오세요. 이 설정은 단순한 편의 기능을 넘어, 유지보수성이 뛰어난 코드를 작성하는 전문 개발자로 나아가는 첫걸음입니다.
- VSCode 기본 설정과 확장 도구를 연동하여 저장 시 자동 포맷팅을 실행하는 방법
- Prettier, ESLint, Black 등 대표적인 포맷터의 특징과 프로젝트에 맞는 도구 선택 기준
- settings.json을 활용한 세밀한 설정 규칙 및 팀 프로젝트에서의 충돌 해결법
- EditorConfig를 활용하여 운영체제별(Windows/Mac) 개발 환경 차이를 해소하는 노하우
VSCode에서 파일 저장 시 자동 포맷팅을 설정하면 코드가 흐트러지는 현상을 방지하고, 저장마다 일관된 스타일을 적용해 가독성을 높이며, 개발 시간을 평균 30% 단축할 수 있습니다.
VSCode 자동 포맷팅 설정 방법: 생산성을 높이는 핵심 원리
코드를 작성할 때 들여쓰기와 공백이 섞이면 가독성이 떨어질 뿐만 아니라, 버그를 유발하는 주요 원인이 되기도 합니다. 실제로 개발자 커뮤니티에서는 "저장할 때마다 자동으로 코드를 정리하도록 설정할 수 있습니다"라는 팁이 자주 언급될 정도로, 자동 포맷팅은 개발자의 필수 기술로 여겨집니다. clien.net의 한 사용자는 AI 코딩 도구를 언급하며 자동 정리 기능이 주는 편리함과 집중력 향상 효과를 강조한 바 있습니다. 이는 단순히 예쁘게 만드는 것이 아니라, 코드를 읽는 뇌의 인지 부하를 줄여 논리적 오류를 더 빨리 찾아내게 돕기 때문입니다.
VSCode 자동 포맷팅 설정 방법의 핵심은 에디터가 파일을 저장하는 이벤트(onSave)를 감지했을 때, 미리 지정된 포맷터를 실행하도록 명령하는 것입니다. 이를 통해 Cmd+S(Mac) 또는 Ctrl+S(Windows)를 누르는 순간 코드가 일정한 규칙에 맞춰 재배열됩니다. 이 과정은 단순히 보기 좋게 만드는 것을 넘어, 협업 시 발생할 수 있는 코드 스타일 충돌을 원천적으로 차단하는 역할을 합니다. 예를 들어, 팀원 A는 탭(Tab)을 사용하고 팀원 B는 스페이스(Space) 2칸을 사용한다면 Git 병합 시 끔찍한 혼란이 야기되지만, 자동 포맷팅은 이를 하나의 스타일로 강제 통일시켜 줍니다.
자동 포맷팅을 설정하지 않은 상태에서는 코드를 작성한 후 Shift+Alt+F(Windows) 또는 Shift+Option+F(Mac) 단축키를 눌러 수동으로 포맷팅해야 합니다. 이 과정이 반복되면 흐름이 끊기고 집중력이 저하됩니다. 따라서 개발 시작 전에 환경 설정을 완료하는 것이 중요합니다. 특히 최근 업데이트된 VSCode 1.86 버전 이상에서는 포맷터 관련 기능이 더욱 강화되어, 설정만 올바로 되어 있다면 별도의 조작 없이도 완벽한 코드 정리가 가능합니다. 또한, VSCode의 'Extension Host' 프로세스가 백그라운드에서 포맷터를 효율적으로 관리하기 때문에 대규모 프로젝트에서도 속도 저하 없이 즉각적인 반응을 기대할 수 있습니다.
이제 본격적으로 어떤 도구를 사용하여 포맷팅할지 결정하고, 이를 VSCode에 적용하는 구체적인 방법을 알아보겠습니다. 설정을 시작하기 전 본인의 프로젝트가 어떤 언어를 사용하는지, 그리고 팀 내에서 권장하는 스타일 가이드가 무엇인지 확인하는 것이 좋습니다.
- 현재 프로젝트의 주요 언어가 무엇인가요? (JavaScript, Python, Java 등)
- 이미 프로젝트 폴더에
.prettierrc나 .eslintrc 파일이 존재하나요?- 팀원들과 공유하는 코드 스타일 가이드라인이 있나요?
Photo by Daniil Komov on Pexels
대표 코드 포맷터 비교 분석: Prettier vs ESLint vs Black
VSCode에서 자동 포맷팅을 구현하려면 먼저 프로젝트의 성격에 맞는 포맷터를 선택해야 합니다. 포맷터는 코드를 다시 쓰는 도구이며, 언어와 팀의 규칙에 따라 적절한 도구를 선정하는 것이 중요합니다. 가장 널리 사용되는 세 가지 도구를 비교하여 자신에게 맞는 솔루션을 찾아보세요. 잘못된 도구 선택은 설정 시간을 낭비하게 할 뿐만 아니라, 예기치 못한 코드 변형을 초래할 수 있으므로 신중해야 합니다.
| 구분 | Prettier | ESLint | Black |
|---|---|---|---|
| 주요 특징 | 의견이 강함(Opinionated) 다양한 언어 지원 |
코드 품질 검사 중심 포맷팅 기능 포함 |
파이썬 전용 불변의 스타일 강제 |
| 지원 언어 | JS, TS, CSS, HTML, JSON 등 | 주로 JavaScript, TypeScript | Python 3 |
| 설정 난이도 | 쉬움 (설정 옵션 적음) | 어려움 (규칙이 복잡함) | 매우 쉬움 (설정 불가능에 가까움) |
| 추천 대상 | 프론트엔드, 풀스택 | JS 로직 검증이 필수적인 경우 | 데이터 사이언스, 백엔드(Python) |
Prettier(프리티어)는 "Code Formatter"로 가장 인기 있는 도구입니다. 강력한 장점은 'Opinionated(신념이 강한)' 특성입니다. 즉, 사용자가 설정할 수 있는 옵션을 최소화하여, 누가 코드를 작성하든 항상 똑같은 결과물을 내놓도록 강제합니다. 세미콜론 사용 여부, 따옴표 종류 등 몇 가지만 선택하면 나머지는 알아서 처리해 주기 때문에 팀 프로젝트에서 스타일 다툼을 끝낼 수 있는 최고의 도구입니다. 특히 JavaScript뿐만 아니라 HTML, CSS, Markdown, Vue 등 다양한 파일 포맷을 지원한다는 점이 프론트엔드 개발자들에게 큰 장점으로 작용합니다.
ESLint(에스린트)는 원래 "Linter(린터)"로, 코드의 잠재적 버그나 안티 패턴을 찾아주는 도구입니다. 하지만 최근 버전에서는 포맷팅 기능도 매우 강력해져서, Prettier 없이도 코드 정리가 가능합니다. 하지만 ESLint의 포맷팅 규칙은 Prettier보다 유연하지만 그만큼 설정이 복잡할 수 있습니다. 따라서 일반적으로는 ESLint로 코드의 품질(Quality)을 검사하고, Prettier로 코드의 스타일(Style)을 정리하는 방식으로 두 도구를 함께 사용하는 것이 가장 이상적인 조합으로 꼽힙니다. 이 경우 ESLint의 포맷팅 관련 규칙을 끄고 Prettier에게 맡기는 설정이 필수적입니다.
Black(블랙)은 파이썬 개발자라면 반드시 거쳐야 하는 관문입니다. "The Uncompromising Code Formatter"라는 모토처럼, 어떤 설정도 받아주지 않고 자신만의 고집스러운 스타일로 코드를 재배열합니다. 이는 파이썬 진영에서 PEP 8 스타일 가이드를 준수하는 가장 확실한 방법
동영상으로 보는 VSCode 자동 포맷팅 설정 방법
글로 충분하지 않다면 관련 영상을 함께 보세요. 클릭하면 YouTube에서 검색 결과로 이동합니다.
자주 묻는 질문
Q. VSCode에서 파일 저장 시 자동 포맷팅을 켜는 방법은?
A. 설정(Settings) 화면을 열고 "Format On Save" 옵션을 검색한 뒤 체크하면 됩니다. 또는 settings.json에 "editor.formatOnSave": true 를 추가해도 동일하게 동작합니다.
Q. 특정 파일 유형에만 자동 포맷팅을 적용하려면 어떻게 해야 하나요?
A. settings.json에 언어별 설정을 추가하면 됩니다. 예를 들어, JavaScript만 적용하고 싶다면 "[javascript]": { "editor.formatOnSave": true } 를 입력합니다.
Q. 자동 포맷팅이 원하는 스타일과 다를 때 어떻게 조정하나요?
A. 사용 중인 포맷터(Prettier, ESLint 등)의 설정 파일(.prettierrc, .eslintrc 등)을 수정하거나, VSCode의 "editor.defaultFormatter"를 해당 언어에 맞는 포맷터로 지정하면 됩니다.
Q. 파일 저장 시 포맷터 충돌이 발생하면 어떻게 해결하나요?
A. 충돌이 나는 경우, settings.json에서 "editor.formatOnSave": false 로 전체 자동 포맷팅을 끈 뒤, 원하는 포맷터만 "editor.defaultFormatter"와 함께 개별 언어 설정에 지정하면 충돌을 방지할 수 있습니다.