JSON 포맷터 VSCode 설정 — 자동 정리부터 린트까지 완벽 가이드

API 개발이나 설정 파일을 다루다 보면 JSON을 매일 만지게 되죠. 문제는 한 줄로 압축된 JSON이나 들여쓰기가 엉망인 파일을 읽어야 할 때예요. 가독성이 떨어지면 디버깅 시간이 늘어나요. 중괄호나 쉼표가 빠진 오류를 찾는 데 몇 분씩 허비하게 되거든요. 팀 프로젝트에서는 더 심각해요. 각자 다른 포맷 스타일을 쓰면 Git diff가 불필요하게 커지고, 코드 리뷰가 어려워져요. VSCode에서 JSON 포맷터를 제대로 설정해 두면 이런 문제를 한 번에 해결할 수 있어요. 저장할 때 자동으로 정리되니까 포맷 걱정 없이 코딩에만 집중할 수 있거든요.

VSCode에는 JSON 포맷터가 이미 내장되어 있어요. 별도 설치 없이 바로 사용할 수 있어요. JSON 파일을 열고 Shift+Alt+F(Windows) 또는 Shift+Option+F(Mac)를 누르면 자동 정리가 돼요. 들여쓰기, 줄바꿈, 정렬이 한 번에 적용됩니다. 저장 시 자동 포맷을 원하면 Settings에서 format on save를 활성화하세요. settings.json에 아래 설정을 추가하면 돼요. editor.formatOnSave를 true로 설정하면 Ctrl+S를 누를 때마다 자동으로 정리돼요. 한번 설정하면 이후로 신경 쓸 필요가 없어서 편해요. 들여쓰기를 2칸에서 4칸으로 바꾸고 싶다면 editor.tabSize 값을 변경하면 돼요. 대부분의 프로젝트는 2칸 또는 4칸을 사용해요.

기본 포맷터보다 강력한 기능이 필요하다면 확장 프로그램을 사용하세요. Prettier는 가장 인기 있는 코드 포맷터예요. JSON뿐 아니라 JavaScript, TypeScript, CSS 등 거의 모든 파일을 지원해요. 팀 프로젝트에서 코드 스타일을 통일하는 데 필수적이에요. JSON Tools는 JSON 전용 확장이에요. 한 줄로 압축(Minify)하거나 보기 좋게 펼치는(Prettify) 기능을 제공해요. 명령 팔레트에서 JSON Tools: Prettify를 실행하면 돼요. Sort JSON Objects는 JSON 키를 알파벳 순으로 정렬해 주는 확장이에요. 설정 파일이나 package.json의 dependencies를 깔끔하게 정리할 때 유용해요. 이 중 Prettier 하나만 설치해도 대부분의 상황을 커버할 수 있어요. 나머지는 필요할 때 추가하시면 돼요.

웹 기반 JSON 포맷터(Toolkio 포함)와 VSCode 포맷터는 용도가 달라요. 온라인 도구는 빠르게 한 번 확인할 때 편해요. 브라우저에서 바로 붙여넣기 하면 되니까요. API 응답을 임시로 확인하거나, 동료에게 공유받은 JSON을 빠르게 보고 싶을 때 적합해요. VSCode는 프로젝트 내 JSON 파일을 지속적으로 관리할 때 좋아요. 저장 시 자동 포맷, Git 연동, ESLint 검증까지 워크플로우에 통합되니까요. 추천 조합은 이래요. 프로젝트 파일은 VSCode에서 관리하고, 외부에서 받은 임시 JSON은 Toolkio 같은 온라인 도구로 확인하는 거예요. 두 도구를 상황에 맞게 쓰면 효율이 극대화돼요. JSON 포맷팅의 기본 개념이 궁금하다면 [JSON 포맷터 사용법 가이드](/blog/how-to-format-json)를 참고하세요. JSON 용량을 줄이고 싶다면 [JSON 압축(Minify) 방법](/blog/how-to-minify-json)도 함께 읽어보세요.