Cách làm đẹp JavaScript hoạt động
Trình làm đẹp đọc code của bạn từng ký tự một, theo dõi mức độ lồng nhau của mỗi câu lệnh và phát lại với khoảng cách nhất quán. Nó không bao giờ thay đổi những gì code thực hiện — chỉ thay đổi cách nó trông.
- Phân tách token. Thư viện quét đầu vào của bạn thành một luồng token: từ khóa, định danh, chuỗi, toán tử và dấu câu. Chuỗi, template literal và regular-expression literal được nhận dạng là các đơn vị đơn, vì vậy một dấu ngoặc nhọn bên trong chuỗi không bao giờ bị nhầm với dấu phân cách khối.
- Theo dõi lồng nhau. Khi đi qua luồng token, trình làm đẹp duy trì mức thụt lề hiện tại. Mỗi dấu ngoặc nhọn, ngoặc vuông hoặc ngoặc tròn mở ra làm sâu thêm mức; mỗi cái đóng lại đưa nó về. Độ sâu đó quyết định bao nhiêu đơn vị thụt lề đứng trước mỗi dòng bạn nhận lại.
- Áp dụng tùy chọn của bạn. Lựa chọn thụt lề của bạn (2 dấu cách, 4 dấu cách hoặc tab) đặt độ rộng của một mức. Cài đặt brace-style quyết định liệu dấu ngoặc nhọn mở có bám vào câu lệnh trước nó hay rơi xuống dòng riêng. Giới hạn dòng trống thu gọn các chuỗi dài dòng trống xuống giới hạn bạn chọn.
- Phát lại. Cuối cùng trình định dạng in các token trở lại với thụt lề và xuống dòng đã tính toán, tùy chọn thêm dấu chấm phẩy mà automatic semicolon insertion sẽ cung cấp lúc runtime. Kết quả là cùng một chương trình, được trình bày để con người có thể đọc được.
Tại sao làm đẹp JavaScript
- Đọc code đã rút gọn. Các bundle production được gửi đi trên một dòng với các tên biến một chữ cái. Làm đẹp khôi phục các xuống dòng và thụt lề để bạn thực sự có thể truy vết một lỗi về câu lệnh gây ra nó, ngay cả khi không có source map.
- Dọn dẹp các file không nhất quán. Code do nhiều người chỉnh sửa bị lẫn lộn thụt lề và kiểu dấu ngoặc. Một lần qua trình làm đẹp chuẩn hóa toàn bộ file về một bố cục duy nhất, khiến diff tiếp theo hiển thị các thay đổi logic thực sự thay vì nhiễu khoảng trắng.
- Công cụ này không làm chậm trang của bạn. Hầu hết các trình định dạng trực tuyến tải toàn bộ thư viện ngay khi bạn mở trang. Công cụ này lazy-load js-beautify chỉ khi bạn nhấp Làm đẹp hoặc bật Chế độ trực tiếp, vì vậy mở trang chỉ tốn vài kilobyte thay vì vài trăm, và render ban đầu vẫn nhanh.
- Không có gì rời khỏi trình duyệt của bạn. Trình làm đẹp chạy hoàn toàn trên thiết bị của bạn. Code của bạn không bao giờ được tải lên server, điều này quan trọng khi script bạn đang kiểm tra thuộc về khách hàng, chứa các đường dẫn API nội bộ hoặc thuộc phạm vi thỏa thuận bảo mật.
Ứng dụng phổ biến
Làm đẹp JavaScript xuất hiện bất cứ khi nào ai đó cần đọc code không được viết để đọc.
- Gỡ lỗi production: dán một bundle đã rút gọn lấy từ tab Network để tìm hàm đằng sau một stack lỗi mà bạn không thể giải mã theo cách khác.
- Chuẩn bị code review: định dạng lại file của contributor có thụt lề không nhất quán trước khi mở pull request để người đánh giá thấy logic, không phải sự lộn xộn bố cục.
- Kiểm tra bảo mật và tuân thủ: mở rộng snippet phân tích hoặc quảng cáo bên thứ ba để xác nhận chính xác những gì nó làm trước khi nó được phát hành.
Một ví dụ thực tế
Lấy một dòng đã rút gọn: function f(a){if(a){return a*2}else{return 0}}. Dán vào trên với thụt lề đặt là 2 dấu cách và brace style Thu gọn, sau đó nhấp Làm đẹp. Bạn nhận lại một khối dễ đọc: function f(a) {, rồi if (a) { được thụt lề, câu lệnh return a * 2; lồng sâu hơn một mức, và các dấu ngoặc đóng tương ứng thẳng hàng bên dưới. Chuyển brace style thành Mở rộng và mỗi dấu ngoặc nhọn mở rơi xuống dòng riêng. Thay đổi thụt lề thành Tab và mỗi mức chuyển từ hai dấu cách sang ký tự tab. Cấu trúc là giống hệt nhau; chỉ bố cục thay đổi.
FAQ
Công cụ này chạy trong trình duyệt của tôi không?
Có. Thư viện js-beautify được lazy-load lần đầu tiên bạn nhấp Làm đẹp hoặc bật Chế độ trực tiếp, sau đó được cache. Code của bạn không bao giờ rời khỏi trang — không có round-trip đến server và không có upload.
Làm đẹp có giống với bỏ rút gọn không?
Nó khôi phục định dạng dễ đọc — thụt lề, xuống dòng và khoảng cách — nhưng không thể lấy lại tên biến gốc hoặc chú thích mà quá trình rút gọn đã loại bỏ. Nếu source map tồn tại, DevTools của trình duyệt có thể khôi phục tên gốc; trình làm đẹp một mình chỉ hoạt động với những gì có trong file.
Làm đẹp có thay đổi cách code của tôi hoạt động không?
Không. Làm đẹp chỉ thêm và xóa khoảng trắng và xuống dòng; chương trình chạy giống hệt. Tùy chọn duy nhất chạm vào token là "Thêm dấu chấm phẩy còn thiếu", cái này chèn các dấu kết thúc câu lệnh mà automatic semicolon insertion sẽ thêm lúc runtime dù sao, làm cho code an toàn để rút gọn sau.
Các tùy chọn brace-style có nghĩa là gì?
Thu gọn giữ dấu ngoặc nhọn mở trên cùng dòng với câu lệnh (if (x) {), là quy ước JavaScript phổ biến. Mở rộng thả mỗi dấu ngoặc nhọn mở xuống dòng riêng (kiểu Allman). Mở rộng cuối giữ dấu ngoặc mở gắn kèm nhưng đặt else và catch trên dòng mới sau dấu ngoặc đóng.
Làm đẹp JavaScript phía trình duyệt cho bạn code dễ đọc mà không cần bước build hay upload. Dán script đã rút gọn hoặc lộn xộn, chọn thụt lề và kiểu dấu ngoặc của bạn, rồi sao chép hoặc tải về kết quả. Không có gì rời khỏi thiết bị của bạn, không có tài khoản và thư viện chỉ tải khi bạn yêu cầu — vì vậy mở trang này chỉ tốn vài kilobyte, không phải một megabyte.