Công cụ định dạng HTML

Định dạng HTML là gì?

Công cụ định dạng HTML viết lại HTML với thụt lề gọn gàng, nhất quán bằng Prettier, công cụ định dạng được hầu hết dự án front-end sử dụng. Các khối <style> và <script> nội tuyến cũng được định dạng như CSS và JavaScript.

Cách sử dụng Định dạng HTML

1. Dán HTML vào ô nhập hoặc bấm Tải ví dụ.
2. Chọn Thụt lề.
3. Bấm Định dạng (kết quả cũng cập nhật khi bạn gõ).
4. Sao chép hoặc tải xuống kết quả.

Ví dụ

<div><p>Hi<b>x</b></p><img src=a.png alt=""></div>

<div>
  <p>Hi<b>x</b></p>
  <img src="a.png" alt="" />
</div>

Khi nào nên dùng Định dạng HTML

Dùng để làm gọn HTML xuất từ CMS, mẫu email hoặc markup sinh tự động trước khi chỉnh sửa hay review. Đây là công cụ định dạng, không phải công cụ kiểm tra: với thẻ chưa đóng hoặc id trùng, hãy dùng Trình kiểm tra HTML. Tài liệu rất lớn có thể mất một lúc vì Prettier chạy trong trình duyệt của bạn.

Định dạng HTML hoạt động như thế nào

Mã được định dạng bằng Prettier 3 (bản standalone) cùng các plugin HTML, CSS và Babel, được tải khi cần. Prettier phân tích markup thành cây rồi in ra sao cho mỗi dòng vừa 80 cột, đặt giá trị thuộc tính trong dấu nháy và thêm /> cho phần tử rỗng. Các phần tử nội tuyến nhạy cảm với khoảng trắng được giữ liền nhau để trang hiển thị không thay đổi. Lỗi cú pháp được báo với dòng và cột của Prettier.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Làm cho HTML đã rút gọn hoặc viết trên một dòng dễ đọc hơn
• ✓ Chuẩn hóa template trước khi review code
• ✓ Định dạng đoạn HTML cho tài liệu
• ✓ Làm sạch markup sao chép từ trình soạn thảo WYSIWYG

Câu Hỏi Thường Gặp

Bước tiếp theo nên làm

Khám phá thêm danh mục