코드 정렬

코드 정렬 도구로 할 수 있는 것

코드 정렬은 들여쓰기가 무너졌거나 한 줄로 압축된 코드를 일정한 규칙으로 줄바꿈하고 들여써서 사람이 읽기 쉽게 바꾸는 도구입니다. HTML, CSS, JavaScript, SQL, JSON 다섯 가지를 지원하며, 들여쓰기는 공백 2칸으로 맞춥니다. 코드의 동작은 바꾸지 않고 모양만 정리합니다.

사용 방법

1. 언어 선택에서 HTML, CSS, JavaScript, SQL, JSON 중 하나를 누릅니다. 선택된 버튼은 파란색으로 표시됩니다.
2. 원본 코드 칸에 정렬할 코드를 붙여 넣습니다.
3. 정렬 버튼을 누르면 아래에 결과 칸이 나타납니다.
4. 복사 버튼으로 결과를 가져가고, 새로 작업하려면 초기화를 누릅니다.

이럴 때 유용합니다

남의 사이트 소스를 참고하려고 열었는데 CSS 가 한 줄로 압축(minify)되어 있을 때, 붙여 넣고 정렬하면 선택자별로 나뉘어 구조가 보입니다. API 응답으로 받은 JSON 이 길게 이어져 있어 어떤 필드가 있는지 파악하기 어려울 때도 쓸 만합니다. 쿼리 로그에서 복사한 긴 SQL 을 SELECT, FROM, WHERE 단위로 나눠 보면 조인 조건이나 빠진 괄호를 찾기가 수월합니다. 블로그나 문서에 코드를 붙이기 전에 모양을 정돈하는 용도로도 씁니다.

알아 두면 좋은 점

정렬은 브라우저 안에서 js-beautify 와 sql-formatter 라이브러리로 처리되며, 입력한 코드는 서버로 전송되지 않습니다. 회사 내부 쿼리나 설정 파일을 넣어도 외부로 나가지 않는다는 뜻입니다.

JSON 은 문법이 정확해야 정렬됩니다. 끝에 쉼표가 남아 있거나 키에 따옴표가 없으면 오류 메시지가 뜨는데, 이 점을 이용해 JSON 문법 검사기처럼 쓸 수도 있습니다. HTML 을 선택했는데 입력 내용이 < 로 시작하지 않으면 JavaScript 로 간주해 정렬합니다. 원본에 있던 빈 줄은 최대 2줄까지 유지되고, 긴 줄을 강제로 자르지는 않습니다.

자주 묻는 질문

압축된 코드의 변수 이름도 복원되나요? 아닙니다. 줄바꿈과 들여쓰기만 정리하며, a, b 처럼 짧게 바뀐 이름은 그대로 남습니다.

PHP 나 Python 코드도 되나요? 지원 언어는 화면의 다섯 가지뿐입니다. 다른 언어를 넣으면 결과가 의도와 다르게 나올 수 있습니다.