VSCode 저장 시 자동 포맷팅, 딱 한 번 설정으로 끝내는 법

코드를 작성하고 저장할 때마다 ‘Shift + Alt + F’를 매번 눌러서 정렬하는 게 번거로우셨나요? 많은 개발자가 저장 버튼을 누르는 것만으로도 코드가 가지런히 정리되기를 바라지만, VSCode는 기본적으로 이 기능을 자동으로 제공하지 않습니다.

이러한 수동 정렬 방식은 개발 흐름을 방해하고, 팀 프로젝트에서는 코드 스타일 일관성을 해치는 원인이 되기도 합니다. 하지만 걱정하지 마세요. 딱 한 번의 설정 변경으로 이 모든 번거로움을 영원히 끝낼 수 있습니다.

이 글에서는 VSCode에서 파일을 저장할 때 코드가 자동으로 정렬되도록 딱 한 번만 설정하는 방법을 상세히 안내하여, 여러분의 개발 워크플로우를 획기적으로 개선해 드릴 것입니다. 지금 바로 자동 포맷팅 기능을 활성화하고, 오직 코드 로직에만 집중하는 생산적인 개발 환경을 경험해 보세요.

왜 VSCode 자동 포맷팅이 필수적인가?

개발 과정에서 코드의 가독성은 생산성과 직결되는 중요한 요소입니다. 아무리 잘 짜인 코드라도 들여쓰기나 공백이 제멋대로라면 한눈에 의미를 파악하기 어렵고, 이는 곧 불필요한 시간 낭비로 이어집니다. 특히 여러 개발자가 함께 작업하는 프로젝트에서는 일관된 코드 스타일을 유지하는 것이 협업의 효율성을 크게 좌우합니다.

수동으로 매번 포맷팅 규칙을 지키려 노력하는 것은 피로감을 가중시키고 실수를 유발할 가능성이 높습니다. 개발자는 코드의 기능 구현에 집중해야 할 시간을 포맷팅에 할애하게 되고, 이는 전반적인 개발 속도 저하로 이어질 수 있습니다.

VSCode의 자동 포맷팅 기능을 활용하면 이러한 고민을 단번에 해결할 수 있습니다. 저장 버튼 한 번으로 코드가 정해진 규칙에 따라 완벽하게 정렬되므로, 개발자는 오직 코드 로직에만 집중할 수 있게 됩니다. 이는 코드 리뷰 시간을 단축하고, 새로운 팀원이 프로젝트에 빠르게 적응하는 데도 큰 도움을 줍니다.

Photo by Bibek ghosh on Pexels

VSCode 저장 시 자동 포맷팅 기본 설정 방법

VSCode에서 파일을 저장할 때마다 코드가 자동으로 정렬되도록 설정하는 것은 매우 간단합니다. 단 몇 단계의 설정을 통해 번거로운 수동 작업을 영원히 없앨 수 있습니다. 이 기능은 VSCode의 사용자 설정(`settings.json`)을 통해 활성화되며, 한 번만 설정하면 모든 프로젝트에 적용되거나, 필요에 따라 특정 작업 공간에만 적용할 수도 있습니다.

아래의 단계별 지침을 따라 쉽고 빠르게 자동 포맷팅 기능을 활성화해 보세요.

1. VSCode 설정 열기 — `Ctrl + ,` (Windows/Linux) 또는 `Cmd + ,` (macOS) 단축키를 눌러 설정 창을 엽니다.
2. ‘format on save’ 검색 및 활성화 — 설정 검색창에 ‘format on save’를 입력합니다. 검색 결과로 나오는 ‘Editor: Format On Save’ 항목의 체크박스를 활성화합니다. 이 설정을 켜면 파일을 저장할 때마다 VSCode가 자동으로 코드를 포맷팅하게 됩니다.
3. 기본 포맷터 지정 확인 (선택 사항) — ‘Editor: Default Formatter’ 설정도 함께 확인하는 것이 좋습니다. 만약 특정 언어에 대한 포맷터 확장 프로그램(예: Python의 Black, JavaScript의 Prettier)이 설치되어 있다면, 이 항목에서 해당 확장 프로그램을 기본 포맷터로 지정하여 포맷팅 충돌을 방지하고 일관된 스타일을 유지할 수 있습니다. 예를 들어, Prettier를 사용한다면 `esbenp.prettier-vscode`를 선택할 수 있습니다.
4. 변경 사항 저장 — 설정 창을 닫으면 변경 사항이 자동으로 저장됩니다. 이제부터는 파일을 저장할 때마다 코드가 설정된 규칙에 따라 자동으로 포맷팅되는 것을 확인할 수 있습니다.

언어 및 프로젝트별 포맷터 설정 심화

VSCode의 강력함은 단순히 전역 설정을 넘어, 각 프로그래밍 언어나 특정 프로젝트에 맞춘 섬세한 포맷팅 설정을 가능하게 한다는 점입니다. Python에는 Black을, JavaScript/TypeScript에는 Prettier를 사용하는 등 각 언어의 생태계에 맞는 최적의 포맷터를 지정하여 최고의 코드 품질을 유지할 수 있습니다.

이러한 개별 설정은 주로 작업 공간 설정(`.vscode/settings.json` 파일)을 통해 이루어집니다. 프로젝트의 루트 폴더에 `.vscode` 디렉토리를 만들고 그 안에 `settings.json` 파일을 두어 해당 프로젝트에만 적용되는 규칙을 정의할 수 있습니다. 예를 들어, `.vscode/settings.json` 파일에 다음과 같은 내용을 추가하여 Python 파일에만 Black 포맷터를 적용할 수 있습니다:

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

이를 통해 팀원 간의 코드 스타일 일관성을 쉽게 유지하고, 프로젝트마다 다른 포맷팅 규칙을 유연하게 적용할 수 있습니다. 예를 들어, 한 프로젝트에서는 탭을 사용하여 들여쓰기를 하고 다른 프로젝트에서는 스페이스 4칸을 사용할 수 있게 됩니다. 이는 특히 다양한 기술 스택을 사용하는 회사나 오픈 소스 프로젝트 참여 시 매우 유용합니다.

효율적인 포맷팅을 위한 추가 팁 및 활용법

자동 포맷팅 기능을 최대로 활용하기 위한 몇 가지 추가 팁을 소개합니다. 단순히 기능을 활성화하는 것을 넘어, 여러분의 개발 환경에 완벽하게 통합하는 방법을 알아보겠습니다. 이러한 팁들은 불필요한 포맷팅을 방지하고, 특정 상황에 맞는 유연한 설정을 가능하게 합니다.

때로는 특정 파일이나 폴더는 자동 포맷팅에서 제외하고 싶을 때가 있습니다. 예를 들어, 외부 라이브러리 코드나 자동 생성된 파일 등은 포맷팅이 필요 없거나 오히려 문제를 일으킬 수 있습니다. 이는 `.vscode/settings.json` 파일에 `files.exclude` 또는 포맷터 자체의 설정 파일(`prettierrc`, `.eslintignore`, `pyproject.toml` 등)을 통해서 제어할 수 있습니다.

또한, 코드 저장 시 포맷팅뿐만 아니라 ESLint와 같은 린터(Linter)를 함께 실행하여 잠재적인 오류까지 자동으로 수정하도록 설정하면, 코드 품질을 더욱 높일 수 있습니다. ‘Editor: Code Actions On Save’ 설정을 통해 `source.fixAll.eslint`와 같은 액션을 활성화하면, 저장 시점에 포맷팅과 함께 린트 규칙에 따른 자동 수정이 이루어집니다. 이러한 통합 설정은 개발 생산성을 20% 이상 향상시키는 데 기여할 수 있습니다.