한 번 정리하면 계속 쓰게 되는 Prettier JSON 사용법

개발 테크

2시간 전

조회수

JSON은 데이터가 조금만 커져도 줄바꿈과 들여쓰기, 정렬이 쉽게 흐트러지고, 그 순간부터 어디가 어디에 속하는지를 파악하는 데 시간이 소요됩니다.

API 응답을 붙여 넣었는데 한 줄로 길게 뭉쳐 보이거나, 설정 파일의 들여쓰기가 제각각이라 구조를 이해하는 데 오래 걸린 경험은 누구나 한 번쯤 겪어봤을 것입니다.

이러한 상황이 반복되면 작업은 자연스럽게 멈추고, 단순한 확인 작업임에도 전체 흐름이 계속 지연됩니다. 만약 JSON을 일정한 기준으로 정리해 구조를 한눈에 파악할 수 있고, 불필요한 정리 작업 없이 바로 다음 단계로 넘어갈 수 있다면 작업 흐름은 훨씬 개선될 것입니다.

하지만 정리 기준이 명확하지 않거나 수동 정렬에 의존하는 환경에서는 작업 흐름이 계속 끊길 수밖에 없습니다. 이러한 문제를 해결하기 위해 등장한 도구가 Prettier JSON입니다.

Prettier JSON이란?

JSON을 읽는 시간을 줄여주는 기본 도구

Prettier는 코드의 의미를 유지한 채 들여쓰기, 줄바꿈, 정렬 규칙을 자동으로 맞춰 주는 코드 포맷터입니다. 개발자가 작성한 코드의 로직이나 동작에는 영향을 주지 않고, 표현 방식만 일관된 기준에 따라 정리해 주는 역할을 합니다.

JavaScript, TypeScript, HTML, CSS 등 다양한 언어를 지원하며, 실무 환경에서는 JSON 포맷을 정리하기 위한 도구로 가장 널리 사용되는 선택지 중 하나입니다.

JSON은 데이터 전달과 설정 관리에서 폭넓게 활용되지만, 구조가 커질수록 사람이 직접 읽고 이해하기 어려워지는 특성이 있습니다. Prettier는 이러한 JSON 데이터를 구조에 맞게 자동으로 정렬해주어, 데이터를 빠르게 파악할 수 있는 형태로 만들어 줍니다.

Prettier JSON을 사용하는 이유

코드 스타일을 하나의 기준으로 맞춰주는 자동 포맷터

Prettier는 줄바꿈 위치, 들여쓰기 깊이, 중괄호와 대괄호의 배치 같은 코드 스타일 요소를 설정된 규칙에 따라 자동으로 정리합니다. 덕분에 개발자는 코드 스타일을 매번 판단할 필요 없이, 일정한 기준에 맞춰 결과물을 생성할 수 있습니다.

이 과정에서 팀 내 코드 스타일이 자연스럽게 통일되고, 코드 리뷰나 협업 과정에서도 포맷과 관련된 논의가 줄어듭니다. JSON처럼 구조 해석이 중요한 데이터 포맷에서는 이러한 일관성이 작업 효율에 직접적인 영향을 줍니다.

JSON 구조를 한눈에 파악할 수 있도록 정리합니다

JSON은 문법적으로는 단순하지만, 작성 방식에 따라 가독성 차이가 크게 발생합니다. 한 줄로 나열된 JSON이나 들여쓰기가 정리되지 않은 JSON은 구조를 파악하는 데 많은 시간을 요구합니다.

Prettier는 객체와 배열의 중첩 구조에 맞춰 자동으로 줄을 나누고, 깊이에 따라 들여쓰기를 적용해 JSON의 전체 구조를 한눈에 확인할 수 있도록 정리합니다. API 응답 데이터, 설정 파일, 샘플 JSON을 확인할 때 Prettier를 적용한 경우와 그렇지 않은 경우의 차이는 실무에서 바로 체감됩니다.

ESLint와 함께 쓰이지만, 역할은 분명히 다릅니다

Prettier는 코드의 형태와 가독성을 관리하는 도구로, 문법 오류나 규칙 위반을 검사하는 ESLint와는 역할이 구분됩니다.

실무 환경에서는 두 도구를 병행해 사용하되, JSON 포맷과 스타일 정리는 Prettier에 맡기는 방식이 일반적으로 활용됩니다.

그래서 JSON을 다루는 작업이 잦아질수록, Prettier는 자연스럽게 기본 환경으로 자리 잡게 됩니다. 다음 단계에서는 Prettier JSON이 실제로 필요한 상황을 기준으로 정리해 보겠습니다.

Prettier로 JSON 정렬하는 방법

Prettier JSON은 복잡한 설정 없이도 바로 사용할 수 있는 도구입니다. 사용 환경에 따라 접근 방식은 조금씩 다르지만, 목적은 동일합니다. JSON을 항상 읽기 좋은 구조로 유지하는 것입니다.

VS Code에서 사용

VS Code에서 Prettier를 사용하는 방식은 JSON을 수정하면서 즉시 정리된 결과를 확인할 수 있어 가장 실무적인 접근입니다. 별도의 명령어 입력 없이 작업 흐름을 유지할 수 있어 개발 과정에서 가장 많이 활용됩니다.

* 문서 전체 포맷

Windows / Linux: Shift + Alt + F
macOS: Shift + Option + F

* 선택 영역만 포맷

Windows / Linux: Ctrl + K → Ctrl + F
macOS: Cmd + K → Cmd + F

Prettier 확장을 설치한 뒤 위 단축키로 포맷을 실행하면, JSON 구조가 즉시 정리됩니다.

저장 시 자동 포맷 설정

저장 시 자동 포맷은 JSON 정렬을 의식하지 않아도 항상 동일한 포맷을 유지할 수 있도록 해줍니다. 포맷 누락을 방지하고 협업 과정에서 발생하는 불필요한 수정 요청을 줄이는 데 효과적입니다.

jason

// VS Code settings.json

{

"editor.formatOnSave": true,

"[json]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

}

이 설정 이후에는 JSON 파일을 저장하는 순간(Ctrl + S / Cmd + S) 자동으로 Prettier가 적용됩니다.

CLI로 사용

CLI 방식은 여러 JSON 파일을 한 번에 정리하거나, 반복적인 포맷 작업을 자동화해야 할 때 유용합니다. 프로젝트 단위로 포맷 기준을 유지할 수 있어 설정 파일이나 대량의 JSON 데이터를 관리하는 환경에 적합합니다.

bash

# Prettier 설치 (로컬)

npm install --save-dev prettier

# 특정 JSON 파일 정렬

npx prettier --write data.json

# 프로젝트 내 모든 JSON 파일 정렬

npx prettier --write "**/*.json"

CLI 방식은 스크립트나 CI 과정에 포함하기도 쉬워, 포맷 누락을 방지하는 데 효과적입니다.

웹에서 바로 사용

웹 기반 방식은 로컬 환경 설정 없이 JSON을 빠르게 정리해야 할 때 활용됩니다. API 응답 데이터나 로그, 문서용 샘플 JSON을 일시적으로 정리하는 용도로 적합합니다.

prettier.io/playground에 접속한 뒤:

JSON 붙여넣기
포맷 실행
결과 복사

설치가 필요 없다는 장점이 있어, 간단한 확인이나 공유 목적의 JSON 정리에 자주 사용됩니다.

포맷 기준 고정 (.prettierrc)

협업 상황 작업이나 장기 프로젝트에서는 포맷 기준을 설정 파일로 고정해두는 것이 좋습니다.

json

// .prettierrc

{

"tabWidth": 2,

"printWidth": 80,

"trailingComma": "none"

}

이 파일을 기준으로 CLI와 에디터 모두 동일한 포맷 결과를 유지할 수 있습니다.

Prettier JSON 실무 적용 팁

포맷 기준 검사로 공유 환경 유지

포맷 기준 검사는 파일을 수정하지 않고, JSON 포맷이 기준에 맞는지만 확인합니다. 개발자가 직접 포맷을 수정하기 전에 어떤 파일이 기준을 벗어났는지 파악하고 싶을 때, 또는 로컬 환경에서 빠르게 포맷 상태를 점검하고 싶을 때 사용합니다.

bash

npx prettier --check "**/*.json"

커밋 전 수동으로 확인하거나, 스크립트에 포함해 배포 전 검증 단계에서 활용할 수 있습니다.

Git 커밋 전 자동 검사 (husky + lint-staged)

커밋 단계에서 자동으로 포맷을 적용하면, 개발자가 포맷을 신경 쓰지 않아도 일관된 코드가 저장소에 기록됩니다. 팀원 간 포맷 차이로 인한 불필요한 diff를 방지하고, 코드 리뷰에서 스타일 관련 논의를 줄이고 싶을 때 사용합니다.

bash

# 설치

npm install --save-dev husky lint-staged

# package.json에 추가

{

"lint-staged": {

"*.json": "prettier --write"

}

개발자가 커밋하는 순간 자동으로 JSON 파일이 정렬되어, 포맷 누락을 원천적으로 차단할 수 있습니다.

CI/CD 파이프라인에 통합

CI/CD 파이프라인에 포맷 검사를 통합하면, PR이나 MR 단계에서 포맷 기준을 강제할 수 있습니다. 로컬 환경에서 커밋 전 검사를 우회하거나, 여러 개발자가 협업하는 환경에서 일관된 포맷 기준을 유지하고 싶을 때 사용합니다.

yaml

# GitHub Actions 예시

- name: Check Prettier format

- run: npx prettier --check "**/*.json"

특정 파일 제외(.prettierignore)

자동 생성 파일이나 외부 라이브러리 설정 파일처럼 포맷을 적용하지 말아야 할 파일이 있을 때 설정합니다.

# .prettierignore

dist/

node_modules/

*.lock.json

포맷이 맞지 않으면 빌드가 실패하도록 설정해, 기준을 벗어난 코드가 메인 브랜치에 병합되는 것을 방지할 수 있습니다. 특히 오픈소스 프로젝트나 대규모 팀 환경에서 코드 품질을 자동으로 관리하는 데 효과적입니다.

자주 사용하는 Prettier JSON 단축키

1. 저장 시 자동 포맷 (가장 많이 사용)

파일을 저장하는 순간 자동으로 포맷이 적용됩니다. 별도의 단축키나 명령어 없이 자연스럽게 포맷을 유지할 수 있어 실무에서 가장 많이 사용하는 방식입니다.

json

// VS Code settings.json

{

"editor.formatOnSave": true,

"[json]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

}

설정 후 Ctrl + S (Windows/Linux) 또는 Cmd + S (macOS)로 저장하면 자동으로 정렬됩니다.

2. 문서 전체 포맷 단축키

저장 전에 포맷 결과를 미리 확인하고 싶거나, 자동 저장이 꺼져 있는 환경에서 수동으로 포맷을 적용할 때 사용합니다.

VS Code

Windows / Linux: Shift + Alt + F
macOS: Shift + Option + F

WebStorm / IntelliJ

Windows / Linux: Ctrl + Alt + L
macOS: Cmd + Option + L

Prettier JSON은 개인의 작업 흐름을 정리하고,

그 결과를 모두의 생산성으로 확장합니다.

JSON을 여는 순간부터 포맷을 고민하지 않아도 되기 때문에, 데이터의 구조와 의미에 바로 집중할 수 있습니다. 이렇게 정리된 상태는 개인의 작업을 편하게 만들 뿐 아니라, 이후 다른 사람이 같은 JSON을 확인하거나 수정할 때도 그대로 전달됩니다.

저장 시 자동 포맷부터 커밋 전 검증, CI 단계까지 일관된 포맷을 유지하면, JSON을 읽고 정리하는 데 쓰이던 시간을 줄이고 안정적인 작업 흐름을 만들 수 있습니다. Prettier JSON을 개인 작업 환경의 기본 설정으로 활용해 보시길 권장합니다.