코드 정리 (Prettifier)
HTML, CSS, JavaScript 코드를 보기 좋게 정리합니다
브라우저 개발자 도구에서 복사한 한 줄짜리 스타일이나 압축된 스크립트를 사람이 읽을 수 있게 펼치는 도구입니다. HTML·CSS·JavaScript 세 종류를 버튼으로 고르면 중괄호와 세미콜론, 태그 경계를 기준으로 줄을 나누고 2칸 들여쓰기를 적용해 결과 창에 보여 줍니다. 문자열과 정규식 리터럴, 주석은 토큰 단위로 보존해서 따옴표 안의 세미콜론 때문에 줄이 엉뚱하게 잘리는 일을 막습니다. 완전한 파서가 아닌 경량 포매터라 JSX 나 복잡한 템플릿 리터럴은 손질이 덜 될 수 있으니, 결과를 에디터의 Prettier 로 한 번 더 다듬는 흐름을 권합니다.
이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.
코드 정리, 이렇게 쓰세요
한 줄로 뭉친 HTML·CSS·JS·JSON 코드에 들여쓰기와 줄바꿈을 넣어 읽기 쉽게 정리합니다.
압축된 서드파티 코드를 분석하거나, 브라우저에서 복사한 인라인 스타일을 정리할 때 씁니다.
간이 포매터라 복잡한 JSX·템플릿 리터럴은 완벽히 정리되지 않습니다. 들여쓰기 폭(2/4칸)을 프로젝트 규칙에 맞추세요.
관련 도구
자주 묻는 질문
Q. 들여쓰기 폭을 4칸이나 탭으로 바꿀 수 있나요?
현재는 공백 2칸 고정입니다. 다른 규칙이 필요하면 결과를 에디터에 붙여넣고 자동 서식으로 한 번 더 정리하세요.
Q. JSON 도 정리되나요?
JSON 은 JavaScript 로 선택하면 대체로 펼쳐지지만, 들여쓰기 폭 선택과 문법 오류 위치 표시가 필요하면 JSON 포매터 도구가 더 정확합니다.
Q. 정리했더니 인라인 스크립트가 있는 HTML 이 이상해요.
HTML 모드는 태그 구조를 기준으로 줄을 나누기 때문에 script·style 안의 코드는 그대로 두거나 단순하게 처리합니다. 스크립트만 따로 잘라 JavaScript 모드로 정리하세요.