VSCode 저장 시 자동 포맷팅 설정 2가지

코드를 작성하거나 붙여넣을 때마다 들여쓰기가 엉망이 되어 수동으로 정리하는 데 시간을 낭비하고 계신가요? 이런 반복적인 작업은 개발 흐름을 끊고 집중력을 저하시킵니다. 깔끔하게 정돈된 코드는 가독성을 높여주지만, 이를 일일이 수동으로 관리하는 것은 상당한 시간과 노력을 요구합니다. 특히 프로젝트 규모가 커지거나 여러 개발자가 협업할 때, 코드 스타일의 불일치는 사소한 의견 충돌부터 심각한 유지보수 문제까지 야기할 수 있습니다.

함께 보면 좋은 글: Raycast, 맥북 앱 실행/파일 검색 10배 빠르게

이는 VSCode의 기본 설정이 특정 코드 스타일을 강제하지 않기 때문에 발생하는 자연스러운 현상입니다. 하지만 이 불편함을 해결하는 것은 생각보다 간단합니다. VSCode는 강력한 사용자 정의 기능을 제공하며, 그중 하나가 바로 저장 시 코드를 자동으로 포맷팅하는 기능입니다.

이 글에서는 VSCode 저장 시 자동으로 코드를 포맷팅하는 두 가지 효과적인 방법을 단계별로 안내하여 여러분의 개발 생산성을 극대화할 수 있도록 돕겠습니다. 단순한 코드 정리를 넘어, 일관된 코드 스타일을 유지하고 팀과의 협업을 원활하게 만드는 실질적인 방법을 제시할 것입니다.

VSCode 저장 시 자동 포맷팅이란?

VSCode 저장 시 자동 포맷팅은 코드를 저장하는 순간 VSCode가 미리 설정된 규칙에 따라 코드의 들여쓰기, 공백, 줄 바꿈 등을 자동으로 정리해주는 기능입니다. 이는 개발자가 수동으로 코드 스타일을 일일이 맞춰야 하는 번거로움을 크게 줄여줍니다. 단순히 코드를 보기 좋게 만드는 것을 넘어, 개발자의 시간과 노력을 절약하여 더 중요한 문제에 집중할 수 있도록 돕는다는 점에서 개발 환경 설정의 기본 중 하나로 여겨집니다.

특히 여러 사람이 함께 프로젝트를 진행하거나, 다양한 소스에서 코드를 복사하여 붙여넣을 때 코드 스타일의 통일성을 유지하는 데 필수적입니다. 일관된 코드 스타일은 코드의 가독성을 높이고, 잠재적인 오류를 줄이며, 코드 리뷰 과정을 훨씬 효율적으로 만듭니다. 예를 들어, 함수 정의 시 중괄호의 위치, 변수 선언 시 들여쓰기 수준, 연산자 주변의 공백 등이 일관되게 유지되어 코드의 구조를 한눈에 파악하기 쉽게 됩니다.

이 기능의 핵심은 '자동화'에 있습니다. 개발자는 코드를 작성하는 데 집중하고, 포맷팅이라는 반복적이고 시간 소모적인 작업을 VSCode에 맡길 수 있습니다. 이는 개발자의 인지 부하를 줄여주고, 창의적인 문제 해결에 더 많은 에너지를 쏟을 수 있게 해줍니다. 궁극적으로는 개발 속도를 높이고, 코드의 품질을 향상시키는 데 기여합니다.

더 나아가, 자동 포맷팅은 팀 내 커뮤니케이션 비용을 절감하는 효과도 있습니다. 코드 리뷰 시 스타일 관련 논쟁이나 불필요한 수정 요청이 줄어들기 때문입니다. 모든 팀원이 동일한 스타일 가이드라인을 따르도록 강제함으로써, 리뷰어는 코드의 로직과 효율성에 더 집중할 수 있습니다.

Photo by Bibek ghosh on Pexels

옵션 1: VSCode 내장 포맷터 활용하기

VSCode는 다양한 프로그래밍 언어를 위한 자체 포맷터를 내장하고 있습니다. 이 내장 포맷터를 활용하면 별도의 확장 프로그램을 설치하지 않고도 기본적인 코드 포맷팅을 자동화할 수 있습니다. 이는 VSCode를 처음 사용하는 개발자나, 복잡한 설정 없이 빠르게 개발 환경을 구축하려는 경우에 매우 유용한 옵션입니다.

예를 들어, JavaScript, TypeScript, HTML, CSS, Python 등의 언어는 VSCode 자체적으로 기본적인 포맷팅 규칙을 지원합니다. 이를 저장 시 자동으로 적용하도록 설정하는 것은 매우 간단하며, 몇 번의 클릭 또는 간단한 설정 변경만으로 완료됩니다.

내장 포맷터를 저장 시 자동으로 실행하도록 설정하는 방법은 다음과 같습니다.

"[python]": {
    "editor.defaultFormatter": "ms-python.python" // Python Extension의 포맷터 사용 예시
},
"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features" // VS Code 내장 HTML 포맷터
}

이 설정을 활성화하면 파일을 저장할 때마다 VSCode가 해당 파일 형식에 맞는 기본 포맷터를 사용하여 코드를 자동으로 정리합니다. 예를 들어, 80자 이상 줄이 넘어가거나 들여쓰기가 잘못된 경우 자동으로 수정되며, 들여쓰기 공백이 일정하게 유지됩니다. 이는 코드의 가독성을 즉각적으로 향상시키는 효과를 가져옵니다.

옵션 2: Prettier와 같은 외부 포맷터 연동하기

VSCode의 내장 포맷터는 편리하지만, 프로젝트마다 요구되는 코드 스타일이 다를 수 있습니다. 이럴 때는 Prettier와 같은 널리 사용되는 코드 포맷터를 연동하는 것이 훨씬 효과적입니다. Prettier는 JavaScript, TypeScript, HTML, CSS, JSON, Markdown 등 매우 다양한 언어를 지원하며, 일관되고 강력한 코드 포맷팅 기능을 제공합니다.

Prettier를 사용하면 팀원 간의 코드 스타일 충돌을 최소화하고, `.prettierrc`와 같은 설정 파일을 통해 프로젝트 전체의 코드 스타일을 중앙에서 관리할 수 있습니다. 이는 특히 대규모 프로젝트나 여러 개발자가 협업하는 환경에서 큰 이점을 제공합니다. 각 개발자가 개별적으로 포맷팅 규칙을 설정하는 대신, 프로젝트의 규칙을 공유하고 이를 자동으로 적용받기 때문입니다.

Prettier를 VSCode에 연동하고 저장 시 자동 포맷팅을 설정하는 단계는 다음과 같습니다.

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

이렇게 설정하면 파일을 저장할 때마다 Prettier가 활성화되어 프로젝트의 `.prettierrc` 설정에 따라 코드를 자동으로 포맷팅합니다. 예를 들어, 따옴표 스타일(작은따옴표 vs 큰따옴표), 세미콜론 사용 여부, 들여쓰기 크기(2칸 또는 4칸), 최대 줄 길이 등을 일관되게 유지할 수 있습니다.

Prettier는 또한 npx prettier --write .와 같은 명령어를 통해 프로젝트 전체의 코드를 일괄적으로 포맷팅하는 것도 가능합니다. 이는 초기 프로젝트 설정이나 대규모 코드베이스에 대한 스타일 일관성을 확보하는 데 매우 유용합니다. 이 명령어를 실행하면 현재 디렉토리 및 하위 디렉토리의 모든 Prettier가 지원하는 파일들이 지정된 규칙에 따라 포맷팅됩니다.

Prettier 설정 파일(`.prettierrc`)은 매우 유연하며, 다양한 옵션을 통해 포맷팅 방식을 세밀하게 제어할 수 있습니다. 예를 들어, `printWidth`는 최대 줄 길이를, `tabWidth`는 들여쓰기 크기를, `semi`는 문장 끝 세미콜론 사용 여부를, `singleQuote`는 작은따옴표 사용 여부를 설정할 수 있습니다. 이러한 설정을 잘 활용하면 팀의 코드 스타일 가이드라인을 완벽하게 준수하는 코드를 작성할 수 있습니다.

두 옵션 비교: 어떤 것을 선택해야 할까?

VSCode 내장 포맷터와 Prettier는 각각 장단점을 가지고 있으며, 어떤 옵션을 선택할지는 프로젝트의 특성과 개인의 선호도에 따라 달라집니다. 각 옵션의 특징을 비교하여 여러분의 상황에 맞는 최적의 선택을 할 수 있도록 돕겠습니다.

추천 대상

• VSCode 내장 포맷터: 개인 프로젝트, 간단한 스크립트 작성, 혹은 빠른 시작을 원할 때 적합합니다. 별도의 설정 없이 바로 사용할 수 있다는 장점이 있으며, 복잡한 코드 스타일 규칙이 필요하지 않은 경우에 좋은 선택입니다.
• Prettier: 팀 프로젝트, 코드 스타일 가이드라인이 중요한 프로젝트, 혹은 복잡하고 일관된 포맷팅 규칙을 적용해야 할 때 강력 추천합니다. lint-staged 및 husky와 함께 Git 훅에 통합하여 커밋 전에 자동으로 포맷팅하는 워크플로우를 구축할 수도 있습니다. 이는 코드 푸시 전에 항상 일관된 스타일을 유지하도록 보장합니다.

프로젝트의 규모, 팀원의 수, 그리고 코드 스타일의 중요성에 따라 적절한 도구를 선택하는 것이 중요합니다. 두 옵션 모두 'Format On Save' 기능을 통해 저장 시 자동 포맷팅을 지원하므로, 설정만 올바르게 하면 개발 경험을 크게 향상시킬 수 있습니다.

실제 사용자 후기: 자동 포맷팅, 얼마나 효과적일까?

많은 개발자들이 VSCode의 자동 포맷팅 기능을 통해 개발 경험을 크게 개선했다고 말합니다. 특히 코드 스타일로 인한 불필요한 논쟁이나 시간을 절약하는 데 큰 도움을 받고 있습니다. 이는 단순한 편의 기능을 넘어, 개발 프로세스의 효율성을 높이는 중요한 요소로 작용합니다.

한 개발자는 "vscode 기본설정으로는 자동완성도, 코드 포멧터도 제대로 작동하지 않아서 이 상태 그대로 프로그래밍을 입문하니...첨에 삽질을 연속으로 하는 모습이 보여서, 그럴 때 마다 파이참 쓰라고 하면 나중에 훨씬 편해졌다고 하더라고요."라고 말하며, 초기 설정의 중요성을 강조했습니다. (출처: clien.net) 이는 VSCode 자동 포맷팅 설정이 개발 입문자에게도 긍정적인 영향을 줄 수 있음을 시사하며, 올바른 개발 환경 설정이 학습 곡선을 완만하게 하고 좌절감을 줄여준다는 것을 보여줍니다.

또 다른 사용자 경험으로는, "Antigravity는 터미널 커맨드 완전 자동화 설정이 있는데, Codex는 없습니다. 그래서 매번 터미널 커맨드 실행시 물어보는데요. 이걸 아무리 다시 물어보지 않기를 선택해도 한계가 있습니다." (출처: clien.net) 라는 내용이 있습니다. 이 후기는 특정 작업에 대한 자동화 설정이 필수적임을 보여주며, 코드 포맷팅 역시 개발 생산성을 위한 필수적인 자동화 설정으로 볼 수 있습니다. 반복적인 수동 작업을 자동화함으로써 개발자는 더 복잡하고 창의적인 작업에 집중할 수 있습니다.

Prettier와 같은 도구를 사용하면, 린터(Linter)와 함께 사용하여 코드의 오류 가능성까지 줄일 수 있습니다. 예를 들어, ESLint와 Prettier를 함께 사용하면 코드 스타일 문제뿐만 아니라 잠재적인 버그까지 미리 잡아낼 수 있어, 99%의 사소한 오류를 예방하는 효과를 기대할 수 있습니다. ESLint는 코드의 논리적 오류나 잠재적 버그를 감지하는 데 특화되어 있고, Prettier는 코드의 시각적인 일관성을 유지하는 데 초점을 맞추므로, 두 도구를 함께 사용하면 코드 품질을 극대화할 수 있습니다.

이러한 자동 포맷팅 기능은 코드 리뷰 시에도 빛을 발합니다. 리뷰어는 코드 내용 자체에 집중할 수 있으며, 스타일 관련 지적에 시간을 쏟을 필요가 없어집니다. 이는 80%의 리뷰 시간을 절약하는 효과를 가져올 수 있습니다. 리뷰어는 코드의 알고리즘, 성능, 가독성 향상 방안 등 더 중요한 부분에 집중할 수 있게 되어, 코드 리뷰의 질을 높이고 프로젝트의 전반적인 품질을 향상시킬 수 있습니다.

실제로 많은 개발팀에서 Prettier와 ESLint를 통합하여 사용하며, 이를 통해 코드 스타일 및 품질 표준을 효과적으로 관리하고 있습니다. 이는 개발 프로세스를 더욱 매끄럽게 만들고, 신규 팀원 합류 시에도 일관된 개발 경험을 제공하는 데 기여합니다.