UTILS.
100% 브라우저 내 실행
🎨

JavaScript 뷰티파이어 / 포매터

압축되거나 지저분한 JavaScript와 JSON을 일관된 들여쓰기, 간격, 줄바꿈으로 보기 좋게 정리합니다. 전적으로 브라우저에서 실행되는 직접 작성된 포매터입니다.

— 여기에 결과가 표시됩니다 —

이 도구에 대하여

JavaScript 뷰티파이어는 압축되거나 한 줄로 되어 있거나 들여쓰기가 일관되지 않은 JavaScript와 JSON을 균일한 들여쓰기와 간격을 갖춘 깔끔하고 읽기 좋은 소스로 다시 포맷합니다. 번들된 라이브러리를 읽거나, 복사한 스니펫을 정리하거나, JSON 덩어리를 살펴볼 때 유용합니다. 모든 작업은 브라우저에서 이루어지며, 코드는 텍스트로만 다시 포맷될 뿐 실행되지 않습니다. 따라서 eval도 new Function도 없고 아무것도 업로드되지 않습니다.

이 포매터는 정규식 꼼수가 아니라 직접 작성된 토크나이저입니다. 문자열, 템플릿 리터럴, 정규식, 라인/블록 주석의 내부를 정확히 건너뛰면서 소스를 토큰으로 스캔하므로, 그 안의 따옴표나 슬래시가 구조로 잘못 해석되는 일이 없습니다. 고전적인 lookbehind 휴리스틱이 나눗셈 연산자와 정규식 리터럴을 구분합니다. 이후 토큰 스트림은 '{', '[', ';' 뒤에 줄바꿈을 넣고, '}'와 ']' 앞에서 들여쓰기를 줄이며, 객체와 배열 리터럴 안에는 한 줄에 한 항목씩, 연산자 주위와 키워드 뒤에는 하나의 공백을 두어 다시 출력됩니다.

들여쓰기는 2칸 공백, 4칸 공백, 또는 탭 중에서 선택하고, 중괄호 스타일도 선택합니다. collapse는 여는 중괄호를 같은 줄에 유지하고(K&R / 1TBS), expand는 그것을 별도의 줄로 옮깁니다(Allman). 이 도구는 문자열과 정규식 내용을 바이트 단위로 그대로 보존하므로, 다시 포맷된 코드는 입력과 의미상 동일합니다. 결과를 바로 에디터에 복사하세요.

자주 묻는 질문

제 코드를 실행하거나 평가하나요?
아니요. 뷰티파이어는 소스를 텍스트로 토큰화하고 다시 출력하기만 합니다. eval이나 new Function을 절대 호출하지 않고 코드를 실행하지 않으므로, 신뢰할 수 없거나 독점적인 JavaScript를 붙여넣어도 안전합니다. 모든 작업은 브라우저 안에 머뭅니다.
JSON에도 작동하나요?
네. JSON은 JavaScript 문법의 부분집합이므로, 압축된 JSON 객체나 배열을 붙여넣으면 들여쓰기가 적용되고 키마다 한 줄로 된 형태로 재구성됩니다. 문자열, 숫자, 중첩 구조는 JavaScript와 동일한 방식으로 포맷됩니다.
중괄호 스타일의 차이는 무엇인가요?
Collapse(K&R / 1TBS)는 여는 중괄호를 문장과 같은 줄에 유지합니다(예: 'if (x) {'). Expand(Allman)는 여는 중괄호를 문장 아래 별도의 줄에 둡니다. 둘 다 동일하고 유효한 코드를 만들며 레이아웃만 다릅니다.
제 코드의 동작이 바뀌나요?
아니요. 공백, 들여쓰기, 줄바꿈만 변경됩니다. 문자열, 템플릿 리터럴, 정규식의 내용은 정확히 보존되므로, 다시 포맷된 출력은 원본 소스와 기능상 동일합니다.

더 많은 도구