JavaScript 포매터
압축된 JS 코드를 읽기 좋게 정렬합니다
📖 중괄호만 세는 JS 포매터가 for문을 깨뜨리는 이유 가이드 보기
JavaScript 포매터
이 도구는 코드를 AST(추상 구문 트리)로 파싱하는 진짜 JS 파서가 아니라, 문자를 한 글자씩 훑으며 중괄호 { }의 개수만으로 들여쓰기 깊이를 계산하는 직접 구현한 스캐너입니다. 따옴표(', ", `)로 둘러싸인 문자열은 닫는 따옴표가 나올 때까지 통째로 건드리지 않고 그대로 복사하는 방식으로 보호되지만, 소괄호( )·대괄호[ ]는 깊이 계산에 전혀 포함되지 않고 정규식 리터럴(/.../)은 아예 인식하지 못합니다. 그래서 for(let i=0;i<n;i++) 같은 3단 for문 헤더의 세미콜론도 문장 종료로 오인해 줄이 나뉘거나, 정규식 안의 {1,3} 같은 패턴이 실제 코드 구조인 것처럼 잘못 처리될 수 있습니다.
자주 묻는 질문
이 포매터는 실제 JS 파서(AST 기반)를 사용하나요?
아니요. 문자 단위로 코드를 훑으며 중괄호 개수만 세는 직접 구현 스캐너입니다. 문법을 이해하고 다시 그리는 것이 아니라, 몇 가지 문자(중괄호·세미콜론·쉼표·따옴표)를 기준으로 줄바꿈과 들여쓰기를 삽입하는 방식입니다.
for(초기값;조건;증감) 형태의 반복문도 깨지지 않고 정리되나요?
세미콜론이 나올 때마다 무조건 줄바꿈을 넣기 때문에, for문 괄호 안의 세미콜론 3개도 문장 종료로 인식되어 for(let i=0; / i<n; / i++){처럼 헤더 자체가 세 줄로 쪼개질 수 있습니다. 괄호 안인지 밖인지를 구분하지 않기 때문입니다.
정규식 리터럴(예: /a{1,3}/)도 안전하게 처리되나요?
안전하지 않을 수 있습니다. 이 도구는 문자열(따옴표)만 별도로 인식해 보호할 뿐 정규식 리터럴은 특별히 구분하지 않으므로, 정규식 안에 있는 {, }, , 같은 문자가 실제 코드의 중괄호·쉼표처럼 취급되어 줄바꿈이나 깊이 계산에 영향을 줄 수 있습니다.
배열 리터럴 [1,2,3]도 중괄호처럼 들여쓰기 깊이에 반영되나요?
아니요. 깊이는 오직 중괄호 { }의 등장 횟수로만 계산되며 대괄호는 별도로 세지 않습니다. 따라서 배열 리터럴 안의 쉼표는 현재 중괄호 깊이가 0이면 줄바꿈 없이 공백만 추가되어 한 줄로 남는 경우가 많습니다.
템플릿 리터럴 안의 삽입 표현식도 정리해주나요?
아니요. 백틱(`)으로 시작한 문자열은 닫는 백틱이 나올 때까지 전부 하나의 문자열로 취급되어 그대로 복사되므로, 그 안에 들어간 삽입 표현식에 포함된 중괄호나 세미콜론은 전혀 재정렬되지 않고 원본 그대로 남습니다.
문자열 내용 자체는 바뀌지 않는다고 보장되나요?
네, 이 부분은 안전합니다. 따옴표를 만나면 백슬래시 이스케이프까지 인식하며 같은 따옴표가 다시 나올 때까지 문자 그대로 복사하는 별도 처리(inStr)를 거치므로, 문자열 내부의 공백이나 줄바꿈은 건드리지 않습니다.
Prettier 같은 도구와 정확히 무엇이 다른가요?
Prettier는 코드를 실제로 파싱해 문법 트리를 만든 뒤 그 트리를 기준으로 다시 출력하므로 for문·정규식·템플릿 리터럴까지 전부 안전하게 처리합니다. 이 도구는 그런 파싱 과정 없이 몇 가지 기호만 보고 판단하는 훨씬 단순한 방식이라, 위에서 설명한 것처럼 특정 패턴에서는 예상과 다른 결과가 나올 수 있습니다.
들여쓰기 크기와 중괄호 스타일 옵션은 정확히 무엇을 바꾸나요?
들여쓰기 크기는 각 깊이마다 반복해서 붙이는 공백(또는 탭) 문자열의 길이만 바꾸고, 중괄호 스타일은 여는 중괄호를 이전 줄 끝에 붙일지(같은 줄) 새 줄로 내릴지(다음 줄)만 전환합니다. 둘 다 위에서 설명한 깊이 계산 로직 자체에는 영향을 주지 않습니다.