개발자 도구
JavaScript 포맷터
문자열과 주석을 건드리지 않는 구조적 들여쓰기
결과
모든 처리는 브라우저에서 이루어집니다. 데이터는 기기를 벗어나지 않습니다.
관련 도구
사용 방법
완전한 재포맷이 아니라 구조적 들여쓰기를 적용합니다. 깊이를 추적하고 문자열과 주석을 건너뛰는 방식으로, 브라우저에 완전한 파서를 내려보내지 않고도 압축된 코드를 읽을 수 있게 만들기에 충분합니다.
코드 붙여넣기
압축된 번들, 콘솔에서 복사한 조각, 직접 작성한 코드 모두 동작합니다. 입력이 문법적으로 완전할 필요는 없습니다.
들여쓰기 선택
공백 2칸, 4칸, 탭 중에서 고르며 모든 중괄호와 대괄호 단계에 적용됩니다.
구조 불일치 확인
중괄호나 대괄호가 맞지 않으면 알려줍니다. 잘린 붙여넣기의 경우 보통 코드 일부만 복사했다는 뜻입니다.
예시
압축된 코드 읽기
중첩된 filter 콜백이 들어간 압축 함수가 펼쳐지면서 콜백 본문이 한 단계 안으로 들어가고 각 구문이 자기 줄을 갖습니다. 로직을 따라가며 찾던 조건을 발견하기에 충분합니다.
문자열은 그대로 둡니다
const t = "{ not code }" 처럼 중괄호가 들어간 문자열은 깊이 추적에서 완전히 제외되므로 이후 파일 전체의 들여쓰기를 틀어지게 하지 않습니다.
도구 소개
중괄호와 대괄호 깊이를 기준으로 JavaScript를 들여써서 압축되었거나 정렬이 엉망인 코드를 읽을 수 있게 만듭니다. 문자열 리터럴, 템플릿 리터럴, 주석은 분석에서 제외되므로 문자열 안의 중괄호가 들여쓰기를 망가뜨리지 않습니다. 번들링되거나 난독화된 코드를 파악할 때 유용합니다.