JSX 포매터

먼저 코드를 JSX가 활성화된 JavaScript 모듈로 파싱한 뒤 일관된 스타일로 출력합니다. JSX 요소에는 HTML 포매터와 동일한 규칙을 적용하므로 중첩된 블록 태그가 각각 들여쓰기된 별도 줄에 배치됩니다.

요소에 div, section, p, ul 또는 h1 같은 블록 수준 자식 요소가 있으면 각 자식 요소가 별도의 줄에 배치되고, 요소 전체가 괄호로 묶입니다. 단일 컴포넌트 태그처럼 한 줄에 들어가는 요소는 인라인으로 유지됩니다.

네. <>와 </>로 작성한 프래그먼트 및 <Item key={1}/> 같은 자체 닫는 컴포넌트를 파싱하고 그대로 유지합니다. 속성과 중괄호 안의 표현식도 작성된 그대로 복사됩니다.

파서가 중단되고 도구가 예기치 않은 토큰과 같은 오류 메시지를 표시합니다. 형식이 일부만 지정된 코드는 반환하지 않습니다. 표시된 부분을 수정한 다음 다시 형식을 지정하세요.

블록은 두 칸 들여쓰고, 문장마다 한 줄을 사용하며, 연산자 주위에 공백을 넣고 문장 끝에 세미콜론을 추가합니다. 스타일을 변경하는 옵션은 없습니다.

네. JavaScript의 줄 주석과 블록 주석은 유지됩니다. JSX 표현식 안의 주석도 중괄호 안에 그대로 남습니다.

아니요. 이 도구가 파싱하는 JSX 문법에는 타입 주석이 포함되지 않으므로 타입이 있는 TSX은 구문 오류로 거부됩니다. 타입이 지정된 코드에는 TypeScript 포매터를 사용하세요.

JavaScript는 다시 출력될 뿐이며, JSX 레이아웃은 블록 요소 사이의 공백을 변경합니다. React는 블록 요소가 별도 줄에 있을 때 그 사이의 공백을 무시합니다. 정확한 간격이 중요하다면 태그 옆의 인라인 텍스트를 확인하세요.

JSX는 JavaScript의 확장이므로 결과는 javascript가 표시된 Markdown 코드 블록으로 반환됩니다. .jsx 파일에 사용할 코드는 펜스 사이의 줄을 복사하세요.

한 번 실행할 때 최대 5 MB의 코드를 처리할 수 있으며, 더 큰 입력은 메시지와 함께 거부됩니다. 출력은 Code Formatter의 JSX 옵션과 동일합니다.