Trình định dạng và rút gọn mã

Trình định dạng và rút gọn mã là gì?

Một trình định dạng và rút gọn mã trực tuyến miễn phí giúp làm đẹp hoặc rút gọn HTML, CSS và JavaScript mà không bao giờ rời khỏi trình duyệt của bạn. Chọn ngôn ngữ, sau đó chọn Làm đẹp để thụt lề lại mã nguồn lộn xộn hoặc viết trên một dòng với thụt lề 2 dấu cách, 4 dấu cách hoặc tab, hoặc chọn Rút gọn để nén lại. Việc làm đẹp được hỗ trợ bởi js-beautify; việc rút gọn JavaScript dùng Terser để rút ngắn tên và giảm kích thước, còn CSS và HTML được nén bằng cách loại bỏ chú thích và thu gọn khoảng trắng thừa. Các nhà phát triển web dùng nó để làm cho mã của bên thứ ba đã rút gọn trở nên dễ đọc, thu nhỏ biểu định kiểu và tập lệnh trước khi triển khai, cũng như dọn dẹp các đoạn mã được dán từ kết quả build.

Cách sử dụng Trình định dạng và rút gọn mã

1. Chọn ngôn ngữ của nguồn: HTML, CSS hoặc JS.
2. Chọn hành động: Làm đẹp để định dạng, hoặc Rút gọn để nén.
3. Với Làm đẹp, chọn thụt lề: 2 dấu cách, 4 dấu cách hoặc Tab.
4. Dán hoặc nhập mã của bạn vào ô Nhập - kết quả tự động cập nhật.
5. Dùng nút Sao chép để lấy kết quả, hoặc nhấp Xóa để làm trống ô nhập và bắt đầu lại.

Ví dụ

a{color:red;font-weight:bold}

a {
  color: red;
  font-weight: bold
}

function add(first, second) {
  return first + second;
}

function add(n,d){return n+d}

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<ul><li>One</li><li>Two</li></ul>

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

Mã của tôi có được tải lên máy chủ không?

Không. Việc làm đẹp và rút gọn đều diễn ra cục bộ trong trình duyệt của bạn - js-beautify và Terser được tải dưới dạng tập lệnh và chạy trên thiết bị của bạn. Mã của bạn không bao giờ rời khỏi máy của bạn, và công cụ vẫn hoạt động khi ngoại tuyến.

Những ngôn ngữ và hành động nào được hỗ trợ?

Ba ngôn ngữ - HTML, CSS và JavaScript - mỗi ngôn ngữ có hai hành động: Làm đẹp (định dạng với thụt lề bạn chọn) và Rút gọn (nén). JavaScript được rút gọn bằng Terser, còn CSS và HTML được nén bằng cách loại bỏ chú thích và thu gọn khoảng trắng.

Tôi có thể chọn thụt lề nào?

Khi làm đẹp, bạn có thể thụt lề lại bằng 2 dấu cách, 4 dấu cách hoặc một ký tự Tab. Thụt lề chỉ áp dụng cho Làm đẹp; Rút gọn loại bỏ khoảng trắng và bỏ qua thiết lập này.

Tại sao việc rút gọn JavaScript của tôi lại hiển thị lỗi?

Terser phân tích cú pháp JavaScript của bạn trước khi rút gọn, nên một lỗi cú pháp sẽ dừng nó lại và thông báo được hiển thị phía trên kết quả. Hãy sửa vị trí được báo - thường là một dấu ngoặc, chuỗi chưa đóng, hoặc một token lạc - và kết quả sẽ tự động được dựng lại.

Kết quả có tự cập nhật không?

Có. Kết quả được dựng lại mỗi khi bạn thay đổi đầu vào, ngôn ngữ, hành động hoặc thụt lề, nên bạn không bao giờ phải nhấn nút để định dạng - chỉ cần sao chép kết quả khi nó trông ổn.