Trình Định Dạng JavaScript - Làm Đẹp JS Online

Làm đẹp JavaScript ngay trên trình duyệt

Trình Định Dạng JavaScript biến mã JS đã nén, bị làm rối hay có phong cách thiếu nhất quán thành mã gọn gàng, thụt lề đúng chuẩn mà bạn thực sự đọc được. Dán một đoạn ở bên trái, kết quả đã làm đẹp hiện ra ở bên phải ngay khi bạn ngừng gõ — không cần bấm nút, không có gì gửi lên máy chủ.

Dựng trên Prettier với bộ phân tích Babel — chính bộ định dạng có quan điểm được dùng trong hàng triệu dự án — nên kết quả khớp với phong cách mà các nhóm vốn tin dùng trong trình soạn thảo.

Khi nào nên dùng

Bung một bundle

Trải một script dồn một dòng hoặc đã nén trở lại thành mã dễ đọc, có ngắt dòng để bạn xem và gỡ lỗi.

Chuẩn hóa phong cách

Áp dấu nháy, dấu chấm phẩy và dấu phẩy cuối nhất quán cho các đoạn dán từ nhiều nguồn khác nhau.

Xem lại mã đã dán

Làm cho ví dụ trong hướng dẫn, câu trả lời trên Stack Overflow hay đoạn do AI sinh trở nên dễ đọc trước khi nghiên cứu hay commit.

Cách định dạng mã JavaScript

Thêm mã của bạn

Gõ hoặc dán JavaScript vào ô Đầu vào. Bạn cũng có thể Tải lên một file .js (đọc cục bộ, không gửi đi đâu) hoặc bấm Code mẫu để nạp một ví dụ.

Xem nó tự định dạng

Kết quả đã làm đẹp và tô sáng cú pháp hiện ra tự động sau một nhịp ngừng gõ. Nhấn Ctrl + Shift + F để định dạng lại theo yêu cầu.

Tinh chỉnh tùy chọn

Chọn thụt lề (2, 3, 4, 8 dấu cách hoặc Tab), đặt độ rộng dòng và bật/tắt dấu chấm phẩy, dấu nháy, dấu phẩy cuối. Kết quả được định dạng lại ngay lập tức.

Sao chép hoặc tải về

Bấm Sao chép để đưa kết quả vào bộ nhớ tạm, hoặc Tải về để lưu một file .js. Dùng nút Chỉnh sửa để tinh chỉnh kết quả bằng tay trước.

Riêng tư theo thiết kế. Việc định dạng chạy hoàn toàn trong trình duyệt qua Prettier — không có gì được tải lên, nên an toàn cho mã nội bộ hoặc chưa phát hành.

Tùy chọn & tính năng định dạng

Điều khiển phong cách JavaScript

Prettier vốn có quan điểm riêng theo thiết kế, nhưng các điều khiển này cho phép bạn khớp với style guide của dự án. Mỗi thay đổi đều định dạng lại kết quả tức thì.

Tùy chọn	Lựa chọn	Kiểm soát điều gì
Thụt lề	2 · 3 · 4 · 8 dấu cách · Tab	Độ rộng thụt lề và ký tự dùng cho mỗi cấp lồng nhau (mặc định 4 dấu cách).
Độ rộng dòng	80 · 100 · 120	Độ dài dòng Prettier hướng tới trước khi ngắt các câu lệnh dài (mặc định 80).
Dấu chấm phẩy	Có · Không	Câu lệnh có kết thúc bằng dấu chấm phẩy hay không (mặc định Có).
Dấu nháy	Kép · Đơn	Kiểu dấu nháy dùng cho chuỗi văn bản (mặc định Kép).
Dấu phẩy cuối	Tất cả · ES5 · Không	Dấu phẩy sau phần tử cuối trong mảng, đối tượng và danh sách tham số nhiều dòng (mặc định Tất cả).

Công cụ tích hợp

Tự định dạng khi nhập

Kết quả làm mới ngay sau khi bạn ngừng gõ, kèm tô sáng cú pháp Prism và số dòng ở cả hai ô.

Tải lên & tải về

Nạp một file .js trên máy hoặc xuất kết quả đã định dạng thành formatted.js chỉ bằng một cú bấm.

Kết quả chỉnh sửa được

Chuyển ô kết quả sang chế độ chỉnh sửa CodeMirror để tinh chỉnh bằng tay trước khi sao chép hoặc tải về.

Phát hiện lỗi cú pháp

Nếu mã của bạn không thể phân tích được, trình định dạng sẽ hiện thông báo lỗi rõ ràng thay vì tạo ra kết quả sai — nên bạn biết chính xác cần sửa gì. Thanh trạng thái báo Sẵn sàng, Đã định dạng hoặc Lỗi cùng với số dòng và dung lượng file.

Mới dùng? Bấm Code mẫu để nạp một đoạn cố tình lộn xộn và xem nó được làm đẹp tức thì.

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

Mã JavaScript của tôi có bị gửi lên máy chủ không?

Không. Mọi thao tác định dạng diễn ra cục bộ trong trình duyệt. File tải lên được đọc bằng FileReader của trình duyệt và không bao giờ rời khỏi thiết bị của bạn, nên công cụ an toàn cho mã nội bộ và bảo mật.

Định dạng và nén (minify) khác nhau thế nào?

Định dạng (làm đẹp) thêm thụt lề, ngắt dòng và giãn cách nhất quán để mã dễ đọc. Nén thì làm ngược lại — nó bỏ khoảng trắng để thu nhỏ dung lượng file. Công cụ này làm đẹp; hãy dùng một trình nén khi bạn muốn thu gọn mã cho production.

Có hỗ trợ cú pháp ES6+ và JSX hiện đại không?

Có. Bộ phân tích Babel xử lý JavaScript hiện đại — hàm mũi tên, async/await, gán rã, template literal, optional chaining và JSX — nên mã hiện đại được định dạng chính xác.

Tôi có tùy chỉnh được thụt lề và phong cách không?

Có. Chọn 2, 3, 4 hoặc 8 dấu cách (hoặc Tab) cho thụt lề và đặt độ rộng dòng, rồi bật/tắt dấu chấm phẩy, kiểu dấu nháy và dấu phẩy cuối từ thanh công cụ. Kết quả được định dạng lại ngay khi bạn đổi bất kỳ tùy chọn nào.

Định dạng có làm đổi cách mã chạy không?

Không. Prettier chỉ viết lại khoảng trắng và phong cách bề mặt — thụt lề, dấu nháy, dấu chấm phẩy và ngắt dòng. Hành vi của mã JavaScript vẫn giữ nguyên y hệt.

Nếu mã của tôi có lỗi cú pháp thì sao?

Prettier không thể định dạng mã mà nó không phân tích được, nên công cụ sẽ hiện thông báo lỗi mô tả vấn đề thay vì đoán mò. Sửa lỗi được báo và kết quả đã định dạng sẽ xuất hiện ngay khi mã hợp lệ.

Có giới hạn dung lượng mã có thể định dạng không?

Không có giới hạn cố định. Vì việc định dạng chạy trong trình duyệt, tốc độ phụ thuộc vào thiết bị của bạn — file lớn vẫn được định dạng trong tích tắc trên máy hiện đại, và thanh trạng thái hiển thị số dòng cùng dung lượng file.