코드 정렬기: JavaScript, TypeScript, HTML, CSS 등을 한 번에 정리

사용 방법

1. 코드를 붙여 넣거나 파일을 엽니다. 언어는 자동으로 알아내며, 틀리면 언어 목록에서 바꾸세요.
2. 들여쓰기(공백 2칸, 4칸, 탭)와 줄 너비를 고릅니다. JavaScript와 TypeScript는 세미콜론과 작은따옴표 사용 여부, 끝의 쉼표도 고를 수 있습니다.
3. 입력하는 대로 오른쪽에 정리된 코드가 나타나며, "정리하기"를 눌러도 됩니다. 코드에 문법 오류가 있으면 대신 오류가 난 줄과 열을 보여 줍니다.
4. 결과를 복사하거나 파일로 받으세요. 다른 도구로 보내거나, 결과를 입력으로 써서 다른 옵션으로 다시 정리할 수 있습니다.

예시

const users=[{name:'Ada',age:36},{name:'Lin',age:28}]

→ const users = [
  { name: "Ada", age: 36 },
  { name: "Lin", age: 28 },
];

body{margin:0;font:16px/1.5 sans-serif}.card{display:flex}

→ body {
  margin: 0;
  font: 16px/1.5 sans-serif;
}
.card {
  display: flex;
}

const a = {
  b: ,
};

→ 2줄: Unexpected token

계산 방식

정리는 오픈소스 코드 정렬기 Prettier가 브라우저에서 합니다. 쓴 것의 띄어쓰기만 손보는 것이 아니라, 코드를 구문 트리로 해석하고 원래 배치를 버린 다음 자체 규칙과 고른 옵션으로 트리를 다시 출력합니다. 그래서 이전 모양이 어떻든 같은 코드는 항상 같은 모양으로 나옵니다. 주석은 유지되고, 문장 사이에 빈 줄이 있었다면 빈 줄도 남깁니다.

언어마다 해석기가 따로 있고 쓸 때만 불러옵니다. JavaScript, JSX, JSON은 babel, TypeScript는 TypeScript 해석기, CSS·SCSS·Less는 PostCSS, 그리고 HTML·Vue, Markdown, YAML, GraphQL, Handlebars용 해석기가 있습니다. HTML과 Vue는 안의 style과 script 블록도 함께 정리합니다. 이 도구는 언어별, 옵션별, 문법 오류가 있는 코드로 테스트했습니다.

언어는 코드에서 추정합니다. 해석되는 JSON, HTML 태그로 시작하는 문서, TypeScript를 가리키는 타입 표기 같은 것으로, 파일을 열면 파일 이름으로도 추정합니다. 추정이므로 틀리면 바꾸세요.

출처

• Prettier: 의견이 분명한 코드 정렬기
• Prettier 옵션
• Prettier의 원칙: 무엇을 바꾸고 바꾸지 않는가

자주 묻는 질문

코드를 온라인으로 어떻게 정리하나요?

코드를 붙여 넣고 언어를 확인한 뒤 오른쪽 결과를 보세요. 많은 프로젝트가 쓰는 코드 정렬기 Prettier가 고른 들여쓰기와 줄 너비로 코드를 다시 배치합니다.

어떤 언어를 지원하나요?

JavaScript(JSX 포함), TypeScript(TSX 포함), JSON, JSON5, HTML, Vue, CSS, SCSS, Less, Markdown, YAML, GraphQL, Handlebars입니다. Python, Java, PHP 같은 언어는 Prettier 자체가 지원하지 않습니다. SQL은 SQL 정리 도구를 쓰세요.

정리하면 코드가 하는 일이 바뀌나요?

아니요. Prettier는 띄어쓰기, 줄바꿈, 들여쓰기, 따옴표, 있어도 없어도 되는 괄호와 쉼표 같은 배치만 바꿉니다. 코드를 해석해서 다시 출력하고, 코드가 올바르지 않으면 오류로 멈추므로 깨진 코드를 추측하지 않습니다.

긴 HTML 태그의 닫는 >가 왜 혼자 다음 줄로 가나요?

Prettier의 기본값이자 안전한 선택입니다. <a>나 <span> 같은 인라인 요소는 태그 옆의 공백 하나가 실제 렌더링을 바꿀 수 있어서, 태그가 여러 줄로 나뉠 때 Prettier는 공백을 더하거나 빼는 대신 >의 위치를 옮깁니다. 이 페이지의 "HTML 태그 줄바꿈"에서 더 평범하게 보이는 방식으로 바꿀 수 있지만, 아주 드물게 일부러 공백 없이 붙여 쓴 태그 옆에 공백이 생기거나 사라질 수 있습니다.

왜 정리하지 않고 오류가 나오나요?

코드에 문법 오류가 있거나 언어가 틀린 경우입니다. 메시지에 줄과 열이 나옵니다. 언어 목록이 코드와 맞는지 확인하고 오류를 고치면 결과가 나타납니다.

세미콜론을 빼는 것처럼 내 스타일로 쓸 수 있나요?

네. 세미콜론, 작은따옴표, 끝의 쉼표, 들여쓰기, 줄 너비를 바꿀 수 있습니다. 이 옵션은 Prettier의 옵션을 따르므로, 같은 옵션으로 Prettier를 쓰는 프로젝트와 같은 모양이 됩니다.

코드가 업로드되나요?

아니요. Prettier가 브라우저에서 실행되며 코드는 서버로 전송되지 않습니다.

JSON 정리나 SQL 정리와 무엇이 다른가요?

JSON 정리는 JSON을 고치고 정렬하는 기능이 있고, SQL 정리는 SQL 방언을 이해합니다. 이 도구는 여러 언어를 같은 옵션으로 정리하며 JSON도 다룹니다. 보내기로 도구 사이에 결과를 넘길 수 있습니다.

관련 도구

• JSON
• SQL
• 비교

마지막 업데이트: 2026-10-25