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, 오타)가 있을 가능성이 높습니다. 메시지가 불명확하면 먼저 린터에 돌려 보세요.

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

관련 도구

보색 찾기

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

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

HEX → ASCII 변환기

16진 바이트 시퀀스를 ASCII 텍스트로 변환합니다. 프로토콜 디버깅, 리버스 엔지니어링, CTF 챌린지에 좋습니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

SVG를 CSS로 변환하는 도구

원본 SVG 마크업을 올바르게 인코딩된 `background-image: url("data:image/svg+xml,...")` 규칙으로 변환해 스타일시트에 바로 붙여넣을 수 있습니다.

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