JavaScript 정리기(Beautifier)

압축된 번들이나 채팅·이메일에서 붙여 넣은 코드는 읽기 어렵습니다. 이 정리기는 중괄호, 대괄호, 괄호를 기준으로 JavaScript의 들여쓰기를 다시 맞추고, 한 줄에 문장 하나를 두고, 연산자 주위에 공백을 넣어 논리를 따라가거나 검토하거나 디버깅하기 쉽게 만듭니다. 전체 파서가 아니라 토큰 단위로 동작하며, 문자열, 정규식, 템플릿 리터럴은 글자 그대로 복사하고 주석은 유지합니다.

사용 방법

1. JavaScript를 상자에 붙여 넣으면 입력하는 동안 정리된 결과가 나타납니다.
2. 들여쓰기를 공백 2칸, 공백 4칸, 탭 중에서 고릅니다.
3. 중괄호 스타일을 고릅니다. if/for/function과 같은 줄에 둘지, 별도의 줄에 둘지입니다.
4. 연속으로 남길 빈 줄의 수를 정한 뒤 결과를 복사합니다.

계산식

들여쓰기 = 여러 줄 블록을 연 { [ ( 의 개수 × 들여쓰기 단위

{는 블록이나 객체 리터럴을 열고 새 들여쓰기 줄을 시작하며, }는 이를 닫습니다. ;는 줄을 끝내지만 for (…) 머리 부분 안에서는 예외입니다. 쉼표는 객체 리터럴 안, 그리고 이미 여러 줄로 나눈 괄호 안에서 줄을 나눕니다. return 뒤의 줄바꿈이나 ( 또는 [로 시작하는 문장처럼 자동 세미콜론 삽입에 의존하는 곳에서는 줄바꿈을 유지하므로, 정리한 코드는 원본과 똑같이 동작합니다.

예시

압축된 한 줄 if(a){b()}else{c()}는 다섯 줄이 됩니다. if (a) {, 공백 두 칸 들여쓴 b(), } else {, 다시 들여쓴 c(), 닫는 }입니다. 별도 줄 중괄호 스타일에서는 여는 중괄호가 각자 새 줄로 가고 else도 새 줄에서 시작합니다.