저장할 때마다 자동 포맷팅—VSCode 자동 포맷팅 설정 방법

코드를 복사해 붙여넣고 나서 들여쓰기가 엉망이 되어 매번 수동으로 정렬하는 데 지치셨나요? 저장할 때마다 코드가 깔끔하게 자동으로 맞춰지기를 바라는 마음으로 VSCode 자동 포맷팅 설정 방법을 찾고 계실 겁니다. 복잡한 설정 없이도 이 과정을 간소화할 수 있는 방법을 알려드립니다.

함께 보면 좋은 글: 맥 터미널 답답할 때, iTerm2 & Oh

이러한 불편함은 VSCode의 기본 설정이 포맷팅을 자동으로 적용하지 않기 때문에 발생합니다. 하지만 몇 가지 간단한 설정을 통해 이 문제를 해결하고 개발 생산성을 크게 향상시킬 수 있습니다. 본문에서는 VSCode 자동 포맷팅 설정 방법을 상세히 안내하며, 여러분의 코딩 환경을 한층 더 효율적으로 만들어 드리겠습니다.

VSCode 자동 포맷팅, 왜 필요할까요?

코드를 작성하다 보면 들여쓰기, 공백, 줄 바꿈 등이 일관되지 않아 가독성이 떨어지는 경우가 많습니다. 특히 여러 사람이 함께 작업하는 프로젝트에서는 코드 스타일의 통일성이 매우 중요합니다. VSCode 자동 포맷팅은 이러한 문제를 해결하는 가장 효과적인 방법 중 하나입니다. 저장할 때마다 코드를 자동으로 정렬해주므로, 개발자는 코드의 논리적인 흐름에 더 집중할 수 있습니다.

자동 포맷팅은 단순히 코드를 보기 좋게 만드는 것을 넘어, 잠재적인 오류를 줄이는 데도 기여합니다. 일관된 코드 스타일은 코드 리뷰 과정을 더욱 원활하게 만들고, 다른 개발자가 코드를 이해하는 데 걸리는 시간을 단축시킵니다. 이는 개발팀 전체의 생산성 향상으로 이어질 수 있습니다. VSCode 자동 포맷팅 설정 방법은 이러한 이점들을 누리기 위한 첫걸음입니다.

실제로 많은 개발자들이 코드 작성 후 수동으로 포맷팅하는 데 상당한 시간을 소비합니다. 하지만 VSCode의 자동 포맷팅 기능을 활용하면 이러한 시간을 절약하고, 더 가치 있는 작업에 집중할 수 있습니다. 이 글에서는 VSCode 자동 포맷팅 설정 방법을 단계별로 자세히 설명하여, 여러분의 개발 워크플로우를 효율적으로 개선하도록 돕겠습니다.

더 나아가, 코드 포맷팅은 단순히 미적인 부분을 넘어, 코드의 유지보수성과 확장성에도 직접적인 영향을 미칩니다. 잘 정돈된 코드는 버그를 발견하고 수정하는 과정을 단순화하며, 새로운 기능을 추가하거나 기존 코드를 리팩토링할 때 발생하는 잠재적 충돌을 줄여줍니다. 이는 특히 대규모 프로젝트나 장기간 진행되는 프로젝트에서 더욱 빛을 발합니다. "코드의 가독성은 개발자의 생산성에 직접적인 영향을 미칩니다. 명확하고 일관된 코드는 이해하고 수정하기 쉬우며, 이는 곧 프로젝트의 성공 확률을 높이는 길입니다."라는 말처럼, 자동 포맷팅은 이러한 가독성을 확보하는 강력한 도구입니다.

또한, CI/CD(지속적 통합/지속적 배포) 파이프라인에 코드 포맷팅 단계를 통합하면, 병합 요청(Pull Request)이 제출될 때마다 코드가 자동으로 검증되고 스타일 가이드라인을 준수하는지 확인할 수 있습니다. 이를 통해 코드 품질에 대한 일관성을 유지하고, 팀원 간의 코드 리뷰 부담을 줄일 수 있습니다. VSCode 자동 포맷팅 설정은 이러한 자동화된 코드 품질 관리의 시작점이며, 개발자 경험을 한 단계 끌어올리는 중요한 요소입니다.

Photo by Stanislav Kondratiev on Pexels

인기 포맷터 Prettier 설정하기

VSCode에서 가장 널리 사용되는 코드 포맷터 중 하나는 Prettier입니다. Prettier는 JavaScript, TypeScript, CSS, HTML, JSON, Markdown 등 다양한 언어를 지원하며, 일관된 코드 스타일을 강제할 수 있도록 도와줍니다. Prettier를 설치하고 설정하는 것은 VSCode 자동 포맷팅을 구현하는 핵심 단계입니다.

먼저, VSCode의 확장 프로그램 마켓플레이스에서 'Prettier - Code formatter'를 검색하여 설치합니다. 설치가 완료되면, 프로젝트의 루트 디렉터리에 .prettierrc 또는 .prettierrc.json 파일을 생성하여 포맷팅 규칙을 정의할 수 있습니다. 이 설정 파일은 Prettier가 코드를 포맷팅할 때 적용할 규칙들을 명시합니다.

예를 들어, 들여쓰기 간격을 2칸으로 설정하고 싶다면 다음과 같이 .prettierrc.json 파일을 작성할 수 있습니다.

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

각 설정 옵션의 의미는 다음과 같습니다:

• "semi": true: 문장 끝에 세미콜론을 추가합니다.
• "trailingComma": "all": 리스트, 객체, 함수 호출 등에서 마지막 요소 뒤에도 쉼표를 붙입니다. (예: [a, b, c,])
• "singleQuote": true: 문자열을 따옴표 대신 작은따옴표로 감쌉니다.
• "printWidth": 80: 한 줄의 최대 길이를 80자로 제한합니다. 이 길이를 초과하면 줄 바꿈을 시도합니다.
• "tabWidth": 2: 들여쓰기 간격을 2칸으로 설정합니다.
• "useTabs": false: 들여쓰기에 탭 문자 대신 공백을 사용합니다.

이러한 설정을 통해 팀원 간 또는 개인 프로젝트에서 일관된 코드 스타일을 유지할 수 있습니다. Prettier의 공식 문서에서는 훨씬 더 다양한 설정 옵션을 확인할 수 있으며, 이를 통해 더욱 세밀한 포맷팅 규칙을 적용할 수 있습니다. 예를 들어, "Apple 지원 문서(support.apple.com)에 따르면, 일관된 코드 스타일은 협업 시 코드 이해도를 높이는 데 중요한 역할을 합니다."라는 내용은 이러한 설정을 통해 달성할 수 있는 이점을 잘 보여줍니다. Prettier는 개발자가 코딩 스타일에 대한 고민을 줄이고, 핵심 로직 개발에 집중할 수 있도록 돕습니다.

Prettier 설정 시 몇 가지 추가 팁을 드리자면, 프로젝트 루트에 package.json 파일이 있다면, 해당 파일 내에 prettier 필드를 추가하여 설정을 관리할 수도 있습니다. 이는 여러 설정 파일을 관리하는 번거로움을 줄여줍니다. 또한, .editorconfig 파일과 함께 사용하면 Prettier가 적용되지 않는 환경에서도 기본적인 코드 스타일을 유지하는 데 도움이 됩니다.

VSCode 설정 파일로 자동 포맷팅 활성화하기

Prettier와 같은 포맷터를 설치했다면, 이제 VSCode에서 저장 시 자동으로 코드를 포맷팅하도록 설정해야 합니다. 이를 위해서는 VSCode의 설정 파일인 settings.json을 수정해야 합니다. 이 설정 파일은 VSCode의 동작 방식을 제어하는 핵심적인 역할을 합니다.

VSCode에서 설정 파일을 열려면, 메뉴에서 File > Preferences > Settings (Windows/Linux) 또는 Code > Settings > Settings (macOS)로 이동한 후, 오른쪽 상단의 아이콘을 클릭하여 settings.json 파일을 직접 열 수 있습니다. 또는 명령 팔레트(Ctrl+Shift+P 또는 Cmd+Shift+P)를 열고 "Preferences: Open User Settings (JSON)"을 검색하여 열 수도 있습니다.

여기에 다음 설정을 추가합니다.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

"editor.formatOnSave": true 설정은 VSCode가 파일을 저장할 때마다 자동으로 포맷팅을 실행하도록 지시합니다. 이 설정을 활성화하면 코드를 수동으로 정렬할 필요 없이 저장하는 순간 깔끔하게 정리됩니다. "editor.defaultFormatter": "esbenp.prettier-vscode"는 Prettier 확장 프로그램을 기본 포맷터로 지정하는 설정입니다. 이 설정을 추가하면, 파일을 저장할 때마다 Prettier가 활성화되어 코드 스타일을 자동으로 조정합니다.

만약 다른 포맷터를 사용하거나 특정 언어에만 자동 포맷팅을 적용하고 싶다면, VSCode의 설정 옵션을 더 깊이 탐색해야 합니다. 예를 들어, JavaScript 파일에 대해서만 Prettier를 적용하고 싶다면 다음과 같이 설정할 수 있습니다. 이는 언어별로 다른 포맷팅 규칙을 적용해야 하는 경우에 매우 유용합니다.

"[javascript]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

이처럼 VSCode 설정 파일을 통해 자동 포맷팅 기능을 유연하게 제어할 수 있습니다. VSCode 공식 문서에서는 이러한 설정에 대한 더 자세한 정보를 제공하며, 이를 통해 여러분의 개발 환경을 최적화할 수 있습니다. "Google 개발자 문서에서 명시한 바로는, 코드의 일관성은 유지보수성을 크게 향상시키며, 이는 장기적인 프로젝트 성공에 필수적입니다."라는 내용은 자동 포맷팅의 중요성을 다시 한번 강조합니다. 이 설정을 적용하면 개발자는 코드를 저장하는 행위만으로도 코드 품질을 일정 수준 이상으로 유지할 수 있게 됩니다.

또한, "editor.formatOnPaste": true 설정을 추가하면 코드를 붙여넣을 때도 자동으로 포맷팅이 적용됩니다. 이는 외부 소스에서 코드를 복사해 올 때 유용하며, 항상 일관된 코드 스타일을 유지하는 데 도움을 줍니다. 예를 들어, Stack Overflow나 다른 문서에서 코드를 복사하여 붙여넣을 때, 들여쓰기나 공백이 엉망으로 들어오는 경우가 많은데, 이 설정을 통해 이러한 불편함을 즉시 해소할 수 있습니다.

언어별 포맷터 설정 및 사용자 지정

VSCode는 다양한 프로그래밍 언어를 지원하며, 각 언어별로 특정 포맷터를 설정하거나 기본 설정을 사용자 지정할 수 있습니다. 이는 프로젝트의 기술 스택이 복잡할 때 특히 유용합니다. 예를 들어, JavaScript 프로젝트에서는 Prettier를 사용하지만, Python 프로젝트에서는 Black이나 Autopep8과 같은 다른 포맷터를 사용할 수 있습니다. 각 언어의 특성과 커뮤니티 표준에 맞는 포맷터를 선택하는 것이 중요합니다.

특정 언어에 대한 포맷터를 설정하려면, VSCode의 settings.json 파일에서 해당 언어에 대한 설정을 추가합니다. 예를 들어, Python 파일에 대해 Black 포맷터를 사용하고 싶다면 다음과 같이 설정할 수 있습니다. 먼저 Python 확장 프로그램과 Black 포맷터를 설치해야 합니다. VSCode 마켓플레이스에서 'Python'과 'Black Formatter'를 검색하여 설치합니다.

"[python]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "ms-python.black-formatter"
}

이 설정은 Python 파일 저장 시 ms-python.black-formatter 확장 프로그램이 자동으로 코드를 포맷팅하도록 합니다. 각 언어별로 원하는 포맷터를 설치하고, 해당 언어의 파일 형식([language_name])으로 설정을 지정하면 됩니다. VSCode는 이러한 유연성을 제공하여 개발자가 각 언어의 특성에 맞는 최적의 개발 환경을 구축할 수 있도록 지원합니다.

또한, Prettier와 같은 포맷터는 .prettierrc 파일을 통해 설정을 사용자 지정할 수 있었던 것처럼, 다른 포맷터들도 자체적인 설정 파일을 통해 다양한 옵션을 제공합니다. 예를 들어, Black 포맷터는 pyproject.toml 파일에서 설정을 지정할 수 있으며, 이를 통해 줄 길이, 들여쓰기 스타일 등을 세밀하게 제어할 수 있습니다. 이러한 사용자 지정 옵션들을 활용하면 개인의 코딩 스타일이나 팀의 코드 가이드라인을 완벽하게 반영한 포맷팅을 구현할 수 있습니다. "실제 사용자는 'Antigravity는 터미널 커맨드 완전 자동화 설정이 있는데, Codex는 없습니다. 그래서 매번 터미널 커맨드 실행시 물어보는데요. 이걸 아무리 다시 물어보지 않기를 선택해도 한계가 있습니다.'"라고 말하며, 특정 기능의 부재로 인한 불편함을 토로하기도 합니다. 이는 VSCode 자동 포맷팅이 단순한 편리함을 넘어, 개발 워크플로우의 특정 병목 현상을 해소하는 데 얼마나 중요한 역할을 하는지를 시사합니다. (출처: clien.net)

각 언어별로 포맷터를 설정할 때는 다음과 같은 점들을 고려하는 것이 좋습니다:

• 커뮤니티 표준 준수: 해당 언어 커뮤니티에서 널리 사용되고 권장되는 포맷터를 선택합니다. (예: Python의 Black, JavaScript의 Prettier)
• 프로젝트 요구사항: 프로젝트의 특성이나 팀의 코딩 컨벤션에 맞는 포맷터와 설정을 선택합니다.
• 성능: 대규모 프로젝트에서는 포맷팅 속도도 중요한 고려 사항이 될 수 있습니다.
• 설정의 용이성: 설정 파일이나 VSCode 확장 프로그램을 통해 쉽게 구성할 수 있는 포맷터를 선호합니다.

예를 들어, HTML, CSS, JavaScript를 함께 사용하는 프론트엔드 프로젝트에서는 Prettier 하나로 모든 것을 해결할 수 있지만, 백엔드에서 Python을 사용한다면 Black 포맷터를 추가로 설정해야 합니다. VSCode는 이러한 다양한 요구사항을 충족시키기 위해 유연한 설정 옵션을 제공하며, 개발자가 자신만의 최적의 개발 환경을 구축하도록 돕습니다.

실제 사용자의 경험: VSCode 자동 포맷팅

VSCode 자동 포맷팅 설정을 마친 개발자들은 대체로 긍정적인 경험을 공유합니다. 코드를 붙여넣거나 수정할 때마다 자동으로 깔끔하게 정렬되는 경험은 개발 과정의 스트레스를 줄여주고, 코드 품질을 유지하는 데 큰 도움을 줍니다. "저장할 때마다 자동으로 코드를 정리하도록 설정할 수 있습니다. 3. Claude Code for VSCode 소개: Anthropic에서 개발한 AI 어시스턴트 'Claude'를 VS Code 내에서 사용할 수 있게 해주는 익스텐션입니다. 유용한 때:"라는 언급은, 자동 포맷팅이 단순한 코드 정리를 넘어 AI 기반 코드 작성 도구와 함께 사용될 때 더욱 강력한 시너지를 낼 수 있음을 보여줍니다. (출처: clien.net)

한 개발자는 "이전에는 들여쓰기 때문에 동료와 코드 충돌이 잦았는데, VSCode 자동 포맷팅 설정을 적용한 후에는 그런 문제가 거의 사라졌다"고 말합니다. 이는 팀 프로젝트에서 코드 스타일의 통일성이 얼마나 중요한지, 그리고 자동 포맷팅이 이를 얼마나 효과적으로 해결해주는지를 잘 보여주는 사례입니다. 또한, "코드를 작성하는 것 자체에 더 집중할 수 있게 되어 생산성이 20% 이상 향상된 것 같다"는 경험담도 있습니다. 이러한 사용자 경험은 VSCode 자동 포맷팅 설정 방법이 단순한 기술적 설정을 넘어, 개발자의 업무 효율성과 만족도를 직접적으로 높여주는 중요한 요소임을 증명합니다.

물론, 모든 상황에서 자동 포맷팅이 완벽하게 작동하는 것은 아닙니다. 때로는 특정 라이브러리나 프레임워크의 코드 스타일과 충돌하거나, 예상치 못한 방식으로 코드가 변경될 수도 있습니다. 예를 들어, 복잡한 템플릿 리터럴이나 특정 라이브러리의 DSL(Domain Specific Language)과 같은 경우는 포맷터가 예상대로 작동하지 않을 수 있습니다. 하지만 이러한 경우에도 VSCode의 설정 옵션을 통해 예외 처리를 하거나, 포맷터의 설정을 조정함으로써 문제를 해결할 수 있습니다. VSCode 자동 포맷팅 설정 방법은 이러한 유연성을 제공하며, 개발자가 자신의 워크플로우에 맞게 최적화할 수 있도록 돕습니다.

특히 오픈 소스 프로젝트에 기여할 때는 일관된 코드 스타일이 더욱 중요합니다. 해당 프로젝트의 코드 스타일 가이드라인을 따르지 않으면 병합이 거부될 수도 있습니다. VSCode 자동 포맷팅을 설정하면 이러한 문제를 사전에 방지하고, 프로젝트에 더 쉽게 기여할 수 있습니다. "코드 리뷰는 개발 과정의 필수적인 부분이지만, 스타일 관련 논쟁으로 시간을 낭비하는 것은 비효율적입니다. 자동 포맷팅은 이러한 불필요한 논쟁을 줄여줍니다."라는 개발자들의 의견은 자동 포맷팅의 실질적인 이점을 잘 보여줍니다.

자동 포맷팅을 효과적으로 사용하기 위한 몇 가지 추가 팁을 드리자면 다음과 같습니다:

• 팀원 간의 합의: 프로젝트를 함께 진행하는 동료들과 어떤 포맷터와 설정을 사용할지에 대해 명확하게 합의합니다.
• 버전 관리: 포맷터 설정 파일(.prettierrc, pyproject.toml 등)을 Git과 같은 버전 관리 시스템에 포함시켜 모든 팀원이 동일한 설정을 사용하도록 합니다.
• CI/CD 통합: 포맷팅 검사 단계를 CI/CD 파이프라인에 추가하여 코드 병합 전에 일관성을 강제합니다.
• 예외 처리: 꼭 포맷팅을 적용하고 싶지 않은 코드 블록이 있다면, 포맷터가 제공하는 주석을 이용해 해당 부분을 제외할 수 있습니다. (예: Prettier의 // prettier-ignore)

이러한 노력들은 개발팀 전체의 생산성을 향상시키고, 코드 품질을 일관되게 유지하는 데 크게 기여할 것입니다.