Cách dùng Định dạng JavaScript
- Dán JavaScript (hoặc JSON/JSX) vào Input JavaScript, kéo thả tệp
.js, hoặc nhấn Sample. - Chọn kiểu thụt lề, độ rộng ngắt dòng (tùy chọn) và kiểu dấu ngoặc. Kết quả sẽ cập nhật ngay lập tức.
- Sao chép hoặc tải kết quả về. Dùng chế độ Minify để xóa chú thích và khoảng trắng trong một đoạn script nhỏ.
Công cụ định dạng JavaScript là gì?
Công cụ định dạng JavaScript (hay beautifier) thụt lề lại mã nguồn và tách các câu lệnh, thuộc tính đối tượng và khối lệnh thành từng dòng riêng. Công việc phổ biến nhất của nó là giải nén các gói mã production để bạn đọc khi gỡ lỗi, nhưng nó cũng rất hữu ích để dọn dẹp một đoạn code từ Stack Overflow, bookmarklet hay mã được dán từ đoạn chat. Công cụ này dùng js-beautify, hỗ trợ cú pháp hiện đại: arrow function, class, template literal, async/await, optional chaining, ES module và JSX.
Kiểu dấu ngoặc
| Tùy chọn | Kết quả |
|---|---|
| Cùng dòng (K&R / “1TBS”) | if (ok) { — quy ước phổ biến trong hầu hết hướng dẫn phong cách JavaScript và Prettier. |
| Cùng dòng, giữ inline | Giống trên, nhưng các khối ngắn như { a: 1 } vẫn nằm trên một dòng. |
| Xuống dòng (Allman) | Dấu ngoặc mở nằm riêng một dòng, thường thấy trong các dự án C#. |
| else xuống dòng mới | } và else nằm trên hai dòng riêng (tương tự Stroustrup). |
Làm đẹp khác với giải mã (deobfuscate)
Các công cụ minify như Terser hay esbuild đổi tên biến cục bộ thành một ký tự (function(e,t){…}). Định dạng lại giúp khôi phục bố cục nhưng không thể lấy lại tên gốc hay chú thích, vì những thông tin đó đã bị xóa. Nếu trang web có publish source map (//# sourceMappingURL=), DevTools của trình duyệt có thể hiển thị mã nguồn gốc. Còn mã đã được làm rối có chủ đích (mảng chuỗi, đóng gói bằng eval) vẫn khó đọc dù đã được định dạng.
Về bộ thu gọn
Chế độ Minify là bộ thu gọn khoảng trắng và chú thích an toàn, không phải bộ nén đầy đủ. Nó phân tích mã đúng cách (chuỗi, template literal, regular expression) và xóa chú thích cùng khoảng trắng, nhưng giữ lại ngắt dòng ở những chỗ việc xóa có thể làm thay đổi cơ chế tự động chèn dấu chấm phẩy (ASI), ví dụ sau return hoặc trước ++. Mỗi kết quả đều được kiểm tra hai lần: chuỗi token phải giống hệt đầu vào, và đầu ra phải parse được. Bạn có thể tiết kiệm khoảng 20–40% dung lượng; với gói production, một công cụ build như Terser hay esbuild còn đổi tên biến và loại bỏ code thừa để giảm dung lượng nhiều hơn.
Các lỗi thường gặp
- “Không parse được như JavaScript thuần” — hiện khi gặp TypeScript, JSX hoặc lỗi cú pháp thật. Việc định dạng vẫn hoạt động; còn chức năng minify yêu cầu JavaScript hợp lệ.
- JSON được định dạng tốt ở đây, nhưng JSON Formatter còn kiểm tra tính hợp lệ và chỉ ra chính xác lỗi.
- Muốn so sánh một tệp trước và sau khi thay đổi? Dán cả hai phiên bản vào Diff Checker.
Cũng được tìm dưới tên: js beautifier, làm đẹp code js, format javascript online, unminify js, minify javascript, công cụ format js, jsx formatter.
Các công cụ dùng kèm tốt với Định dạng JavaScript
- Code sang ảnh — Dán một đoạn code và nhận ngay ảnh chụp code đẹp mắt chỉ trong vài giây: tô màu cú pháp cho JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go và PHP, nhiều theme để chọn, khung cửa sổ có tên file, nền gradient hoặc trong suốt, khoảng đệm và số dòng.
- Định dạng HTML — Dán mã HTML đã nén hoặc lộn xộn và nhận lại HTML được thụt lề rõ ràng, nhất quán — bao gồm cả các khối <style> và <script> nhúng bên trong.
- Định dạng CSS — Chuyển stylesheet đã nén thành CSS dễ đọc, mỗi thuộc tính một dòng và các khối @media được lồng đúng cấu trúc.
- Kiểm tra Regex — Nhập mẫu và xem các kết quả khớp được tô sáng ngay trong văn bản thử nghiệm.
Câu hỏi thường gặp
Công cụ này có giải nén được JavaScript từ website không?
.min.js và nó sẽ được trình bày dễ đọc. Tên biến bị bộ minify rút gọn (như e, t, n) không thể khôi phục, và chú thích đã mất vĩnh viễn.