자바스크립트 포매터: JS 코드 정렬 온라인 뷰티파이어

자바스크립트 포매터가 하는 일

여러 사람이 작성한 코드, 커뮤니티에서 복사한 코드, 압축된 번들에서 꺼낸 코드는 읽기 어렵습니다. 줄마다 띄어쓰기가 다르고, 긴 체이닝은 화면 밖으로 넘어가며, 중첩된 콜백은 형태를 잃습니다. 자바스크립트 포매터는 하나의 규칙으로 코드의 배치를 다시 써 주므로, 코드가 무슨 일을 하는지에만 집중할 수 있습니다. 흔히 JS 뷰티파이어(beautifier) 또는 JS 코드 정렬 도구라고 부르는 것과 같은 역할입니다.

이 페이지는 널리 쓰이는 오픈 소스 코드 포매터인 Prettier 3를 브라우저에서 직접 실행합니다. JavaScript 파서는 처음 포맷할 때만 내려받으며, 코드는 페이지 밖으로 나가지 않습니다.

사용 방법

왼쪽 상자에 JavaScript나 JSX를 붙여넣습니다. 붙여넣자마자 정렬됩니다.
또는 파일 열기를 눌러 .js 파일을 불러오거나, 예시를 눌러 예제를 봅니다.
옵션을 고릅니다.
- 들여쓰기: 공백 2칸, 공백 4칸, 탭 중에서 고릅니다.
- 줄 너비: 줄을 바꾸기 전까지의 글자 수로 80, 100, 120, 160 중에서 고릅니다.
- 후행 쉼표: 전체, ES5, 없음 중에서 고릅니다.
- 작은따옴표: "text" 대신 'text'를 씁니다.
- 세미콜론: 켜면 문장 끝에 세미콜론을 붙이고, 끄면 안전한 곳에서 세미콜론을 뺍니다.
포맷을 누르거나 Ctrl+Enter를 누릅니다.
복사를 누르거나, 다운로드를 눌러 .js 파일로 저장합니다.

처음 실행한 뒤에는 입력에 맞춰 결과가 바로 바뀌고, 옵션을 바꾸면 즉시 다시 정렬됩니다.

정렬 전과 후

압축된 입력입니다.

const total=items=>items.filter(i=>i.qty>0).reduce((sum,{price,qty})=>sum+price*qty,0);async function load(url){const res=await fetch(url);if(!res.ok){throw new Error('Request failed: '+res.status)}return res.json()}

기본 옵션으로 포맷한 결과입니다.

const total = (items) =>
  items
    .filter((i) => i.qty > 0)
    .reduce((sum, { price, qty }) => sum + price * qty, 0);
async function load(url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error("Request failed: " + res.status);
  }
  return res.json();
}

화살표 함수의 매개변수에 괄호가 붙고, 메서드 체인은 80자에 들어가지 않으므로 호출마다 한 줄씩 나뉘며, 작은따옴표는 큰따옴표로 바뀝니다. 줄 너비를 100으로 설정하면 같은 체인이 한 줄에 들어갑니다.

const total = (items) =>
  items.filter((i) => i.qty > 0).reduce((sum, { price, qty }) => sum + price * qty, 0);

따옴표, 세미콜론, 후행 쉼표

이 세 가지 옵션만 정해도 팀 안의 코드 스타일 논쟁은 대부분 정리됩니다.

작은따옴표를 켜고 세미콜론을 끈 경우:

const name = 'Ada'
let list = [1, 2, 3]

후행 쉼표는 여러 줄로 된 목록이나 객체의 마지막 항목 뒤에 쉼표를 붙일지 정합니다. Prettier의 기본값인 전체(All)를 고르면 다음과 같습니다.

const user = {
  firstName: "Ada",
  lastName: "Lovelace",
  email: "[email protected]",
  role: "admin",
};

없음(None)을 고르면 "admin" 뒤의 마지막 쉼표가 빠집니다. 후행 쉼표를 쓰면 항목을 추가할 때 한 줄만 바뀌므로 diff가 깔끔해집니다. ES5는 배열과 객체에는 쉼표를 붙이지만 함수 매개변수에는 붙이지 않는 설정으로, 아주 오래된 실행 환경을 위한 것입니다.

JSX

React 컴포넌트도 정렬됩니다.

const App = () => (
  <div className="app">
    <h1>Hello</h1>
    <p>{name}</p>
  </div>
);

문법 오류

코드를 파싱할 수 없으면 포매터는 멈추고 위치를 알려 줍니다. 쉼표가 빠진 객체를 예로 들면

const a = {
  b: 1
  c: 2
};

메시지는 3행 3열: Unexpected token, expected ","입니다. 오류 내용은 파서가 내는 영어 그대로 표시되며, “,“가 와야 할 자리에 다른 토큰이 있다는 뜻입니다. 입력에서 보기를 누르면 그 위치로 이동합니다. 닫는 중괄호가 빠진 함수는 3행 1열: Unexpected token을 내는데, 파서가 }를 기대한 입력의 끝을 가리킵니다.

포매터는 코드를 실행하지 않고 린트 검사도 하지 않습니다. 쓰지 않는 변수, 잘못된 함수 이름, 로직 실수는 보고되지 않습니다.

팁

옵션은 한 번 합의한 뒤 프로젝트의 .prettierrc 파일에 적어 두세요. 그러면 에디터와 이 페이지가 같은 결과를 냅니다.
낯선 코드를 읽기 전에 포매터를 먼저 돌려 보세요. 구조를 따르는 배치에서는 중첩 실수가 쉽게 눈에 띕니다.
타입 표기가 있는 코드는 타입스크립트 포매터를 쓰세요. JavaScript 파서는 처음 나오는 : string에서 멈춥니다.
코드가 아니라 데이터라면 JSON 포매터가 더 엄격하고 유효성 검사까지 해 줍니다.

자바스크립트를 정렬하는 다른 방법

VS Code: Format Document(문서 서식)를 실행합니다. 단축키는 Windows에서 Shift+Alt+F, macOS에서 Shift+Option+F입니다. Prettier 확장을 설치하고 기본 포매터로 지정하면 이 페이지와 같은 결과가 나옵니다.
명령줄: npx prettier --write src/app.js로 파일을 정렬합니다. CI에서 npx prettier --check .를 실행하면 정렬되지 않은 파일이 있을 때 빌드를 실패로 처리할 수 있습니다.
브라우저 개발자 도구: Sources(소스) 패널의 pretty print 버튼을 쓰면 디버깅하는 동안 압축된 스크립트를 읽기 쉽게 볼 수 있습니다.

HTML 페이지 안의 스크립트는 HTML 포매터에서 마크업과 함께 정렬할 수 있습니다.

자바스크립트 포매터 자주 묻는 질문

포매터가 코드의 동작을 바꾸나요?

아니요. Prettier는 공백, 줄바꿈, 따옴표, 세미콜론, 후행 쉼표 같은 배치만 바꿉니다. 코드를 먼저 파싱한 뒤 같은 프로그램을 다시 출력하므로 동작은 그대로입니다.

JSX와 React 컴포넌트도 정렬할 수 있나요?

네. JavaScript 파서가 JSX를 이해하므로, React 컴포넌트는 요소마다 한 줄씩 놓이고 필요하면 괄호로 감싸서 정렬됩니다.

번들된 파일의 압축을 풀 수 있나요?

압축된 코드를 읽을 수 있게 배치할 수는 있지만, 압축 과정에서 사라진 원래 변수 이름이나 주석을 되살리지는 못합니다. 그러려면 소스 맵이 필요합니다.

버그도 찾아 주나요?

코드를 파싱할 수 없게 만드는 문법 오류만 알려 줍니다. 로직이나 스타일 규칙은 확인하지 않습니다. 그런 검사는 ESLint로, 타입 검사는 TypeScript로 하세요.

코드가 업로드되나요?

아니요. Prettier는 이 페이지의 브라우저 안에서 실행됩니다. 코드는 기기 밖으로 나가지 않습니다.

자바스크립트 포매터 (JS 코드 정렬)