무료 코드 포맷터: JavaScript, Python, HTML 등 코드 정리
코드 포맷터는 JavaScript, Python, HTML, CSS 등 12개 이상의 프로그래밍 언어의 코드를 적절한 들여쓰기와 간격으로 자동 정리한다. 모든 처리가 브라우저 안에서만 이루어지므로 회원가입이나 서버 업로드 없이 안전하게 무료로 사용할 수 있다.
코드 포맷터
단 한 번의 클릭으로 코드를 포맷하세요. 언어를 선택하고 코드를 붙여넣기하면 제대로 포맷됩니다.
사용 방법:
- 드롭다운에서 프로그래밍 언어를 선택하세요.
- 입력 영역에 포맷되지 않은 코드를 붙여넣기하세요.
- '코드 포맷' 버튼을 클릭하세요.
- 출력 영역에서 포맷된 결과를 복사하세요.
문서화
코드 포매터란 무엇인가?
코드 포매터는 코드의 동작은 바꾸지 않고 일관된 들여쓰기, 줄 바꿈, 간격을 적용해 소스 코드를 다시 작성하는 도구입니다. 이 코드 포매터는 웹 브라우저에서 실행됩니다. JavaScript, Python, HTML, CSS를 포함한 12개의 프로그래밍 언어를 지원합니다.
이 코드 포매터는 어떻게 작동하는가
이 도구는 언어마다 다른 규칙 집합을 사용합니다. JSON을 제외하면 어떤 규칙 집합도 코드의 전체 구문 분석 트리를 만들지 않습니다.
- JSON은 브라우저에 내장된 JSON 파서로 구문 분석한 다음, 두 칸 들여쓰기로 다시 출력합니다. JSON이 유효하지 않으면 도구가 오류를 보고하고 출력을 표시하지 않습니다.
- **JavaScript, TypeScript, Java, C, C++, C#**은 하나의 포매터를 공유합니다. 이 포매터는 코드를 문자 단위로 훑으면서 중괄호, 괄호, 세미콜론을 추적합니다. 모든
{은 새 들여쓰기 블록을 시작하고, 모든}또는;은 줄을 끝냅니다. 주석과 따옴표로 묶인 문자열은 수정하지 않고 그대로 복사합니다. 원래 코드에 없던 연산자 주변이나 쉼표 뒤의 공백은 추가하지 않으며, 줄 바꿈과 들여쓰기만 다시 구성합니다. - Python은 각 줄에 이미 적용된 들여쓰기를 읽고, Python 언어 자체가 사용하는 것과 같은 중첩 규칙에 따라 수준마다 네 칸을 사용해 다시 구성합니다. 긴 줄을 나누거나 빈 줄을 추가하거나 연산자 주변에 공백을 추가하지 않고, 각 줄의 들여쓰기 깊이만 정규화합니다.
- CSS는 불필요한 줄 바꿈과 공백을 제거한 다음, 각
{및;뒤와 각}앞에 줄 바꿈을 추가합니다. - HTML 및 XML은 중첩된 태그의 각 수준마다 줄 바꿈과 두 칸 들여쓰기를 추가하며,
<br>,<img>,<input>과 같은 표준 자체 닫힘 태그를 인식합니다. - SQL은
SELECT,FROM,WHERE,JOIN,ORDER BY와 같은 정해진 키워드를 대문자로 변환하고, 각 주요 절 앞에서 새 줄을 시작합니다.
입력을 실제로 구문 분석하는 경로는 JSON 경로뿐이므로, 다른 포매터는 괄호 누락이나 닫히지 않은 문자열 같은 구문 오류를 감지하지 않습니다. 실행되지 않는 코드라도 입력된 텍스트를 그대로 다시 포맷합니다.
지원되는 언어
| 언어 | 일반적인 파일 확장자 | 들여쓰기 폭 |
|---|---|---|
| JavaScript | .js | 2칸 |
| TypeScript | .ts | 2칸 |
| HTML | .html | 2칸 |
| CSS | .css | 2칸 |
| Python | .py | 4칸 |
| Java | .java | 4칸 |
| C | .c | 4칸 |
| C++ | .cpp | 4칸 |
| C# | .cs | 4칸 |
| SQL | .sql | 절마다 줄 바꿈 |
| JSON | .json | 2칸 |
| XML | .xml | 2칸 |
코드를 포맷하는 방법
- 드롭다운 메뉴에서 프로그래밍 언어를 선택합니다.
- 포맷되지 않은 코드를 입력 상자에 붙여 넣습니다.
- "코드 포맷"을 선택합니다.
- 출력 상자에서 포맷된 결과를 복사합니다.
포맷 작업은 전적으로 브라우저 내부에서 수행됩니다. 코드는 서버로 전송되지 않습니다.
JavaScript 포맷 예시
포맷 전:
1function add(a, b) {
2 if (a > 0) { return a + b; }
3 return 0;
4}
5포맷 후:
1function add(a, b) {
2 if (a > 0) {
3 return a + b;
4 }
5 return 0;
6}
7포매터는 { } 안의 코드를 별도의 들여쓰기된 줄로 옮기고, 수준마다 두 칸을 사용하는 들여쓰기로 정규화했습니다. a > 0 및 a + b 주변의 간격은 이미 입력되어 있었으므로 발견한 그대로 유지했습니다.
Python 포맷 예시
포맷 전:
1def calculate_average(numbers):
2 if len(numbers) == 0:
3 return 0
4 total = sum(numbers)
5 return total / len(numbers)
6포맷 후:
1def calculate_average(numbers):
2 if len(numbers) == 0:
3 return 0
4 total = sum(numbers)
5 return total / len(numbers)
6원래 코드는 들여쓰기 수준마다 두 칸을 사용했습니다. 포매터는 Python의 공식 스타일 가이드인 PEP 8에서 설명하는 스타일에 맞춰 각 줄의 들여쓰기를 수준마다 네 칸으로 다시 구성했습니다. 모든 줄의 순서는 그대로 유지했고 줄 내부의 간격은 변경하지 않았습니다.
코드를 포맷하는 것이 중요한 이유
일관되지 않은 들여쓰기는 함수, 반복문 또는 조건문이 끝나는 위치를 파악하기 어렵게 만듭니다. 여러 사람이 편집한 코드는 탭과 공백을 섞어 들여쓰거나, 블록에 속한 줄이 서로 맞지 않게 되는 경우가 많습니다. 포매터를 실행하면 모든 파일이 같은 시각적 구조를 갖게 되므로 코드를 더 빠르게 훑어보고 잘못 배치된 괄호를 쉽게 찾을 수 있습니다.
한계
- 입력 크기: 이 도구는 최대 50,000자의 코드를 허용합니다. 더 긴 입력은 포맷 작업이 시작되기 전에 오류 메시지와 함께 거부됩니다.
- 대부분의 언어에서는 구문을 검사하지 않음: JSON 입력만 구문 분석하고 유효성을 검사합니다. 나머지 11개 언어의 코드는 괄호가 누락되었거나 문자열이 닫히지 않았더라도 입력된 그대로 다시 포맷합니다. 이 경우 출력의 들여쓰기가 잘못될 수 있지만 오류로 표시되지는 않습니다.
- 연산자 주변의 공백은 변경하지 않음: JavaScript, TypeScript 및 C 계열 포매터는 줄 바꿈과 들여쓰기만 재배치합니다.
+,=,!==주변이나 원래 없었던 쉼표 뒤에 공백을 삽입하지 않습니다. - PHP는 지원되지 않음: 지원되지 않는 언어를 선택하면 코드가 변경되지 않은 채 반환됩니다.
자주 묻는 질문
이 도구는 내 코드의 구문 오류를 검사하나요? JSON에만 적용됩니다. JSON 입력은 구문 분석되므로 유효하지 않은 JSON은 오류 메시지를 생성합니다. 지원되는 다른 언어의 코드는 유효한 구문인지 검사하지 않고 다시 포맷합니다.
내 코드를 서버로 전송하나요? 아니요. 포맷 작업은 JavaScript를 사용해 전적으로 브라우저에서 실행됩니다. 코드는 업로드되거나 어디에도 저장되지 않습니다.
포맷할 수 있는 코드의 최대 용량은 얼마인가요? 50,000자입니다. 그보다 많이 붙여 넣으면 포맷 작업이 시작되기 전에 오류가 발생합니다.
연산자 주변이나 쉼표 뒤에 누락된 공백을 추가하나요? JavaScript, TypeScript, Java, C, C++, C#에서는 추가하지 않습니다. 이 포매터들은 중괄호와 세미콜론 주변의 들여쓰기와 줄 바꿈만 다시 구성하고, 각 줄의 나머지 부분은 작성된 그대로 복사합니다.
어떤 들여쓰기를 사용하나요? JavaScript, TypeScript, HTML, CSS, JSON, XML에는 두 칸을 사용합니다. Python, Java, C, C++, C#에는 네 칸을 사용합니다.
포맷한 뒤에도 내 코드가 거의 똑같아 보이는 이유는 무엇인가요? 입력에 이미 일관된 간격과 한 가지 괄호 스타일이 사용되었다면 포매터는 주로 들여쓰기만 다시 구성하므로 변화가 작을 수 있습니다. 들여쓰기가 섞여 있거나 매우 적은 수의 줄로 축약된 코드에서 가장 유용합니다.