Định dạng JavaScript
Thụt lề một script để bạn đọc được, hoàn toàn trong trình duyệt. Không chỗ xuống dòng nào bạn đã viết bị xóa đi.
Chạy hoàn toàn trong trình duyệt của bạn. Không có gì được tải lên, ghi log hay lưu trữ.
Dán một script đã minify hoặc thụt lề lộn xộn và đọc nó cho đàng hoàng. Việc định dạng diễn ra trong trình duyệt của bạn, và mã không bị thay đổi gì ngoài khoảng trắng.
Cách hoạt động
Script được tách thành các mảnh — chú thích, chuỗi, template literal, biểu thức chính quy, số, tên, toán tử, ngoặc đơn và ngoặc nhọn — rồi được viết lại. Một khối có các dòng riêng và một mức thụt lề, một câu lệnh có một dòng, và một object literal trải trên nhiều dòng có mỗi mục một dòng.
Không chỗ xuống dòng nào bạn đã viết bị xóa đi, và đó là quy tắc mà mọi thứ khác được suy ra từ đó. Trong JavaScript, cuối dòng có thể kết thúc một câu lệnh — cơ chế tự động chèn dấu chấm phẩy — nên gộp hai dòng thành một có thể thay đổi điều chương trình làm, hoặc khiến nó không phân tích được. Chỗ xuống dòng chỉ được thêm vào: quanh dấu ngoặc nhọn của một khối, sau dấu chấm phẩy của một câu lệnh, giữa các mục của một object và giữa một dấu ngoặc nhọn đóng với từ mở đầu câu lệnh tiếp theo. Không chỗ nào trong số đó có thể thay đổi ý nghĩa.
Một dòng mà mã nguồn đã ngắt giữa chừng một câu lệnh — một chuỗi lời gọi, một điều kiện dài, các nhánh của một biểu thức điều kiện — được thụt vào một mức so với dòng phía trên, để nó tiếp tục được đọc như một phần của dòng đó.
Ví dụ
| Trường hợp | Dữ liệu nhập | Kết quả |
|---|---|---|
| Một hàm viết trên một dòng | function add(a,b){const total=a+b;return total} | function add(a, b) { const total = a + b; return total } |
Câu hỏi thường gặp
Mã của tôi có bị gửi đi đâu không?
Không. Công cụ định dạng là JavaScript chạy trên trang này. Không có gì được tải lên, ghi log hay lưu trữ: bạn có thể ngắt mạng và công cụ vẫn hoạt động.
Nó có thêm những dấu chấm phẩy tôi bỏ sót không?
Không. Một dấu chấm phẩy không được viết đôi khi là một dấu chấm phẩy không được phép viết, và việc phân biệt các trường hợp đó cần một bộ phân tích cú pháp chứ không phải một lượt sắp xếp bố cục. Công cụ định dạng để yên vấn đề đó: nó không bao giờ thêm dấu chấm phẩy và không bao giờ xóa chỗ xuống dòng, nên mã viết không có dấu chấm phẩy vẫn chạy y hệt như trước.
Nó có nén (minify) luôn không?
Không, và đó là một quyết định chứ không phải một thiếu sót. Minify nghĩa là đổi tên, viết lại và quyết định chỗ xuống dòng nào có nghĩa: ba phán đoán mà công cụ này tồn tại chính là để không phải đưa ra. Sai ở bất kỳ phán đoán nào trong số đó cũng làm hỏng chương trình theo kiểu bạn chỉ phát hiện ra trên môi trường production.
Nó có hiểu TypeScript hay JSX không?
Một phần, và nói thật. Cả hai đều được đọc như những token mà chúng vốn là, nên không có gì bị mất và ngoặc đơn, ngoặc nhọn vẫn lồng đúng, nhưng chú thích kiểu và thẻ không phải là thứ mà phần bố cục biết hình dạng. Hãy chờ đợi một kết quả hợp lý hơn là một kết quả đúng phong cách.
Nó có cho tôi biết script của tôi có hợp lệ không?
Không. Nó không có ngữ pháp, nên không thể: nó biết một mảnh mã kết thúc ở đâu và mảnh tiếp theo bắt đầu ở đâu, đủ để dàn trang một tệp nhưng không đủ để đánh giá nó. Một tệp mà nó hoàn toàn không đọc được — một chuỗi, một chú thích hoặc một template literal không được đóng — sẽ bị từ chối thay vì được định dạng lại thành thứ gì đó trông có vẻ hợp lý.
Cần biết
- Kết quả chứa đúng những mảnh mà dữ liệu nhập chứa. Không có gì được thêm, không có gì bị bỏ và không có gì bị sắp xếp lại: chỉ có khoảng trắng ở giữa được di chuyển.
- Một dấu gạch chéo hoặc là phép chia hoặc là phần mở đầu của một biểu thức chính quy, và không tokenizer nào chắc chắn được là cái nào nếu không có ngữ pháp. Công cụ này quyết định dựa trên token đứng trước, và đọc thành phép chia một literal mà lẽ ra phải trải qua một chỗ xuống dòng, vì biểu thức chính quy không thể chứa chỗ xuống dòng. Đoán sai chỉ làm mất đi sự gọn gàng chứ không gì hơn, vì mọi mảnh đều được sao chép đúng như đã viết.
- Một template literal được giữ nguyên từng ký tự, từ dấu backtick này đến dấu backtick kia. Khoảng trắng của nó là văn bản mà trang của bạn sẽ hiển thị, nên đó không phải khoảng trắng mà công cụ định dạng được phép đụng vào.
- Bố cục mang tính tất định: cùng một script với cùng tùy chọn luôn cho cùng một kết quả, và định dạng một script đã được định dạng sẽ không thay đổi gì.