Giới hạn sử dụng hợp lý áp dụng cho công cụ này.

Công cụ này có hữu ích với bạn không?

4/5 từ 40 đánh giá

Làm đẹp mã JavaScript ngay lập tức để dễ đọc hơn, dễ gỡ lỗi hơn và có quy trình phát triển gọn gàng hơn.

Giới thiệu

Mã JavaScript đã được thu gọn để đưa lên môi trường thật, hoặc chỉ đơn giản là được gõ vội mà không mấy để ý đến cách trình bày, có thể thực sự khó đọc: không có thụt lề nhất quán, nhiều câu lệnh bị dồn vào cùng một dòng, các khối lệnh nhìn vào không tách bạch được với nhau. Việc làm đẹp sẽ định dạng lại đoạn mã đó — thêm thụt lề, thêm ngắt dòng giữa các câu lệnh và giãn cách đều đặn — mà không làm thay đổi những gì đoạn mã thực hiện. Phần logic, tên biến và cách chạy vẫn giữ nguyên hoàn toàn; thứ duy nhất thay đổi là hình thức của đoạn mã trên màn hình. Với người đang học cách đọc JavaScript chứ không chỉ học viết, khác biệt này rất đáng kể: cùng một đoạn kịch bản, khi nằm gọn trong một dòng dày đặc thì trông thật đáng ngại, còn khi được tách ra thành những câu lệnh và khối lệnh thụt lề ngay ngắn thì lại hoàn toàn dễ tiếp cận.

Công cụ này định dạng mã của bạn như thế nào

Công cụ đọc đoạn mã bạn dán vào theo từng phần một, nhận diện chuỗi ký tự, chú thích, dấu ngoặc và toán tử như những thành phần riêng biệt, thay vì chỉ chèn ngắt dòng dựa trên việc dò tìm khuôn mẫu trong văn bản. Chính nhờ vậy mà công cụ phân biệt được chính xác một dấu / mở đầu chú thích, một dấu nằm trong biểu thức chính quy và một dấu mang nghĩa phép chia — điều mà một trình định dạng thuần văn bản sẽ làm sai. Công cụ dựng lại phần thụt lề theo một quy tắc thống nhất (ba dấu cách cho mỗi cấp lồng nhau) và tự đặt ngắt dòng dựa trên cấu trúc của mã, sao cho mỗi câu lệnh và mỗi khối lệnh đều có dòng riêng. Chú thích thì không bị cắt bỏ: chúng được giữ lại và định dạng lại cùng với mã, nên phần giải thích cho một hàm hay dòng tiêu đề giấy phép vẫn còn nguyên trong kết quả.

Dấu chấm phẩy chỉ được sắp xếp lại tại chỗ, chứ không được thêm vào hay bỏ đi. JavaScript cho phép một câu lệnh kết thúc mà không cần dấu chấm phẩy trong rất nhiều trường hợp — đặc tả chính thức của ngôn ngữ tự động bù vào chỗ thiếu bằng một quy tắc gọi là chèn dấu chấm phẩy tự động — và có những lập trình viên cố tình viết theo lối đó. Công cụ này không đứng về phía nào trong lựa chọn phong cách ấy: nếu mã gốc của bạn không có dấu chấm phẩy thì kết quả sau khi định dạng cũng sẽ không có; còn nếu có thì chúng vẫn nằm đúng vị trí cũ, chỉ được sắp xếp lại quanh các ngắt dòng và phần thụt lề mới. Điều này đáng lưu ý nếu bạn dùng công cụ để dạy hoặc để tìm hiểu xem câu lệnh JavaScript kết thúc ra sao, bởi công cụ sẽ không "sửa" phong cách này thành phong cách kia.

Những điều nên biết trước khi dùng

Có hai điều đáng biết trước khi bạn dán mã thật vào đây:

Dòng trống không được giữ lại. Trình định dạng quyết định vị trí ngắt dòng dựa trên cấu trúc của chính đoạn mã, chứ không dựa trên chỗ bạn đã để dòng trống trong bản dán ban đầu. Nếu bạn dùng dòng trống để tách các phần của một đoạn kịch bản cho dễ nhìn thì cách phân tách đó chưa chắc còn nguyên sau khi định dạng — phần logic và toàn bộ câu lệnh vẫn ở đó, chỉ là không còn cách nhóm ban đầu của bạn.
Chuỗi mẫu (chuỗi đặt trong dấu huyền ngược) không được nhận diện là chuỗi. JavaScript hiện đại cho phép bạn dựng chuỗi bằng dấu huyền ngược cùng các biểu thức nhúng bên trong, chẳng hạn `Hello, ${name}`. Trình định dạng của công cụ này không xem đoạn văn bản nằm giữa hai dấu huyền ngược là một chuỗi theo cách nó xem văn bản trong dấu nháy thông thường, nên đoạn mã dựa vào chuỗi mẫu có thể bị định dạng sai ở đúng những chỗ đó. Nếu đoạn kịch bản của bạn có dùng chuỗi mẫu, hãy kiểm tra kỹ phần kết quả tương ứng sau khi làm đẹp, hoặc định dạng phần còn lại và để nguyên những dòng này như cũ.

Cả hai điều trên đều không làm thay đổi công việc mà đoạn mã gốc của bạn thực hiện — bạn luôn làm việc trên chính nội dung mình đã dán vào, và không có gì bị thay đổi trừ khi bạn tự chép kết quả đã định dạng trở lại dự án của mình.

Khi nào đây là công cụ phù hợp

Đọc đoạn kịch bản đã thu gọn của người khác. Xem mã JavaScript của một trang web công khai qua công cụ dành cho nhà phát triển của trình duyệt thường chỉ thấy một tệp dày đặc, không định dạng — dán tệp đó vào đây rồi làm đẹp sẽ giúp bạn thực sự nghiên cứu được cách nó hoạt động, một hoạt động rèn năng lực số đúng nghĩa chứ không đơn thuần là dọn dẹp mã.
Xem lại đoạn mã học sinh nộp. Một đoạn kịch bản gửi đến mà không có định dạng nhất quán thì đọc và chấm đều chậm hơn; làm đẹp trước sẽ giúp việc nhận xét nhanh hơn và nhẹ nhàng hơn.
Dọn lại mã của chính mình trước khi nộp bài. Định dạng nhất quán giúp giáo viên — hoặc chính bạn vài tháng sau — theo dõi mạch logic dễ dàng hơn.
Chuẩn bị một ví dụ mã cho tiết học. Một hàm viết vội trong lúc soạn bài thường trở nên dày đặc và khó theo dõi khi chiếu lên máy chiếu; làm đẹp trước sẽ cho ra đoạn mã sạch sẽ, thụt lề đều đặn, để cả lớp đọc được kể cả từ cuối phòng.

Với đoạn mã phụ thuộc nhiều vào chuỗi mẫu, hoặc với một dự án mã nguồn hiện đại và đồ sộ mà bạn cần kết quả chắc chắn đúng, thì trình định dạng tích hợp sẵn trong một trình soạn thảo mã là lựa chọn đáng tin cậy hơn — xem phần hạn chế ở trên. Công cụ này phù hợp nhất với những đoạn kịch bản có quy mô thường gặp trong lớp học.

Ví dụ

Một học sinh tìm thấy trên một trang hướng dẫn đoạn kịch bản tương tác ngắn, đã bị thu gọn thành một dòng dày đặc duy nhất, và muốn hiểu nó hoạt động ra sao trước khi chỉnh sửa lại cho dự án của mình. Dán đoạn mã vào công cụ này, nó được trải ra thành những câu lệnh và khối lệnh thụt lề ngay ngắn, nhờ đó có thể đọc được mạch logic một cách thực sự — hàm nào chạy khi có sự kiện nào, vòng lặp bắt đầu ở đâu và kết thúc ở đâu — thay vì phải rà mắt dọc một dòng mã liền mạch không ngắt.

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

Làm đẹp có thay đổi cách mã của tôi chạy không?

Không. Chỉ có cách trình bày thay đổi — thụt lề, ngắt dòng và giãn cách; phần logic và cách chạy vẫn giữ nguyên.

Chú thích của tôi có được giữ lại không?

Có. Chú thích, kể cả dòng tiêu đề giấy phép, đều được giữ lại và định dạng lại cùng với phần mã còn lại.

Công cụ có xử lý được chuỗi mẫu (chuỗi trong dấu huyền ngược) không?

Không đáng tin cậy. Đoạn mã dùng `like this ${example}` có thể bị định dạng sai ở những chỗ đó — hãy kiểm tra phần kết quả tương ứng, hoặc để nguyên những dòng ấy không định dạng.

Mã của tôi có bị lưu lại ở đâu không?

Không. Đoạn mã bạn dán vào được xử lý để tạo ra kết quả đã định dạng rồi không được lưu trữ lại; chỉ có việc công cụ đã được sử dụng là được ghi nhận, còn bản thân đoạn mã thì không.

Công cụ có thêm hay bớt dấu chấm phẩy không?

Không. Dấu chấm phẩy vẫn y nguyên như trong mã gốc của bạn, chỉ được sắp xếp lại quanh các ngắt dòng và phần thụt lề mới — nếu mã của bạn không có dấu nào thì kết quả cũng sẽ không có.