11 ngôn ngữ: JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, SQL, YAML, Markdown, GraphQL 13 phương ngữ SQL, tùy chọn viết hoa từ khóa Nén JS (Terser), CSS, HTML, JSON và SQL, hiển thị dung lượng giảm Tùy chỉnh thụt lề hoặc tab, độ rộng dòng, dấu nháy và dấu chấm phẩy Sao chép hoặc tải kết quả, báo lỗi cú pháp rõ ràng

Định dạng & nén code online - JS, TS, CSS, HTML, SQL

Vì sao cần định dạng và nén code?

Định dạng là viết lại code với thụt lề, xuống dòng và khoảng trắng nhất quán để dễ đọc, dễ review và so sánh, rất hữu ích với đoạn code đã bị nén, câu SQL sinh tự động hay file cấu hình sao chép từ nơi khác. Nén thì ngược lại: bỏ khoảng trắng và chú thích (với JavaScript còn rút gọn tên biến cục bộ bằng Terser) để giảm dung lượng tải. Công cụ dùng Prettier, bộ định dạng mà phần lớn dự án JavaScript đang dùng, và sql-formatter, hiểu cú pháp của MySQL, PostgreSQL, SQL Server, Oracle PL/SQL, BigQuery và nhiều hệ khác.

Tính năng

• 11 ngôn ngữ: JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, SQL, YAML, Markdown, GraphQL
• 13 phương ngữ SQL, tùy chọn viết hoa từ khóa
• Nén JS (Terser), CSS, HTML, JSON và SQL, hiển thị dung lượng giảm
• Tùy chỉnh thụt lề hoặc tab, độ rộng dòng, dấu nháy và dấu chấm phẩy
• Sao chép hoặc tải kết quả, báo lỗi cú pháp rõ ràng

Code của bạn không rời máy

Việc định dạng và nén chạy hoàn toàn trong trình duyệt, nên API key, câu truy vấn nội bộ hay mã nguồn riêng mà bạn dán vào không bao giờ bị tải lên.

Prettier + sql-formatter, 100% trên trình duyệt.

Cách dùng công cụ Định dạng code

1
Chọn tab ngôn ngữ: JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, SQL, YAML, Markdown hoặc GraphQL. Bấm Mẫu để nạp ví dụ.
2
Dán code vào khung đầu vào và chỉnh tùy chọn: độ thụt lề hoặc tab, độ rộng dòng, dấu nháy và dấu chấm phẩy, với SQL thì chọn phương ngữ và kiểu viết hoa từ khóa.
3
Bấm Định dạng để làm đẹp code bằng Prettier hoặc sql-formatter, hoặc Nén để thu gọn JavaScript, CSS, HTML, JSON hay SQL. Dung lượng giảm được hiển thị phía trên kết quả.
4
Sao chép kết quả hoặc tải về dạng file. Nếu code có lỗi cú pháp, thông báo sẽ chỉ rõ dòng và cột để bạn sửa.

Ví dụ thực tế

Đọc code đã bị nén

Script bên thứ ba hay file đã bundle chỉ nằm trên một dòng dài. Định dạng lại để thấy cấu trúc và tìm hàm cần gỡ lỗi.

Làm gọn câu SQL lấy từ log

ORM ghi log câu truy vấn trên một dòng. Định dạng với phương ngữ PostgreSQL hay MySQL sẽ tách SELECT, JOIN và WHERE thành từng dòng để dễ review và tối ưu.

Thống nhất style trước khi commit

Định dạng theo đúng quy tắc Prettier của dự án (2 dấu cách, 80 cột, nháy kép) giúp diff gọn khi bạn dán code lấy từ chat hay trang chia sẻ snippet.

Nén nhanh

Nén một đoạn script hay stylesheet nhỏ cho template email, ô nhập của CMS hay thẻ <script> nội tuyến mà không cần dựng công cụ build.

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

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

Không. Bộ định dạng chỉ thay đổi khoảng trắng, xuống dòng và, nếu bạn chọn, kiểu dấu nháy và dấu chấm phẩy tùy chọn. Nén JavaScript bằng Terser còn đổi tên biến cục bộ nhưng hành vi vẫn giữ nguyên.

Vì sao nút Nén bị tắt với một số ngôn ngữ?+

Nén YAML, Markdown, TypeScript hay GraphQL hiếm khi có ích hoặc làm đổi ý nghĩa (YAML phụ thuộc vào thụt lề). TypeScript thường được biên dịch sang JavaScript trước rồi mới nén.

Nên chọn phương ngữ SQL nào?+

Chọn đúng hệ quản trị bạn dùng. Các phương ngữ khác nhau về dấu trích dẫn, hàm và từ khóa, ví dụ dấu backtick trong MySQL hay phép ép kiểu :: trong PostgreSQL, chọn đúng sẽ tránh lỗi định dạng.

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

Không. Prettier, sql-formatter và Terser chạy trong trình duyệt và chỉ được tải khi bạn bấm nút, nên mã nguồn riêng và thông tin đăng nhập vẫn ở trên máy bạn.