Trình Định Dạng Mã Miễn Phí: Làm Đẹp JavaScript, Python, HTML & Nhiều Hơn Nữa

Trình định dạng mã là gì?

Trình định dạng mã là công cụ viết lại mã nguồn với thụt lề, ngắt dòng và khoảng cách nhất quán mà không thay đổi chức năng của mã. Trình định dạng mã này chạy trong trình duyệt web. Nó hỗ trợ 12 ngôn ngữ lập trình, gồm JavaScript, Python, HTML và CSS.

Trình định dạng mã này hoạt động như thế nào

Công cụ sử dụng một tập quy tắc khác nhau cho từng ngôn ngữ. Ngoại trừ JSON, không bộ quy tắc nào tạo cây cú pháp đầy đủ cho mã.

JSON được phân tích cú pháp bằng trình phân tích JSON tích hợp trong trình duyệt, sau đó được in lại với thụt lề hai khoảng trắng. Nếu JSON không hợp lệ, công cụ sẽ báo lỗi và không hiển thị kết quả.
JavaScript, TypeScript, Java, C, C++ và C# dùng chung một trình định dạng. Trình này quét mã theo từng ký tự, theo dõi dấu ngoặc nhọn, dấu ngoặc đơn và dấu chấm phẩy. Mỗi { bắt đầu một khối mới có thụt lề, còn mỗi } hoặc ; kết thúc một dòng. Các chú thích và chuỗi đặt trong dấu ngoặc kép được giữ nguyên. Trình định dạng này không thêm khoảng trắng quanh toán tử hoặc sau dấu phẩy nếu mã gốc không có; nó chỉ xây dựng lại ngắt dòng và thụt lề.
Python đọc thụt lề hiện có của từng dòng và xây dựng lại bằng bốn khoảng trắng cho mỗi cấp, theo cùng quy tắc lồng nhau mà ngôn ngữ Python sử dụng. Công cụ không tách các dòng dài, không thêm dòng trống hoặc khoảng cách quanh toán tử; nó chỉ chuẩn hóa độ sâu thụt lề của từng dòng.
CSS loại bỏ các ngắt dòng và khoảng trắng thừa, sau đó thêm một ngắt dòng sau mỗi { và ;, cũng như trước mỗi }.
HTML và XML thêm một ngắt dòng và hai khoảng trắng thụt lề cho mỗi cấp thẻ lồng nhau, đồng thời nhận diện các thẻ tự đóng tiêu chuẩn như <br>, <img> và <input>.
SQL chuyển một tập từ khóa cố định, chẳng hạn SELECT, FROM, WHERE, JOIN và ORDER BY, thành chữ hoa và bắt đầu một dòng mới trước mỗi mệnh đề chính.

Vì chỉ có quy trình xử lý JSON thực sự phân tích cú pháp đầu vào, các trình định dạng khác không phát hiện lỗi cú pháp như thiếu dấu ngoặc hoặc chuỗi chưa đóng. Chúng định dạng lại mọi văn bản được cung cấp, ngay cả khi văn bản đó không thể chạy.

Các ngôn ngữ được hỗ trợ

Ngôn ngữ	Phần mở rộng tệp thường dùng	Độ rộng thụt lề
JavaScript	.js	2 khoảng trắng
TypeScript	.ts	2 khoảng trắng
HTML	.html	2 khoảng trắng
CSS	.css	2 khoảng trắng
Python	.py	4 khoảng trắng
Java	.java	4 khoảng trắng
C	.c	4 khoảng trắng
C++	.cpp	4 khoảng trắng
C#	.cs	4 khoảng trắng
SQL	.sql	ngắt dòng theo mệnh đề
JSON	.json	2 khoảng trắng
XML	.xml	2 khoảng trắng

Cách định dạng mã

Chọn một ngôn ngữ lập trình từ menu thả xuống.
Dán mã chưa được định dạng vào ô nhập.
Chọn "Định dạng mã".
Sao chép kết quả đã định dạng từ ô kết quả.

Việc định dạng diễn ra hoàn toàn trong trình duyệt. Mã không bao giờ được gửi đến máy chủ.

Ví dụ định dạng JavaScript

Trước khi định dạng:

1function add(a, b) {
2    if (a > 0) { return a + b; }
3    return 0;
4}
5

Sau khi định dạng:

1function add(a, b) {
2  if (a > 0) {
3    return a + b;
4  }
5  return 0;
6}
7

Trình định dạng đã chuyển phần mã bên trong { } sang một dòng riêng có thụt lề và chuẩn hóa thụt lề thành hai khoảng trắng cho mỗi cấp. Nó giữ nguyên khoảng cách quanh a > 0 và a + b đúng như ban đầu vì các khoảng cách đó đã có sẵn.

Ví dụ định dạng Python

Trước khi định dạng:

1def calculate_average(numbers):
2  if len(numbers) == 0:
3    return 0
4  total = sum(numbers)
5  return total / len(numbers)
6

Sau khi định dạng:

1def calculate_average(numbers):
2    if len(numbers) == 0:
3        return 0
4    total = sum(numbers)
5    return total / len(numbers)
6

Mã ban đầu sử dụng hai khoảng trắng cho mỗi cấp thụt lề. Trình định dạng xây dựng lại thụt lề của từng dòng bằng bốn khoảng trắng cho mỗi cấp, phù hợp với phong cách được mô tả trong PEP 8, hướng dẫn phong cách chính thức của Python. Công cụ giữ nguyên thứ tự các dòng và không thay đổi khoảng cách bên trong dòng.

Vì sao việc định dạng mã lại quan trọng

Thụt lề không nhất quán khiến việc xác định điểm kết thúc của một hàm, vòng lặp hoặc điều kiện trở nên khó khăn hơn. Mã do nhiều người chỉnh sửa thường có cả thụt lề bằng tab và khoảng trắng, hoặc có các dòng không thẳng hàng với khối mà chúng thuộc về. Định dạng mã giúp mọi tệp có cùng cấu trúc trực quan, nhờ đó có thể xem nhanh hơn và dễ phát hiện dấu ngoặc đặt sai vị trí.

Hạn chế

Kích thước đầu vào: Công cụ chấp nhận tối đa 50.000 ký tự mã. Đầu vào dài hơn sẽ bị từ chối kèm thông báo lỗi trước khi bắt đầu định dạng.
Không kiểm tra cú pháp cho hầu hết ngôn ngữ: Chỉ đầu vào JSON được phân tích cú pháp và kiểm tra tính hợp lệ. Mã trong 11 ngôn ngữ còn lại được định dạng lại nguyên trạng, ngay cả khi bị thiếu dấu ngoặc hoặc có chuỗi chưa đóng. Trong trường hợp đó, kết quả có thể bị thụt lề sai thay vì được báo lỗi.
Không thay đổi khoảng cách quanh toán tử: Các trình định dạng JavaScript, TypeScript và họ C chỉ sắp xếp lại ngắt dòng và thụt lề. Chúng không chèn khoảng trắng quanh +, =, !== hoặc sau dấu phẩy nếu ban đầu không có.
Không hỗ trợ PHP: Việc chọn một ngôn ngữ không được hỗ trợ sẽ trả về mã không thay đổi.

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

Công cụ này có kiểm tra mã để tìm lỗi cú pháp không? Chỉ đối với JSON. Đầu vào JSON được phân tích cú pháp, nên JSON không hợp lệ sẽ tạo ra thông báo lỗi. Mã bằng các ngôn ngữ được hỗ trợ khác được định dạng lại mà không kiểm tra cú pháp hợp lệ.

Công cụ có gửi mã của tôi đến máy chủ không? Không. Việc định dạng diễn ra hoàn toàn trong trình duyệt bằng JavaScript. Mã không được tải lên hoặc lưu trữ ở bất kỳ đâu.

Công cụ có thể định dạng tối đa bao nhiêu mã? 50.000 ký tự. Dán nhiều hơn số đó sẽ tạo ra lỗi trước khi bắt đầu định dạng.

Công cụ có thêm khoảng cách còn thiếu quanh toán tử hoặc sau dấu phẩy không? Không, đối với JavaScript, TypeScript, Java, C, C++ và C#. Các trình định dạng đó chỉ xây dựng lại thụt lề và ngắt dòng quanh dấu ngoặc nhọn và dấu chấm phẩy; phần còn lại của từng dòng được sao chép đúng như đã viết.

Công cụ sử dụng kiểu thụt lề nào? Hai khoảng trắng cho JavaScript, TypeScript, HTML, CSS, JSON và XML. Bốn khoảng trắng cho Python, Java, C, C++ và C#.

Vì sao mã của tôi trông gần như không đổi sau khi định dạng? Nếu đầu vào đã có khoảng cách nhất quán và sử dụng một kiểu dấu ngoặc, trình định dạng chủ yếu xây dựng lại thụt lề, nên thay đổi có thể rất nhỏ. Công cụ hữu ích nhất với mã có thụt lề lẫn lộn hoặc mã đã bị thu gọn thành rất ít dòng.

Trình Định Dạng Mã Miễn Phí: Làm Đẹp JavaScript, Python, HTML & Nhiều Hơn Nữa