JS/CSS 포맷터

핵심 개념

JS/CSS 포맷터는 Prettier 같은 언어 파서가 아니라, 중괄호가 열리고 닫히는 깊이만 세어 두 칸 들여쓰기를 넣는 기본 정리기입니다. 세미콜론을 만나면 줄을 바꾸고, 닫는 중괄호는 한 단계 바깥에 맞춥니다. 자바스크립트와 스타일시트 모드는 화면에서 구분되지만 들여쓰기 규칙은 같습니다. 압축된 한 줄 소스를 사람이 읽기 쉽게 펼칠 때 JS/CSS 포맷터가 도움이 됩니다. 빈 줄은 되도록 줄이고 내용이 있는 줄만 깊이에 맞춰 다시 붙이므로, 뭉친 초안을 펼쳐 리뷰하기에 알맞습니다.

문자열이나 템플릿 리터럴 안의 중괄호까지 구조로 오인할 수 있어, 복잡한 문법은 전용 포맷터 결과가 더 안정적입니다. 이 JS/CSS 포맷터는 AST를 만들지 않으므로 import 정렬, 따옴표 통일, 후행 쉼표 규칙은 적용하지 않습니다. 브라우저에서만 동작하고 소스를 업로드하지 않습니다. 압축 도구로 줄인 스니펫을 다시 펼쳐 리뷰하는 보조 단계로 쓰는 것이 가장 잘 맞습니다. 포맷 결과는 읽기 전용 칸에만 채워지므로 원본은 그대로 두고 나란히 비교할 수 있습니다.

예시

소스에 .box{color:red;margin:0} 를 넣고 CSS 모드에서 포맷을 누르면 여는 중괄호 다음 줄에 선언이 두 칸 들어가고 닫는 중괄호가 원래 깊이에 맞춰집니다. 자바스크립트 모드에서 function a(){return 1;} 를 넣어도 같은 방식으로 중괄호 안이 한 단계 들어갑니다. 결과 복사로 정리된 코드를 바로 가져갈 수 있습니다.