JSX Formatter

Giới thiệu về JSX Formatter

Định dạng và làm đẹp mã React JSX và TSX của bạn bằng công cụ trực tuyến miễn phí này.

Định dạng đồng thời biểu thức JavaScript và phần tử JSX giống XML để mã component kiểu React dễ đọc.

Tính năng chính

• Mục đích định dạng Định dạng đồng thời biểu thức JavaScript và phần tử JSX giống XML để mã component kiểu React dễ đọc.
• Mã nguồn hỗ trợ Dán JSX chứa component, prop, fragment, biểu thức, spread attribute và JavaScript nhúng.
• Tùy chọn trình bày Chọn thụt lề và quy tắc xuống dòng được parser hiểu JSX hỗ trợ.
• Kết quả định dạng Kết quả cân bằng cấu trúc tag lồng và bố cục JavaScript, đồng thời giữ tên component và prop.

Cách sử dụng JSX Formatter

Thực hiện quy trình sau để xử lý mã nguồn JSX an toàn và chính xác.

1. Dán mã nguồn JSX Dán JSX chứa component, prop, fragment, biểu thức, spread attribute và JavaScript nhúng.
2. Chọn quy tắc định dạng Chọn thụt lề và quy tắc xuống dòng được parser hiểu JSX hỗ trợ.
3. Định dạng mã nguồn Chạy formatter sau khi mã nguồn JSX được parser đọc thành công. Công cụ áp dụng quy tắc trình bày mà không chủ ý đổi cấu trúc đã phân tích.
4. Kiểm tra và sao chép Kết quả cân bằng cấu trúc tag lồng và bố cục JavaScript, đồng thời giữ tên component và prop.

Lưu ý khi sử dụng

• Dùng formatter TypeScript cho TSX khi có chú thích kiểu.
• Rà soát khoảng trắng giữa các text node JSX nội tuyến vì có thể ảnh hưởng kết quả render.
• Chạy linter và kiểm thử component của dự án sau khi định dạng diện rộng.

Câu hỏi thường gặp