Softonic

JavaScript 포매터

단계 1 / 3
다음

압축되거나 들여쓰기가 엉망인 JavaScript 덩어리를 붙여 넣으면, 에디터가 쓰는 것과 같은 규칙으로 포맷된 깔끔하고 읽기 좋은 코드를 돌려받습니다. 탭이나 공백, 작은따옴표나 큰따옴표, 세미콜론 유무, ES5 또는 전체 후행 쉼표를 고르세요. 현대 구문, 옵셔널 체이닝, 널 병합, JSX, TypeScript, 최상위 await, 을 처리합니다.

JavaScript를 포맷하는 방법

  1. 1

    소스 붙여넣기

    유효한 JS, JSX, TypeScript 무엇이든요. 파서가 구문에서 방언을 골라냅니다.

  2. 2

    환경설정 지정

    들여쓰기 크기, 탭 vs 공백, 따옴표 스타일, 세미콜론, 출력 폭, 후행 쉼표.

  3. 3

    포맷

    도구가 Prettier 호환 처리를 실행해 포맷된 결과를 출력합니다.

  4. 4

    출력 복사

    한 번의 클릭으로 복사하거나 파일로 다운로드합니다. 원래 들여쓰기는 위에 덧대지 않고 버려집니다.

스타일 옵션

옵션 값 기본값
들여쓰기 tab, 2, 4 공백 2칸
따옴표 스타일 single, double double
세미콜론 always, never always
출력 폭 60 - 120 80
후행 쉼표 none, es5, all es5
화살표 괄호 always, avoid always
괄호 간격 true, false true
JSX 작은따옴표 true, false false

포매팅이 중요한 이유

포매팅은 외형이 아니라 인지 부하를 줄이는 일입니다. 일관되게 포맷된 코드베이스는 리뷰어가 잘못 놓인 중괄호를 찾는 대신 로직 변경에 집중하게 해줍니다.

  • 프로젝트가 포매터를 채택하면 사소한 논쟁이 끝납니다. git diff는 들여쓰기 논쟁이 아니라 실제 변경을 보여줍니다.
  • 프리커밋 훅(Husky + lint-staged 같은 도구)은 커밋 전에 스테이징된 파일을 자동 포맷합니다.
  • 에디터 통합(VS Code, WebStorm)은 저장 시 같은 규칙을 실행합니다.

포매팅이 하지 않는 것

  • 린팅하지 않습니다. 스타일 규칙(no-unused-vars, eqeqeq)은 ESLint 영역입니다. 포매터는 공백과 구두점만 재배치하며 로직 문제로 코드를 거부하지 않습니다.
  • 구문 오류를 고치지 않습니다. 입력이 유효하지 않은 JS라면 포매터는 오류를 던집니다. 코드가 최소한 파싱되는지 확인하는 점검으로 쓰세요.
  • 명명 규칙을 강제하지 않습니다. camelCase vs snake_case는 린트 규칙이지 포매터 규칙이 아닙니다.

흔한 실수

  • 포매터와 싸우기. 실행 후 계속 다시 포맷한다면 둘 다 시간 낭비입니다. 옵션을 설정하거나 프로젝트의 선택을 받아들이세요.
  • 생성된 파일에 포맷 실행. 번들러 출력, 트랜스파일된 코드, .min.js, 어느 것도 이득이 없습니다. 산출물이 아니라 소스를 포맷하세요.
  • 파싱 없이 포매팅. 정규식 “보기 좋게 출력”은 템플릿 리터럴, 정규식 리터럴, JSX를 망가뜨립니다. 항상 AST 기반 포매터(이 도구 같은)를 쓰세요.

자주 묻는 질문

네. 파서가 TypeScript 구문(타입, 인터페이스, 제네릭, 데코레이터)을 감지해 그에 맞게 포맷합니다. .tsx / .jsx 파일 내 JSX도 지원합니다.

Prettier 기본값과 같은 규칙을 따르며, 흔한 옵션(출력 폭, 따옴표, 세미콜론, 후행 쉼표)으로 설정할 수 있습니다. 여기서 포맷한 파일은 같은 설정의 Prettier로 포맷한 것과 일치해야 합니다.

포매터는 유효하고 파싱 가능한 JavaScript를 요구합니다. 오류가 나면 코드에 구문 문제(닫히지 않은 중괄호, 잘못된 JSX, 오타)가 있을 가능성이 높습니다. 메시지가 불명확하면 먼저 린터에 돌려 보세요.

네. 한 줄(//)과 블록(/* */) 주석 모두 출력에 유지되며, 소스에 있던 위치 가까이에 배치됩니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

EditorConfig 생성기

들여쓰기 스타일과 크기, 줄 끝, 문자 인코딩, 공백 규칙을 지정해 .editorconfig 파일을 생성하고 IDE와 편집기 전반의 형식을 일관되게 유지하세요.

이 도구는 다른 언어로도 제공됩니다