01
구문 모드부터 확인
타입만 있으면 TS, 타입과 JSX가 함께 있으면 TSX를 선택하세요. 꺾쇠괄호의 의미가 모드마다 다릅니다.
- 예제는 선택한 모드에 맞는 코드로 바뀝니다.
HTML / CSS Dev Tools
자바스크립트 포맷터
구문과 스타일을 고른 뒤 원본과 결과를 나란히 확인하세요.
자바스크립트 포맷터
원본 코드
코드는 이 브라우저 탭에서만 처리되며 업로드되지 않습니다.
포맷 결과
코드를 입력하거나 예제를 불러오세요.
문서에서 복사한 코드와 프로젝트의 들여쓰기 규칙이 다르면 검토가 어려워집니다. 자바스크립트 포맷터는 원본을 왼쪽에 두고 JS, JSX, TS, TSX의 정리 결과를 오른쪽에 보여 줍니다.
이 자바스크립트 포맷터는 빈칸을 바꾸기 전에 구문을 분석합니다. 템플릿 문자열, JSX, 타입 표기를 유지하며 파싱 오류가 나면 첫 위치를 안내합니다. JavaScript 포맷터라는 이름으로 찾는 작업도 여기서 처리합니다.
자바스크립트 포맷터를 쓰는 이유
구문 선택과 원본 비교로 바뀐 부분을 직접 확인할 수 있습니다.
원본을 남긴 채 스타일 비교
들여쓰기나 따옴표를 바꾸어도 입력 코드는 덮어쓰지 않습니다. 자바스크립트 포맷터는 이전 결과를 만료시킨 다음 새 결과를 만들어요.
오래된 결과를 복사하지 않는 방법
02
서식 옵션 조정
기본 자동 포맷은 입력이 멈춘 뒤 350밀리초 후 실행됩니다. 옵션을 바꿔도 다시 계산합니다.
- 자동을 끄면 버튼이나 Ctrl/Cmd+Enter로 실행합니다.
03
결과 상태 확인
입력 또는 옵션을 바꾸면 복사와 다운로드가 잠시 비활성화됩니다. 오류는 첫 줄과 열에 표시합니다.
- 구문 검사는 TypeScript 타입 검사가 아닙니다.
구문과 출력 제어
JS부터 TSX까지
각 모드에 맞는 Prettier 파서로 JSX 태그와 TypeScript 타입 표기를 정리합니다. 타입스크립트 포맷 작업에서는 타입 표기를 유지합니다.
서식 선택
공백 2칸 또는 4칸, Tab, 따옴표, 세미콜론, 줄 너비와 끝 쉼표 규칙을 바꿉니다.
별도 검사와 압축
구문 검사를 직접 실행하거나 일반 JS만 Terser로 압축해 .min.js로 저장할 수 있습니다.
이 도구가 다루지 않는 범위
- 타입 오류는 찾지 않음
- 파싱에 성공해도 타입이 옳다는 뜻은 아닙니다. 프로젝트의 tsconfig.json이나 의존성은 읽지 않습니다.
- 압축은 일반 JS만
- JSX, TS, TSX는 빌드 도구에서 먼저 JS로 변환해야 합니다. 해당 모드의 압축 버튼은 비활성화됩니다.
- 깨진 구문을 자동 수리하지 않음
- 닫히지 않은 문자열이나 괄호는 줄과 열로 알립니다. 자바스크립트 포맷터는 코드를 추측해 채우거나 실행하지 않습니다.
- 프로젝트 설정은 불러오지 않음
- 화면에 있는 옵션만 적용합니다. .prettierrc, 플러그인 또는 ESLint 규칙은 자동으로 적용되지 않습니다.
자바스크립트 포맷터 자주 묻는 질문
제 자바스크립트가 어딘가에 업로드되나요?
아니요. 입력은 현재 브라우저 탭에서 처리되고 이 도구가 업로드하지 않습니다.
압축하면 코드 동작이 달라질 수도 있나요?
압축은 코드 구조를 바꾸므로 프로젝트 테스트가 필요합니다. 이 도구는 원본을 남겨 결과를 비교할 수 있게 합니다.
압축한 코드를 다시 원래대로 되돌릴 수 있나요?
완전히 되돌릴 수 없습니다. 압축 과정에서 사라진 주석과 원래 변수명은 서식만 다시 지정해도 복원되지 않습니다.
붙여넣은 코드가 서버로 전송되나요?
서버로 보내지 않습니다. 자바스크립트 포맷터는 브라우저 안에서 구문을 분석합니다.
압축 버튼을 눌렀는데 오류가 뜹니다.
JS 모드인지 먼저 확인하세요. JSX나 타입 표기는 그대로 JS 압축기에 전달할 수 없고, 일반 JS라도 구문 오류가 있으면 위치를 표시합니다.
답을 찾지 못했나요?