Khôi phục định dạng và làm đẹp mã trực tuyến

Khôi phục định dạng cho từng loại mã

Mỗi định dạng có một trang riêng, giải thích những điểm cần lưu ý của ngôn ngữ đó:

• Định dạng JavaScriptJavaScript
• Định dạng CSSCSS
• Định dạng HTMLHTML
• Định dạng XMLXML
• Định dạng JSONJSON

Rút gọn mã là gì?

Lập trình viên viết mã để những lập trình viên khác cũng đọc được. Chú thích, thụt lề, dòng trống giữa các khối và tên biến mô tả đúng nội dung đều phục vụ người đọc, chứ trình duyệt không cần đến chúng. Rút gọn mã là bước trong quy trình dựng ứng dụng loại bỏ những gì máy không cần: khoảng trắng, ngắt dòng, chú thích và thường cả tên biến, tên hàm ban đầu, thay bằng tên chỉ có một chữ cái. Chương trình vẫn hoạt động như cũ, chỉ cách trình bày thay đổi.

Lợi ích rất rõ ràng. Một gói JavaScript sau khi rút gọn thường nhỏ hơn mã nguồn từ 30 đến 70 phần trăm, giúp giảm dữ liệu truyền qua mạng, hiển thị trang lần đầu nhanh hơn và cải thiện Core Web Vitals. Vì vậy, gần như mọi website đang vận hành đều phân phối JS, CSS và HTML đã rút gọn. Đổi lại, tệp bạn tải từ website thường chỉ là một dòng dày đặc, khó đọc. Khi cần hiểu, gỡ lỗi hoặc kiểm tra tệp thực sự làm gì, bạn cần khôi phục định dạng trước.

Công cụ khôi phục định dạng này làm gì?

LFUnminify nhận mã đã rút gọn và sắp xếp lại thành cấu trúc dễ đọc. Công cụ khôi phục thụt lề, đưa các câu lệnh về từng dòng, giãn cách các khối và toán tử, đồng thời áp dụng quy tắc định dạng nhất quán theo ngôn ngữ được nhận diện. Một gói mã bốn nghìn ký tự trên cùng một dòng trở thành vài trăm dòng lồng nhau rõ ràng để bạn cuộn xem, tìm kiếm và phân tích.

Công cụ sử dụng Prettier, trình định dạng quen thuộc với nhiều nhóm phát triển JavaScript, chạy ngay trong trình duyệt của bạn. Kết quả vì thế tuân theo quy ước mà trình soạn thảo thường áp dụng cho tệp nguồn thông thường. Việc nhận diện diễn ra tự động: chỉ cần dán nội dung, công cụ xác định đó là JavaScript, CSS, HTML, XML hay JSON rồi định dạng tương ứng. XML được xử lý bằng trình định dạng phù hợp với cấu trúc của nó.

Có một giới hạn cần nói rõ: khôi phục định dạng không phải dịch ngược chương trình. Chú thích, tên biến gốc và ghi chú của lập trình viên đã bị xóa lúc dựng ứng dụng, nên công cụ không thể tái tạo chúng. Bạn nhận lại mã có cấu trúc rõ ràng, dễ đọc và dễ tìm kiếm, nhưng các tên ngắn do công cụ rút gọn tạo ra vẫn giữ nguyên. Trong thực tế, như vậy thường đủ để theo dõi logic, tìm một hàm hoặc xem một đoạn mã gửi dữ liệu gì và đến đâu.

Các định dạng mã được hỗ trợ

Một trình soạn thảo hỗ trợ năm ngôn ngữ. LFUnminify đọc nội dung bạn dán, nhận diện ngôn ngữ rồi chuyển cho bộ phân tích cú pháp phù hợp. Bạn không cần chọn định dạng trong menu, và ngay cả tệp có phần mở rộng sai vẫn được xử lý theo nội dung:

• JavaScript, bao gồm cú pháp ES6 trở lên, mô-đun, mã bất đồng bộ và JSX. Trường hợp phổ biến là gói mã được tạo bởi webpack, Vite, esbuild hoặc Terser.
• CSS, bao gồm cú pháp hiện đại, thuộc tính tùy chỉnh, truy vấn media và quy tắc lồng nhau. Phù hợp để đọc bảng định kiểu đã biên dịch từ Tailwind, Sass hoặc PostCSS.
• HTML, bao gồm các khối script và style nội tuyến. Những khối này được định dạng cùng mã đánh dấu thay vì bị giữ thành một dòng dài.
• XML, bao gồm sơ đồ website, nguồn cấp RSS, tệp SVG, thông điệp SOAP và tệp cấu hình không có ngắt dòng.
• JSON, bao gồm phản hồi API lồng nhiều cấp, tệp kê khai gói, tệp cấu hình và dữ liệu nhật ký.

Khi nào bạn cần khôi phục định dạng mã?

Khôi phục định dạng thường giúp giải quyết một vấn đề cụ thể, chứ không chỉ để xem cho biết. Đây thường là cách nhanh nhất để hiểu mã do người khác viết, hoặc mã của chính bạn nhưng đã không còn dễ đọc:

• Gỡ lỗi trên môi trường vận hành. Dấu vết ngăn xếp trỏ đến dòng 1, cột 24815 của một gói mã. Định dạng lại tệp tạo ra những dòng rõ ràng để bạn tìm hàm gây lỗi và phân tích vị trí liên quan.
• Kiểm tra mã bên thứ ba. Trước khi thêm thẻ phân tích, tiện ích trò chuyện hay mã tiếp thị liên kết vào website, hãy khôi phục định dạng để đọc xem mã thu thập gì, liên hệ với tên miền nào và ghi gì vào bộ nhớ.
• Đọc bảng định kiểu đã biên dịch. Các framework tiện ích tạo ra tệp CSS một dòng rất lớn. Làm đẹp mã giúp bạn theo dõi cơ chế xếp chồng, tìm quy tắc đang được ưu tiên và hiểu vì sao phần ghi đè không có hiệu lực.
• Kiểm tra phản hồi API. Dữ liệu JSON sao chép từ thẻ Mạng rất khó đọc khi chưa định dạng. Khi thụt lề rõ ràng, cấu trúc, các cấp lồng nhau và trường còn thiếu có thể được nhận ra chỉ sau vài giây.
• Học từ mã thực tế. Đọc cách một thư viện được xây dựng tốt giải quyết vấn đề giúp bạn tiến bộ nhanh. Một tệp đã định dạng cho phép theo dõi cách triển khai đó thoải mái hơn.

Cách sử dụng LFUnminify

Có ba cách đưa mã vào trình soạn thảo: dán trực tiếp vào khung bên trái, nhấn Chọn tệp để mở tệp trên máy, hoặc kéo thả tệp vào vùng nhập. Để kiểm tra tài nguyên của một website, hãy mở mã nguồn hoặc DevTools trong trình duyệt, sao chép nội dung rồi dán vào đây. Bạn cũng có thể lưu tệp .js, .css, .html, .xml hoặc .json rồi mở bằng Chọn tệp.

Quá trình định dạng tự bắt đầu, bạn không cần tìm nút để thực hiện. Công cụ đợi bạn ngừng nhập, nhận diện ngôn ngữ rồi hiển thị kết quả đã làm đẹp trong khung bên phải cùng tính năng tô màu cú pháp. Sau đó, bạn có thể sao chép toàn bộ kết quả vào bộ nhớ tạm bằng một lần nhấn, hoặc tải xuống thành tệp có tên phù hợp để mở trong trình soạn thảo.

Hai mẹo nhỏ hữu ích với tệp dài: bật số dòng khi cần tham chiếu một vị trí chính xác hoặc so sánh hai phiên bản cạnh nhau, lựa chọn này được lưu cho lần truy cập sau. Nếu định dạng được nhận diện khác dự kiến, đó cũng có thể là một gợi ý. Chẳng hạn, tệp bạn tưởng là JSON nhưng được nhận diện là JavaScript có thể thực ra là phản hồi JSONP hoặc cấu hình nằm trong một phép gán.

Mã của bạn luôn ở trên máy bạn

Điều này cần được nói rõ: toàn bộ quá trình định dạng diễn ra cục bộ trong trình duyệt, bằng JavaScript được tải cùng trang. Mã của bạn không được tải lên, không xếp hàng trên máy chủ, không ghi vào cơ sở dữ liệu và không được lưu trong nhật ký. Sau khi trang tải xong, bạn có thể ngắt mạng mà vẫn dùng công cụ bình thường. Đó là cách đơn giản để kiểm chứng không có nội dung nào được gửi đi.

Bạn có thể dùng công cụ để xem mã độc quyền, gói mã nội bộ, dự án khách hàng hoặc tệp cấu hình có cấu trúc không muốn chia sẻ. Nội dung bạn dán hay mở không rời khỏi trình duyệt. Công cụ cũng không lấy tệp từ website thay bạn, nên máy chủ của chúng tôi không biết bạn đang xem mã nào hay website nào. Bạn không cần tạo tài khoản, và nội dung dán vào không bị theo dõi.

Vì sao LFUnminify miễn phí?

LFUnminify thuộc hệ sinh thái công cụ miễn phí do Ludovic Frank xây dựng, bên cạnh công cụ tạo mật khẩu, tạo favicon, phối bảng màu và nhiều tiện ích khác. Lý do rất đơn giản: những công cụ nhỏ mà lập trình viên cần dùng nhiều lần mỗi tuần nên dễ tiếp cận, không bị chặn bởi biểu mẫu đăng ký, quảng cáo hay hạn mức tín dụng. Sản phẩm này không yêu cầu tài khoản, không có hạn ngạch và không mời nâng cấp trả phí bên trong.

Đây cũng là một minh chứng thực tế cho cách chúng tôi làm việc. Mỗi công cụ là một ứng dụng hoàn chỉnh, được xây dựng và bảo trì theo tiêu chuẩn dành cho dự án khách hàng. Điều đó thể hiện năng lực rõ hơn một trang hồ sơ giới thiệu. Nếu bạn cần phát triển website theo yêu cầu, một ứng dụng được đầu tư bài bản hoặc tư vấn kỹ thuật, hãy truy cập liên kết ở chân trang để liên hệ.

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