Khôi phục định dạng JavaScript trực tuyến
Dán tệp .js đã rút gọn, gói webpack hoặc đoạn mã một dòng để nhận lại JavaScript có thụt lề rõ ràng ở khung bên phải. Prettier xử lý ngay trong trình duyệt, không tải nội dung lên bất kỳ đâu.
Vì sao JavaScript trở nên khó đọc
Các quy trình dựng ứng dụng hiện đại thường rút gọn JavaScript trước khi phân phối. Terser, esbuild, SWC và những công cụ tương tự loại bỏ khoảng trắng và chú thích, đổi tên biến cùng hàm cục bộ thành chữ cái ngắn, gộp các khối lồng nhau thành biểu thức nối tiếp và gom ứng dụng vào một hoặc hai tệp. Một ứng dụng React ban đầu có ba trăm tệp nguồn dễ đọc có thể đến trình duyệt dưới dạng một dòng dài hàng trăm kilobyte. Mã vẫn chạy bình thường, nhưng khi cần đọc, bạn chỉ thấy một khối văn bản dày đặc, thiếu cấu trúc để theo dõi.
Định dạng giúp bạn đọc lại những gì
Làm đẹp gói mã khôi phục những yếu tố giúp bạn tìm đường trong mã. Các câu lệnh trở về từng dòng riêng, thay vì chen chung ở dòng 1, nên bạn có thể tìm và phân tích hàm được nhắc tới trong dấu vết ngăn xếp. Các cấp lồng nhau hiện rõ, cho biết hàm bắt đầu và kết thúc ở đâu, điều kiện bảo vệ nhánh nào và chuỗi hàm gọi lại được ghép ra sao. Chuỗi văn bản, URL và tên điểm cuối cũng dễ rà soát hơn, đặc biệt hữu ích khi bạn kiểm tra mã bên thứ ba thay vì gỡ lỗi mã của mình. Lưu ý rằng số dòng trong kết quả đã định dạng sẽ khác tệp rút gọn ban đầu.
Hỗ trợ cú pháp JavaScript hiện đại
Trình định dạng phân tích JavaScript hiện đại, không chỉ một tập con cú pháp cũ. Hàm mũi tên, lớp, async và await, generator, truy cập thuộc tính tùy chọn, toán tử hợp nhất giá trị null, chuỗi mẫu, phép phân rã, cú pháp trải, import động và mô-đun ES đều được định dạng đúng. JSX cũng được hỗ trợ, hữu ích khi xem thành phần React mà JSX chưa được chuyển đổi thành lời gọi hàm. Nhờ Prettier, kết quả tuân theo những quy ước quen thuộc mà trình soạn thảo thường áp dụng cho mã của bạn.
Những giới hạn cần biết
Khôi phục định dạng không khôi phục được mọi thông tin đã mất. Công cụ rút gọn đã xóa chú thích và đổi tên biến, nên không trình định dạng nào biết biến n trước đây có tên remainingRetries. Nếu dự án có công bố source map, hãy mở nó trong DevTools của trình duyệt để truy ngược về mã nguồn gốc. Với tệp cố tình bị làm rối, bạn có thể nhận được cấu trúc dễ đọc hơn, nhưng ý đồ của mã vẫn có thể bị che giấu.
Câu hỏi thường gặp
Có định dạng được gói webpack hoặc Vite không?
Có. Dán gói mã hoặc mở tệp bằng Chọn tệp, công cụ sẽ định dạng như mọi tệp JavaScript khác. Gói lớn có thể mất vài giây vì quá trình xử lý chạy trên máy bạn. Sau khi thụt lề, cấu trúc mô-đun còn trong gói mã sẽ dễ theo dõi hơn.
Công cụ có giải mã JavaScript bị làm rối không?
Công cụ định dạng mã bị làm rối để bạn đọc dễ hơn, nhưng không đảo ngược quá trình làm rối. Các chuỗi đã mã hóa, luồng điều khiển nhân tạo và mã không được thực thi do người tạo cố tình chèn vào vẫn giữ nguyên.
Định dạng có làm hỏng mã không?
Trình định dạng hướng tới việc giữ nguyên hành vi JavaScript trong khi áp dụng phong cách nhất quán. Dấu câu, dấu nháy và bố cục có thể thay đổi, nên kết quả không giống từng byte với bản gốc. Hãy giữ bản gốc, kiểm tra kết quả và chạy bộ kiểm thử của dự án trước khi đưa gói mã đã chỉnh sửa hoặc định dạng lên môi trường vận hành.