JavaScript 포맷터 - 무료 온라인 도구

기능

정렬/압축 전환

들여쓰기 지정

구문 강조

사용 방법

1. 왼쪽 입력 상자에 JavaScript를 붙여넣으세요.

2. 포맷 버튼으로 보기 좋게 정리하거나, 압축 버튼으로 한 줄로 압축하세요.

3. 정리된 결과를 복사하세요.

이 도구에 대하여

압축된 스크립트, 채팅에서 붙여넣은 코드, 브라우저에서 연 번들 파일은 한 줄에 뭉쳐 있어 읽기 어렵습니다. 이 포매터는 중괄호, 대괄호, 소괄호를 기준으로 JavaScript를 다시 들여쓰고 문장을 각각 한 줄에 두며 문자열과 주석은 그대로 유지해, 함수와 객체의 구조가 다시 보이게 합니다. 공백 2칸, 4칸, 탭 중에서 고를 수 있습니다. "압축"은 반대로 주석과 여분의 공백을 없애 짧은 코드로 만듭니다. 브라우저에서 바로 동작하는 가벼운 포매터이지 완전한 컴파일러가 아니므로 코드를 읽고 다듬는 데 가장 알맞습니다. 프로젝트 전체의 형식을 통일하려면 Prettier나 편집기의 포맷 기능을 쓰세요.

자주 묻는 질문

난독화되거나 압축된 코드를 원래대로 되돌릴 수 있나요?

포맷팅으로 들여쓰기와 줄바꿈이 돌아와 압축 코드를 읽을 수 있게 되지만, a, b, e처럼 짧아진 변수 이름을 원래 이름으로 되돌릴 수는 없습니다. 그러려면 소스 맵이 필요합니다.

TypeScript나 JSX도 지원하나요?

들여쓰기가 괄호를 따르기 때문에 간단한 TypeScript와 JSX는 괜찮게 정리되는 경우가 많지만, 타입 표기와 JSX 태그를 따로 해석하지는 않습니다. 이런 언어를 확실하게 정리하려면 Prettier를 쓰세요.

압축한 결과를 운영 환경에 써도 되나요?

주석과 공백은 없애지만 Terser나 esbuild 같은 전용 도구처럼 변수 이름을 바꾸거나 쓰지 않는 코드를 제거하지는 않습니다. 운영 빌드에는 소스 맵도 만들어 주는 번들러의 압축 기능을 쓰세요.

포맷팅하면 코드 동작이 바뀌나요?

포매터는 공백과 줄바꿈만 바꿉니다. 줄을 넘어가는 자동 세미콜론 삽입에 의존하는 코드가 주된 위험이므로, 커밋하기 전에 반드시 정리된 코드로 테스트를 돌리세요.

정규 표현식 근처의 결과가 이상해 보이는 이유는 무엇인가요?

/[a-z]+/ 같은 정규식 리터럴은 가벼운 포매터에게 나눗셈처럼 보일 수 있습니다. 복잡한 정규식이 있는 줄이 이상하게 나뉘면 그 줄을 직접 고치거나 완전한 파서를 쓰는 포매터를 이용하세요.

JavaScript 포맷터 및 코드 정리

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구