VS Code에서 코드를 작성할 때, 코드의 가독성을 높이는 것은 때때로 간과될 수 있습니다. 코드가 실행되는 데 형식이 필수는 아니지만, 디버깅과 오류 발견에 매우 중요한 역할을 합니다.
이 글에서는 VS Code에서 코드 형식을 정돈하는 다양한 방법과, 코드 구조를 개선하는 데 도움이 되는 유용한 팁들을 소개합니다.
코드 형식 정돈 방법
VS Code는 현재 작성 중인 코드를 표준 형식에 맞춰 자동으로 정렬하는 기능을 내장하고 있습니다. 추가 확장 프로그램 없이도 단축키를 사용하여 바로 적용할 수 있습니다. 사용 가능한 단축키는 다음과 같습니다.
PC 사용자를 위한 단축키
전체 문서 형식 정돈:
- 형식을 변경하고 싶은 코드가 있는 파일을 엽니다.
- “Shift + Alt + F” 키를 누릅니다.
- 좌측 상단 모서리의 “파일”을 클릭 후 “저장”을 선택하거나 “Ctrl + S”를 눌러 변경 사항을 저장합니다.
선택된 코드만 형식 정돈:
- 형식을 변경하고 싶은 코드 줄을 마우스로 드래그하여 선택합니다.
- “Ctrl + K” 키를 누릅니다.
- “Ctrl + F” 키를 누릅니다.
- 왼쪽 상단 모서리에 있는 파일 메뉴에서 “저장”을 선택하거나 “Ctrl + S”를 눌러 변경 사항을 저장합니다.
“Ctrl + K”를 먼저 누르지 않고 “Ctrl + F”를 누르면 검색 메뉴가 열립니다. 이 경우에는 우측의 “x” 버튼을 클릭하거나 Esc 키를 눌러 닫으십시오.
코드 줄을 위 또는 아래로 이동:
- 이동시키고 싶은 코드 줄의 시작 부분으로 커서를 옮깁니다.
- Alt 키를 누른 상태를 유지합니다.
- 위쪽 화살표 키를 누르면 해당 줄이 위로 이동하고, 아래쪽 화살표 키를 누르면 아래로 이동합니다.
- 창의 왼쪽 상단 모서리에 있는 파일 메뉴에서 “저장”을 선택하거나 “Ctrl + S”를 눌러 파일을 저장합니다.
한 줄의 들여쓰기 변경:
- 들여쓰기를 변경하고 싶은 줄의 시작 부분으로 커서를 옮깁니다.
- “Ctrl + ]” 키를 눌러 들여쓰기를 늘립니다.
- “Ctrl + [” 키를 눌러 들여쓰기를 줄입니다.
- 파일 메뉴에서 “저장”을 선택하거나 “Ctrl + S”를 눌러 변경 사항을 저장합니다.
Mac 사용자를 위한 단축키
전체 문서 형식 정돈:
- 형식을 변경하고 싶은 코드가 있는 파일을 엽니다.
- “⇧ + ⌥ + F” 키를 누릅니다.
- 좌측 상단 메뉴에서 “파일”을 클릭 후 “저장”을 선택하거나 “⌘ + S”를 눌러 변경 사항을 저장합니다.
선택된 코드만 형식 정돈:
- 형식을 변경하고 싶은 코드 영역을 선택합니다.
- “⌘ + K” 키를 누릅니다.
- “⌘ + F” 키를 누릅니다.
- 파일 메뉴에서 “저장”을 선택하거나 “⌘ + S”를 눌러 변경 사항을 저장합니다.
주의: “⌘ + K”를 먼저 누르지 않고 “⌘ + F”를 누르면 검색 메뉴가 열립니다. 이 경우에는 우측의 “x” 버튼을 클릭하거나 Esc 키를 눌러 닫으십시오.
코드 줄을 위 또는 아래로 이동:
- 이동시키고 싶은 코드 줄의 시작 부분으로 커서를 옮깁니다.
- “⌥” 키를 누른 상태를 유지합니다.
- 위쪽 화살표 키를 누르면 해당 줄이 위로 이동하고, 아래쪽 화살표 키를 누르면 아래로 이동합니다.
- 파일 메뉴에서 “저장”을 선택하거나 “⌘ + S”를 눌러 변경 사항을 저장합니다.
한 줄의 들여쓰기 변경:
- 들여쓰기를 변경하고 싶은 줄의 시작 부분으로 커서를 옮깁니다.
- “⌘ + ]” 키를 눌러 들여쓰기를 늘립니다.
- 들여쓰기를 줄이려면 “⌘ + [” 키를 누릅니다.
- 파일 메뉴에서 “저장”을 선택하거나 “⌘ + S”를 눌러 파일을 저장합니다.
저장 시 VS Code 코드 형식 자동 설정
VS Code에는 파일을 저장할 때 자동으로 코드 형식을 정리해주는 기본 기능은 없습니다. 하지만 확장 프로그램을 설치하여 이 기능을 활성화할 수 있습니다. 그 중 가장 널리 사용되는 확장 프로그램이 바로 Prettier입니다. Prettier는 VS Code에 다양한 서식 기능을 제공합니다. 아래 단계에 따라 Prettier를 설치할 수 있습니다.
- VS Code를 실행합니다.
- 좌측 메뉴의 확장 프로그램 버튼(네 개의 사각형 모양)을 클릭하거나, PC에서는 “Ctrl + Shift + x”, Mac에서는 “⌘ + ⇧ + x” 키를 누릅니다.
- 상단 검색 창에 Prettier를 입력합니다.
- Prettier 아이콘 오른쪽 하단의 “설치” 버튼을 클릭합니다.
- 확장 프로그램 설치가 완료될 때까지 기다립니다.
Prettier를 설치했다면, 저장 시 코드 형식을 자동으로 정돈하도록 설정해야 합니다. 설정 방법은 다음과 같습니다.
- PC에서는 “Ctrl + ,”, Mac에서는 “⌘ + ,” 키를 눌러 설정 창을 엽니다.
- 검색 창에 “포맷터”를 입력합니다. 그러면 다양한 서식 설정이 표시됩니다.
- “Editor: Default Formatter” 설정에서 선택된 확장 프로그램이 “Prettier”인지 확인합니다. 만약 기본 포맷터가 없거나 VS Code가 다른 포맷터를 사용하고 있다면, 드롭다운 화살표를 클릭하여 목록에서 “Prettier – Code formatter”를 선택합니다. 때로는 Prettier가 목록에 “esbenp.prettier-vscode”로 나타날 수도 있습니다.
- “편집기: 저장 시 포맷” 옵션이 체크되어 있는지 확인합니다. 체크되어 있지 않다면 체크 표시를 활성화합니다.
- 설정 검색 창에 “prettier”를 입력합니다.
- “Prettier: Require Config” 줄이 나올 때까지 아래로 스크롤합니다. 해당 옵션이 체크되어 있는지 확인합니다. 이 설정은 Prettier가 설정 파일 없이 문서를 포맷하지 못하게 합니다. 이는 고유한 서식 규칙이 있을 수 있는 다운로드한 코드를 볼 때 편리합니다. 이를 통해 서식 옵션을 실수로 덮어쓰는 것을 방지할 수 있습니다. 이 설정을 선택하더라도 제목이 없는 파일은 자동으로 포맷됩니다.
- 기본 설정을 기반으로 특정 Prettier 설정을 수정할 수 있습니다. 완료되면 이 메뉴를 닫아도 됩니다.
설정 파일이 있을 때만 자동으로 포맷하도록 Prettier를 설정했으므로, 각 프로젝트 별로 설정 파일을 생성해야 합니다. 설정 파일 생성 방법은 다음과 같습니다.
- 왼쪽 메뉴에서 프로젝트의 루트 폴더를 선택합니다.
- 새 파일 버튼을 클릭하여 설정 파일을 생성합니다.
- 이 파일 이름을 “.prettierrc”로 지정합니다.
- 파일에 “{}”를 입력합니다.
- 이제부터는 파일을 저장할 때마다 Prettier가 자동으로 코드 형식을 정돈합니다.
코드 정리 팁
- 들여쓰기는 프로그램 실행에 필수는 아니지만, 코드를 관리하기 쉬운 모듈로 분리하여 디버깅에 큰 도움이 됩니다. 특히, If-Then 문이나 중첩된 경우에 각 대안 옵션을 시각적으로 구분할 수 있게 하여 논리 오류를 처리하는 데 유용합니다.
- 모듈이나 짧은 코드 줄에 이름을 지정할 때는 단순히 “모듈 1”, “모듈 2” 등으로 부르는 대신, 해당 코드의 기능을 설명하는 이름을 사용하는 습관을 들이는 것이 좋습니다. 이렇게 하면 코드의 어떤 부분이 어떤 역할을 하는지 더 쉽게 파악할 수 있습니다.
- 주석을 적극적으로 사용하는 것은 언제나 좋은 습관입니다. 간단한 설명을 추가하거나 자신을 위한 메모를 추가하는 등 주석은 디버깅 과정에서 큰 도움이 될 수 있습니다.
결론
코드를 적절하게 정리하면 가독성을 높일 뿐만 아니라, 오류를 쉽게 찾아내고 코드를 효과적으로 관리하는 데 도움이 됩니다. 프로그램 실행에 필수는 아니지만, VS Code에서 코드 형식을 정리하는 방법을 알아두는 것은 분명히 큰 장점이 될 것입니다.
VS Code에서 코드 형식을 정리하는 다른 방법을 알고 계신가요? 아래 댓글 섹션에서 여러분의 생각을 공유해주세요.