Định dạng code từng bước: JavaScript, CSS, HTML và JSON
Công cụ định dạng code miễn phí trên trang này thụt lề lại JavaScript, CSS và HTML, và in JSON dễ đọc, tất cả ngay trong trình duyệt. Hướng dẫn này giải thích những gì mong đợi với mỗi loại input, việc cần làm khi kết quả trông sai, và khi nào nên dùng công cụ khác.
Last reviewed: 2026-07-02
freetoolonline.com Editorial TeamĐịnh dạng JavaScript
Dán một đoạn JavaScript - một dòng đã thu nhỏ, một hàm vừa sao chép, hoặc cả một file - rồi nhấn Format. Công cụ tải một bản sao từ lưu trữ của thư viện mã nguồn mở js-beautify và gọi bộ định dạng JavaScript của nó, thụt lề lại các dấu ngoặc nhọn và ngoặc đơn lồng nhau và đặt mỗi câu lệnh trên dòng riêng. Dán function add(a,b){return a+b;} trả về cùng hàm đó nhưng trải dài trên nhiều dòng với phần thân được thu vào trong ngoặc nhọn. Bộ định dạng chỉ đổi khoảng trắng - không đổi tên biến, không sắp xếp lại câu lệnh, và không đổi cách code hoạt động.
Định dạng CSS
Định dạng CSS trong Code Formatter Beautifier: dán stylesheet để nhận khối selector { property: value; }, rồi Format để thụt lề quy tắc lồng nhau mà không coi văn bản là JavaScript.
Định dạng HTML
Input bắt đầu bằng < được xử lý như HTML. Một đoạn trên một dòng như <div><p>hi</p></div> trả về với mỗi thẻ trên dòng riêng và các phần tử con thụt sau một cấp so với phần tử cha. Điều này hữu ích cho HTML sao chép bằng lệnh "Copy outerHTML" của trình duyệt, thường đến ở dạng một dòng khó đọc. Bộ định dạng HTML phụ thuộc vào bộ định dạng JavaScript và CSS của cùng dòng máy tải trước (cho bất kỳ khối <script> hoặc <style> nào trong markup), mà công cụ tự tải trước khi chạy.
Định dạng JSON
JSON được kiểm tra trước tất cả những điều trên: nếu input bắt đầu bằng {, [, một dấu ngoặc kép, một chữ số, hoặc một trong true, false, null, công cụ phân tích và in lại bằng JSON.stringify(value, null, 2) - hai khoảng trắng, mỗi thuộc tính một dòng. Đây là một phân tích thực sự, không phải đoán dựa trên văn bản, nên một dữ liệu không hợp lệ sẽ bị phát hiện: dán {"a":1, (một dấu phẩy cuối không có gì theo sau) trả về một thông báo bắt đầu bằng Invalid JSON: thay vì một kết quả đã định dạng. Sửa lỗi được báo cáo rồi dán lại.
Khi kết quả trông sai
Hai điều có thể xảy ra sai. Thứ nhất, việc đoán ngôn ngữ có thể sai - đây là một phương pháp dựa trên hình dạng văn bản, không phải một bộ phân tích đầy đủ cho mọi ngôn ngữ, nên một ngôn ngữ công cụ không được xây dựng cho (Python, Java, Go, và tương tự) vẫn bị đẩy qua bộ định dạng JavaScript, và kết quả có thể không trông đúng. Thứ hai, đối với JSON, một lỗi phân tích có nghĩa công cụ không thể định dạng gì cho đến khi JSON hợp lệ - dán lại sau khi sửa lỗi mà thông báo báo cáo. Cả hai trường hợp không làm hỏng input của bạn: khung bên trái giữ nguyên điều bạn đã dán, nên bạn luôn có thể thử lại.
Định dạng code vs JSON Parser
Cả hai công cụ đều có thể in JSON dễ đọc, nên biết khi nào dùng công cụ nào là hữu ích. Bộ định dạng code là lựa chọn đúng cho JavaScript, CSS, hoặc HTML, và cũng in JSON dễ đọc như một hiệu ứng phụ. JSON Parser là lựa chọn đúng khi bạn cần xác thực một dữ liệu với phát hiện lỗi, xem kết quả như một cây có thể mở rộng, hoặc kiểm tra loại và chỉ số mảng của một trường cụ thể - nó được xây dựng chỉ cho JSON và hiển thị nhiều hơn về cấu trúc so với một bản in thụt lề đơn giản.
Tham khảo nhanh
Tham khảo nhanh Code Formatter Beautifier: chọn hoặc tự nhận JavaScript, CSS, HTML hoặc JSON, dán, chạy Format, sao chép output thụt lề - mỗi định dạng ở lại trong tab trình duyệt.
| Input bắt đầu bằng | Nhận diện là | Bộ máy dùng |
|---|---|---|
{, [, một dấu ngoặc kép, một chữ số, hoặc true/false/null | JSON | JSON.stringify(value, null, 2) |
< | HTML | html_beautify (js-beautify) |
Khối quy tắc, ví dụ selector { thuoc-tinh: gia-tri; } | CSS | css_beautify (js-beautify) |
| Mọi trường hợp còn lại | JavaScript | js_beautify (js-beautify) |
Quyền riêng tư
Quyền riêng tư của Code Formatter Beautifier nghĩa là định dạng chỉ chạy trong tab: code dán không upload, không gửi analytics, không ghi máy chủ.
Hướng dẫn liên quan
- JSON parser: kiểm tra vs định dạng vs xem cây - hướng dẫn quyết định tương tự cho công cụ chỉ dành cho JSON.
- Thu nhỏ CSS vs nén CSS - việc ngược lại: thu nhỏ một stylesheet thay vì định dạng nó.
- Công cụ định dạng code - chính công cụ này.
- Trung tâm công cụ cho nhà phát triển - toàn bộ bộ công cụ, tất cả chạy trong trình duyệt mà không cần tải lên.
Câu hỏi thường gặp
Bộ định dạng có đổi những gì code của tôi làm không?
Không. Nó chỉ đổi khoảng trắng và cách thụt lề. Logic, giá trị và cấu trúc của JavaScript, CSS, hoặc HTML bạn đã dán vẫn giữ nguyên.
Vì sao CSS của tôi lại bị định dạng như JavaScript?
Việc nhận diện ngôn ngữ là một phương pháp dựa trên hình dạng văn bản, không phải một bộ phân tích đầy đủ. Nếu đoạn CSS của bạn có một token mà bộ nhận diện liên kết với JavaScript, nó có thể bị xếp vào JavaScript. Dán quy tắc CSS riêng để giữ việc nhận diện đáng tin cậy.
Tôi có thể định dạng Python, Java, hoặc ngôn ngữ khác không?
Không đáng tin cậy. Công cụ nhận ra JavaScript, CSS, HTML và JSON. Bất kỳ ngôn ngữ khác vẫn bị đẩy qua bộ định dạng JavaScript và kết quả có thể không trông đúng - kiểm tra kết quả trước khi tin dùng nó.
Code của tôi có bị gửi đi đâu không?
Không. Việc định dạng chạy hoàn toàn trong tab trình duyệt này; không có gì bạn dán được gửi đến server hoặc dịch vụ phân tích.