내 도구

코드 서식 정리

코드를 붙여 넣으면 스스로 정리됩니다. 언어 자동 감지, 누를 버튼 없음.

사용 방법

  1. 상자에 코드를 붙여 넣으세요. 입력하는 대로 정리되며 누를 버튼은 없습니다.
  2. 코드에서 언어를 감지합니다. 추측이 틀리면 목록에서 고르세요. 공백 2칸이나 4칸, 80·100·120열을 바꾸면 즉시 다시 정리됩니다.
  3. 결과를 복사하거나 알맞은 확장자(.js, .ts, .json, .py …)로 내려받으세요.

예시

입력

function greet(user){if(!user){return "안녕하세요, 손님";}const tags=["new","active"];return `안녕하세요, ${user.name}님!`;}
export default greet;

정리 후

function greet(user) {
  if (!user) {
    return "안녕하세요, 손님";
  }
  const tags = ["new", "active"];
  return `안녕하세요, ${user.name}님!`;
}
export default greet;

기본 규칙(공백 2칸, 80열)으로 정리했습니다. Prettier가 세미콜론과 큰따옴표를 붙이며 템플릿 리터럴과 손님 대체값은 그대로입니다.

규칙, 한계, 알려진 문제

  • 서식 정리는 공백과 서식기 자체의 정규화(따옴표, 세미콜론, 끝 쉼표)를 바꿉니다. 코드를 실행하거나 키를 정렬하거나 이름을 바꾸지는 않으며 문자열 내용은 유지합니다.
  • 엔진: JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, Vue, GraphQL은 Prettier, Python은 Ruff(Black 호환)입니다. 현재 언어의 엔진만 처음 사용할 때 내려받고 브라우저가 캐시합니다.
  • 자동 감지는 휴리스틱입니다. 태그로 시작하는 코드는 JSX여도 HTML로 읽힐 수 있으니 JavaScript나 TypeScript를 직접 고르세요. JSON처럼 보이지만 올바르지 않은 객체는 JavaScript로 넘어갑니다.
  • 직접 고른 언어가 우선입니다. CSS를 고르면 몰래 SCSS로 정리하지 않습니다. TypeScript는 .ts를 먼저 시도하고 .tsx를 다음으로 봅니다.
  • JSON은 Prettier의 json 파서를 써서 짧은 객체가 한 줄에 남을 수 있습니다. 엄격한 검증, 키 순서, 압축이 필요하면 JSON 도구 모음을 쓰세요. 중복 키는 JSON.parse처럼 마지막 값을 씁니다.
  • Prettier의 기본 스타일은 고정입니다. 큰따옴표, 세미콜론, 유효한 곳의 끝 쉼표를 씁니다. .prettierrc와 .editorconfig는 읽지 않고 따옴표·세미콜론 옵션도 없습니다. Python은 큰따옴표를 쓰고 magic trailing comma를 존중합니다(Ruff/Black).
  • HTML 공백은 htmlWhitespaceSensitivity: css를 따르므로 인라인 요소 주변 공백이 원본과 다를 수 있습니다. Markdown, YAML, XML은 지원하지 않으며 마크다운 편집기, 설정 파일 변환, XML 서식 정리가 그 역할을 합니다.
  • 출력은 LF이고 끝에 줄바꿈이 없으며 여러 번 정리해도 결과가 같습니다. 20만 자를 넘으면 입력을 멈추고 약 0.6초 뒤 갱신됩니다. 서식 정리는 Web Worker에서 실행되고 텍스트는 업로드되거나 URL에 들어가거나 저장되지 않습니다.

코드를 읽기 좋게 만든 뒤 흔히 이어서 쓰는 도구입니다.

JSON 도구 모음

SQL 서식 정리

XML 서식 정리