코드 정렬기 (Prettier)

팀마다 다른 코드 모양을 한 번에 맞추기

이 도구는 개발자들이 가장 많이 쓰는 오픈소스 코드 정리기 Prettier(MIT 라이선스)를 브라우저에서 그대로 돌려요. 코드를 붙여넣거나 파일을 열면 들여쓰기, 줄바꿈, 따옴표, 괄호 안 공백을 정해진 규칙으로 다시 써 줘요. 프로젝트에 Prettier를 설치하지 않은 상태에서 남의 코드를 읽거나, 블로그·문서에 코드를 예쁘게 붙일 때 편해요. 같은 옵션이면 결과가 명령줄 Prettier 3.3.3과 같아요(Node.js의 Prettier와 결과를 비교해 시험했어요).

언어와 옵션

• 자바스크립트는 JSX(리액트)도 함께 읽고, 타입스크립트는 TS·TSX를 읽어요. HTML과 Vue 파일 안의 <script>·<style>도 각 언어 규칙으로 정리해요.
• 한 줄 최대 길이는 넘어가면 줄을 나누는 기준이에요(Prettier 기본 80). 딱 맞춰 자르는 게 아니라 ‘이보다 길면 나눈다’는 목표예요.
• 세미콜론·작은따옴표·끝 쉼표는 팀 규칙에 맞추세요. 프로젝트에 .prettierrc가 있다면 같은 값으로 고르면 결과가 같아요.

문법 오류가 날 때

Prettier는 코드를 실제로 해석한 뒤 다시 쓰기 때문에 괄호가 안 닫혔거나 문법이 틀리면 정리하지 않고 오류 위치(줄·칸)를 알려 줘요. 언어 선택이 틀려도 오류가 나요. 예를 들어 타입 표기(: string)가 있는 코드는 ‘타입스크립트’로 골라야 해요. 코드 파일을 열면 확장자로 언어를 자동으로 골라요.

정리 엔진은 언어마다 필요한 부분만 처음 한 번 받아요(자바스크립트 약 0.6MB, 타입스크립트 약 1.1MB). 그 뒤 처리는 모두 이 기기 안에서 이뤄지고 코드는 어디에도 전송되지 않아요.

참고한 자료

• Prettier — Options
• Prettier (GitHub, MIT)