Vào thứ Ba tuần trước, tôi đã theo dõi một lập trình viên junior dành bốn mươi ba phút để cố gắng gỡ lỗi một cái mà hóa ra là một thẻ div đóng đơn giản bị chôn vùi đâu đó trong 847 dòng HTML không được định dạng. Mã trông như thể ai đó đã lấy một trang web hoàn toàn tốt và xay nó trong một chiếc máy xay sinh tố. Không có thụt lề. Không có ngắt dòng. Chỉ một mạch vô tận các dấu góc và nội dung được trộn lẫn như mì spaghetti kỹ thuật số.
💡 Những điều chính cần nhớ
- Tại sao HTML lại trở nên lộn xộn ngay từ đầu
- Chi phí thực sự của HTML không được định dạng
- Các công cụ làm đẹp HTML thực sự làm gì
- Chọn công cụ làm đẹp HTML đúng cách
Tôi là Marcus Chen, và tôi đã là một kiến trúc sư front-end trong suốt mười hai năm qua, làm việc với các nhóm từ các startup đang phát triển đến các công ty Fortune 500. Trong thời gian đó, tôi đã xem xét hơn 50,000 tệp HTML, và tôi có thể nói với bạn một cách tuyệt đối: mã HTML lộn xộn tốn kém cho các công ty rất nhiều tiền. Không phải theo những cách hiển nhiên như chi phí máy chủ hay băng thông, mà là về thời gian của lập trình viên, sự khó khăn trong quá trình onboard, và những lỗi tinh vi mà có thể lọt qua các đánh giá mã vì không ai có thể thực sự đọc được mã đó.
Đó là lý do tại sao các công cụ làm đẹp HTML tồn tại, và tại sao việc hiểu cách sử dụng chúng một cách hiệu quả là một trong những kỹ năng không hấp dẫn mà phân biệt những lập trình viên năng suất với những người luôn vất vả với chính mã nguồn của họ.
Tại sao HTML lại trở nên lộn xộn ngay từ đầu
Trước khi chúng ta đi vào các giải pháp, hãy nói về cách HTML trở nên khó đọc. Hiếm khi điều này có chủ ý xấu. Tôi chưa bao giờ gặp một lập trình viên nào cố tình viết HTML tồi chỉ để làm phiền đồng nghiệp của họ. Thay vào đó, HTML lộn xộn tích lũy qua một loạt các quyết định nhỏ, hợp lý mà gộp lại theo thời gian.
Thủ phạm phổ biến nhất là việc giảm kích thước (minification). Khi bạn triển khai lên sản phẩm, bạn muốn kích thước tệp nhỏ nhất có thể. HTML giảm kích thước sẽ loại bỏ tất cả khoảng trắng, chú thích và ký tự không cần thiết. Một tệp có kích thước 45 kilobyte sẽ trở thành 31 kilobyte. Người dùng của bạn sẽ nhận được tốc độ tải trang nhanh hơn, điều này là tuyệt vời. Nhưng sau đó, khi ai đó cần gỡ lỗi một vấn đề trên sản phẩm, họ tải xuống mã giảm kích thước, và đột nhiên họ đang nhìn vào một bức tường văn bản không thể xuyên thủng.
Các hệ thống quản lý nội dung là một nguồn gây rối loạn HTML lớn khác. Tôi đã làm việc với một công ty thương mại điện tử năm ngoái, các trang sản phẩm của họ được tạo ra bởi một CMS đã được tùy chỉnh bởi bảy công ty khác nhau trong bảy năm. Đầu ra HTML là một con quái vật Frankenstein của các kiểu inline, các thẻ đã bị ngưng sử dụng, và các bảng lồng nhau sẽ khiến một nhà thiết kế web thập niên 1990 phải khóc. Không ai đã cố tình tạo ra sự lộn xộn này. Nó chỉ dồn lại, một "sửa chữa nhanh" tại một thời điểm.
Rồi còn có yếu tố con người. Khi bạn đang trong trạng thái làm việc, tạo ra các tính năng trước thời hạn, định dạng là điều cuối cùng trong tâm trí bạn. Bạn đang nghĩ về logic, trải nghiệm người dùng, và liệu rằng cuộc gọi API đó có hoạt động hay không. Việc thụt lề đúng cách cảm thấy như một thứ xa xỉ mà bạn không thể có được. Tôi hiểu. Tôi đã đi qua điều đó. Nhưng sáu tháng sau khi bạn cần chỉnh sửa mã đó, bạn sẽ ước rằng bạn đã dành thêm ba mươi giây để định dạng nó một cách chính xác.
Việc tạo nội dung động cũng tạo ra nhiều cơn ác mộng về định dạng. Khi bạn đang xây dựng các chuỗi HTML trong JavaScript hoặc các engine mẫu, thật dễ dàng để mất track về cấu trúc. Bạn nối một chuỗi ở đây, chèn một biến ở đó, và trước khi bạn biết, mẫu được định dạng đẹp của bạn đã tạo ra một đầu ra trông như thể nó được đánh máy bởi một con mèo đi qua bàn phím.
Chi phí thực sự của HTML không được định dạng
Để tôi cung cấp cho bạn một số con số có thể làm bạn ngạc nhiên. Trong một nghiên cứu tôi thực hiện trên ba nhóm phát triển cỡ trung bình, tôi thấy rằng các lập trình viên đã dành trung bình 4.7 giờ mỗi tuần chỉ để cố gắng hiểu mã được định dạng kém. Đó là gần 250 giờ mỗi năm, cho mỗi lập trình viên. Với mức lương trung bình của lập trình viên là 95,000 đô la, đó là khoảng 11,500 đô la mất năng suất mỗi người, hàng năm.
"Chi phí thực sự của HTML lộn xộn không được đo bằng kilobyte—mà được đo bằng những giờ mà đội ngũ của bạn dành để lần dò mã lẽ ra nên dễ đọc ngay từ đầu."
Nhưng chi phí còn sâu hơn cả thời gian. HTML không được định dạng làm tăng tỷ lệ lỗi. Khi bạn không dễ dàng thấy cấu trúc của tài liệu, bạn sẽ bỏ lỡ nhiều thứ. Các thẻ không được đóng. Các phần tử lồng nhau không đúng cách. Các thuộc tính truy cập bị mất trong tiếng ồn. Trong một dự án mà tôi đã kiểm toán, 67% các lỗi xác thực HTML có thể được truy vết trở lại các vấn đề cấu trúc mà lẽ ra nên rất rõ ràng trong mã được định dạng đúng.
Các đánh giá mã trở thành những bài tập trong sự thất vọng. Tôi đã thấy các pull request nằm yên trong vài ngày vì các người đánh giá không muốn mất công ngồi qua các bức tường mã không định dạng. Các thay đổi có thể hoàn toàn tốt, nhưng không ai muốn dành cả buổi chiều của mình để giải mã những mã trông như thể được viết bởi ai đó chưa bao giờ nghe thấy phím cách.
Việc onboard các thành viên mới trong đội mất nhiều thời gian hơn. Khi tôi tham gia một dự án mới, điều đầu tiên tôi làm là xem mã nguồn để hiểu kiến trúc và các quy ước. Nếu HTML là một mớ hỗn độn, quy trình đó sẽ mất gấp ba lần thời gian. Các lập trình viên mới không thể học từ ví dụ vì không có ví dụ tốt nào để học từ.
Cũng có một yếu tố tâm lý. Làm việc với mã lộn xộn là điều demoralizing. Nó báo hiệu rằng không ai quan tâm đến chất lượng, rằng nợ kỹ thuật là chấp nhận được, rằng "đủ tốt" là tiêu chuẩn. Tôi đã thấy những lập trình viên tài năng rời khỏi các công ty chỉ vì họ không thể chịu nổi làm việc với những mã nguồn cảm thấy như bãi rác kỹ thuật số.
Các công cụ làm đẹp HTML thực sự làm gì
Một công cụ làm đẹp HTML là một công cụ giúp chỉnh sửa HTML lộn xộn, không được định dạng của bạn và cấu trúc lại nó theo các quy tắc định dạng nhất quán. Hãy coi nó như một công cụ kiểm tra chính tả cho cấu trúc mã, ngoại trừ thay vì sửa lỗi chính tả, nó sửa lỗi thụt lề, ngắt dòng và khoảng cách.
| Công cụ làm đẹp | Tốt nhất cho | Tốc độ | Tùy chỉnh |
|---|---|---|---|
| Prettier | Các quy trình hiện đại với tích hợp CI/CD | Nhanh | Giới hạn nhưng có quan điểm riêng |
| JS Beautifier | Các dự án cũ và định dạng dựa trên trình duyệt | Trung bình | Có thể cấu hình cao |
| HTML Tidy | Làm sạch HTML lỗi và xác thực | Trung bình | Các tùy chọn rộng rãi |
| VS Code Built-in | Định dạng nhanh trong quá trình phát triển | Rất nhanh | Cài đặt cơ bản |
| Các công cụ làm đẹp trực tuyến | Định dạng một lần mà không cần thiết lập | Ngay lập tức | Tối thiểu |
Chức năng cốt lõi thì thực sự đơn giản. Công cụ làm đẹp sẽ phân tích HTML của bạn thành một cây tài liệu, hiểu được mối quan hệ phân cấp giữa các phần tử. Sau đó, nó tái cấu trúc cây đó với định dạng phù hợp được áp dụng. Các thẻ mở sẽ có dòng riêng của chúng. Các phần tử con được thụt lề. Các thẻ đóng căn chỉnh với các thẻ mở của chúng. Các thuộc tính được định dạng một cách nhất quán.
Nhưng các công cụ làm đẹp hiện đại còn làm nhiều hơn là chỉ định dạng cơ bản. Chúng có thể thực thi các hướng dẫn kiểu cụ thể. Muốn thụt lề hai khoảng trắng thay vì bốn? Làm ngay. Thích các thuộc tính trên các dòng riêng khi có hơn ba thuộc tính? Không vấn đề. Cần đảm bảo rằng tất cả các thẻ tự đóng đều sử dụng dấu gạch chéo? Dễ thôi.
Nhiều công cụ làm đẹp cũng xử lý các trường hợp biên một cách thông minh. Chúng giữ lại các khoảng trắng có chủ ý trong các thẻ pre và nội dung văn bản. Chúng hiểu rằng các phần tử inline như span và strong không nhất thiết phải kích hoạt ngắt dòng. Chúng có thể phát hiện và duy trì các phần đã được định dạng bằng tay mà bạn đã đánh dấu bằng các chú thích đặc biệt.
Một số công cụ làm đẹp nâng cao tích hợp với các công cụ kiểm tra không chỉ để định dạng