Định Dạng Code - Làm Đẹp JS, HTML, CSS, SQL

Định Dạng Code Online cho JavaScript, HTML, CSS, SQL, Python & PHP

Công cụ định dạng code này biến những đoạn mã nguồn lộn xộn, bị nén hoặc thụt lề không nhất quán thành code gọn gàng, dễ đọc. Chọn ngôn ngữ, dán code vào và nó tự động làm đẹp với thụt lề thống nhất cùng cách ngắt dòng ngăn nắp.

Công cụ được xây dựng cho lập trình viên muốn định dạng code online trước khi commit hay chia sẻ, sinh viên đang học cách thụt lề đúng chuẩn, người review đang gỡ rối các đoạn code dày đặc, và người viết tài liệu kỹ thuật cần ví dụ sạch sẽ. Sáu ngôn ngữ được hỗ trợ, mỗi ngôn ngữ dùng một engine chuyên dụng theo chuẩn ngành.

Riêng tư ngay từ thiết kế: mọi thao tác định dạng đều chạy hoàn toàn trong trình duyệt của bạn bằng các thư viện JavaScript (Prettier, sql-formatter, js-beautify). Code của bạn không bao giờ bị tải lên, lưu trữ hay ghi log trên bất kỳ máy chủ nào.

Cách Định Dạng Code Online

Chọn ngôn ngữ

Bấm vào tab ngôn ngữ ở phía trên: JavaScript, HTML, CSS, SQL, Python hoặc PHP. Mỗi tab nạp đúng engine định dạng và các tùy chọn tương ứng.

Dán hoặc tải code lên

Gõ hoặc dán code vào ô Đầu vào bên trái, hoặc dùng Tải lên để nạp một file từ thiết bị. Bấm Code mẫu để chèn nhanh đoạn code ví dụ cho ngôn ngữ hiện tại.

Điều chỉnh tùy chọn định dạng

Đặt cỡ thụt lề (2, 3, 4, 8 dấu cách hoặc Tab) và các tùy chọn riêng theo ngôn ngữ, chẳng hạn Độ rộng dòng, dấu nháy và dấu chấm phẩy cho JavaScript, hay kiểu chữ từ khóa và phương ngữ cho SQL.

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

Code đã định dạng xuất hiện ở ô Kết quả với phần tô màu cú pháp. Dùng Sao chép để đưa vào bộ nhớ tạm hoặc Tải về để lưu với đúng phần mở rộng của file.

Code tự động định dạng ngay sau khi bạn ngừng gõ một chút. Nhấn Ctrl+Shift+F để định dạng tức thì, hoặc bấm Tab trong ô đầu vào để chèn thụt lề.

Tính năng

Sáu Ngôn Ngữ, Engine Chuyên Dụng

Định dạng JavaScript, HTML, CSS và PHP bằng Prettier, SQL bằng sql-formatter, và Python bằng js-beautify.

Định Dạng JavaScript

Prettier với bộ phân tích Babel, kèm các tùy chỉnh độ rộng dòng, dấu chấm phẩy, dấu nháy đơn hay kép, và dấu phẩy cuối.

Định Dạng HTML & CSS

HTML gọn gàng với xuống dòng thuộc tính và đặt vị trí dấu ngoặc, cùng CSS sạch sẽ với độ rộng dòng tùy chỉnh.

SQL Theo Phương Ngữ

Chọn kiểu chữ từ khóa và phương ngữ: SQL chuẩn, MySQL, PostgreSQL, MSSQL hoặc Oracle, mỗi loại có quy tắc cú pháp riêng.

Thụt Lề Tùy Chỉnh

Thụt lề bằng 2, 3, 4 hoặc 8 dấu cách, hoặc dùng ký tự Tab. Thiết lập này áp dụng cho mọi ngôn ngữ và cập nhật kết quả tức thì.

Kết Quả Tô Màu Cú Pháp

Prism.js tô màu từ khóa, chuỗi, chú thích và số, và giao diện tự thích ứng theo chế độ sáng hoặc tối.

Kết Quả Chỉnh Sửa Được

Bấm Chỉnh sửa để chuyển ô kết quả sang trình soạn thảo CodeMirror đầy đủ với số dòng để tinh chỉnh nhanh. Nó được nạp khi cần.

Định Dạng Thời Gian Thực

Code tự định dạng lại ngay sau khi bạn gõ một chút, hoặc tức thì với Ctrl+Shift+F, để bạn thấy kết quả sạch sẽ khi đang làm việc.

Tải Lên, Tải Về & Sao Chép

Nạp file code từ thiết bị, sao chép kết quả chỉ một chạm, hoặc tải về với đúng phần mở rộng (.js, .html, .css, .sql, .py, .php).

Trạng Thái & Thống Kê

Thanh trạng thái hiện Sẵn sàng, Đã định dạng hoặc Lỗi cùng số dòng và dung lượng của kết quả đã định dạng.

Câu Hỏi Thường Gặp

Công cụ định dạng code làm gì?

Nó viết lại mã nguồn của bạn với thụt lề, khoảng cách và cách ngắt dòng nhất quán để dễ đọc hơn, mà không làm thay đổi chức năng của code. Đây là điều ngược lại với nén code (minify), vốn loại bỏ khoảng trắng để làm code nhỏ hơn.

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

Không. Việc định dạng chỉ điều chỉnh khoảng trắng và bố cục, như thụt lề, ngắt dòng và khoảng cách. Logic và hành vi của code vẫn giữ nguyên hoàn toàn.

Hỗ trợ những ngôn ngữ nào?

Sáu ngôn ngữ: JavaScript, HTML, CSS, SQL, Python và PHP. Vì tab JavaScript dùng Prettier với bộ phân tích Babel, bạn cũng có thể dán TypeScript hoặc JSX vào đó.

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

Không. Mọi thao tác định dạng diễn ra hoàn toàn trong trình duyệt của bạn bằng các thư viện JavaScript (Prettier, sql-formatter và js-beautify). Code của bạn không bao giờ rời khỏi thiết bị và không có gì được lưu hay ghi log.

Những engine định dạng nào được sử dụng?

Prettier xử lý JavaScript, HTML, CSS và PHP, sql-formatter xử lý SQL, và js-beautify xử lý thụt lề Python. Đây chính là những công cụ mà nhiều lập trình viên dùng ngay trong trình soạn thảo code của họ.

Độ rộng dòng (Print Width) nghĩa là gì?

Độ rộng dòng đặt số ký tự tối đa trên mỗi dòng. Công cụ định dạng sẽ cố ngắt những dòng vượt quá giới hạn này. Bạn có thể chọn 80, 100 hoặc 120 ký tự.

Hỗ trợ những phương ngữ SQL nào?

SQL chuẩn, MySQL, PostgreSQL, MSSQL (Transact-SQL) và Oracle (PL/SQL). Mỗi phương ngữ có quy tắc cú pháp riêng ảnh hưởng đến cách câu truy vấn được định dạng. Bạn cũng có thể đặt kiểu chữ từ khóa thành CHỮ HOA, chữ thường hoặc Giữ nguyên.

Tôi có chỉnh sửa được kết quả đã định dạng không?

Có. Bấm nút Chỉnh sửa ở ô kết quả để chuyển sang trình soạn thảo CodeMirror tương tác với số dòng, rồi tinh chỉnh thủ công và sao chép hoặc tải kết quả về. Bấm Xem để quay lại chế độ hiển thị chỉ đọc, có tô màu cú pháp.

Vì sao code của tôi báo lỗi?

Công cụ định dạng báo lỗi khi đầu vào chứa cú pháp mà nó không phân tích được. Hãy sửa lỗi cú pháp trong ô đầu vào và nó sẽ tự định dạng lại.