코드 포매터

기능 소개

코드 포매터는 빽빽하거나 압축(minify)되었거나 들여쓰기가 들쭉날쭉한 코드를 깔끔하고 일관된 스타일로 다시 출력합니다. 웹 개발에서 자주 다루는 HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML, GraphQL을 지원합니다.

내부적으로는 수백만 개의 프로젝트가 사용하는 포매터인 Prettier를 실행하므로, VS Code나 pre-commit 훅에서 포맷한 코드와 똑같은 결과를 얻을 수 있습니다. 각 언어의 파서는 해당 언어를 선택할 때만 불러오기 때문에 페이지가 가볍게 유지됩니다.

사용 방법

1. 코드의 언어를 선택합니다.
2. 코드를 붙여넣거나 파일을 엽니다.
3. 들여쓰기 스타일(공백 2칸, 공백 4칸, 탭)과 줄 너비를 고릅니다. 너비보다 긴 줄은 언어가 허용하는 위치에서 줄바꿈됩니다.
4. JavaScript와 TypeScript는 문장 끝에 세미콜론을 붙일지 선택합니다. 스크립트와 스타일시트는 프로젝트에서 선호한다면 작은따옴표를 선택합니다.
5. 결과를 복사하거나 다운로드합니다.

예시

예시는 인라인 CSS와 JavaScript가 들어 있는 한 줄짜리 HTML 페이지입니다. 포맷하고 나면 각 요소가 한 줄씩 차지하고, CSS 규칙은 선언 하나당 한 줄로 펼쳐지며, 스크립트의 화살표 함수에는 괄호와 세미콜론이 붙습니다.

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

팁

• 포맷은 간단한 문법 검사 역할도 합니다. Prettier가 입력을 파싱하지 못하면 오류 메시지에 줄과 열이 표시되므로 바로 실수한 위치로 이동할 수 있습니다.
• XML은 중첩된 태그를 들여쓰기 위해 공백을 의미 없는 것으로 취급해 포맷합니다. 문서가 요소 안의 정확한 공백에 의존한다면 사용하기 전에 결과를 확인하세요.
• 반대 작업이 필요하다면 JavaScript·CSS 압축 도구로 프로덕션용 코드를 줄이거나, JSON 포매터로 JSON을 검증하고 압축하세요.