Visual Studio Code hiện hỗ trợ Baseline

Rick Viscomi

Xuất bản: Ngày 20 tháng 5 năm 2025

Trình chỉnh sửa mã hiện đại giúp tăng năng suất đáng kể bằng cách kết hợp các công cụ và tài liệu tham khảo mà bạn cần để tạo các thành phần một cách hiệu quả – đó là chữ I trong IDE. Một điểm cải thiện năng suất trong nhiều IDE như Visual Studio Code (VS Code) là hiển thị thông tin bổ sung về các tính năng trên web khi bạn di chuột qua các tính năng đó trong trình chỉnh sửa. Thông tin này bao gồm nội dung mô tả về tính năng, các trình duyệt được hỗ trợ, hướng dẫn về cú pháp và đường liên kết để tìm hiểu thêm trên MDN.

Thông tin về khả năng tương thích của trình duyệt đặc biệt hữu ích trong bối cảnh của một IDE, vì bạn có thể nhận được phản hồi tức thì về mức độ tương tác của một tính năng, chỉ bằng cách di chuột qua tính năng đó. Bạn có thể sử dụng thông tin này để quyết định xem một tính năng có đáp ứng các mục tiêu hỗ trợ trình duyệt của bạn hay không, liệu bạn có cần thực hiện các bước phòng ngừa để tăng cường dần hoặc polyfill tính năng đó hay hoàn toàn không sử dụng tính năng đó.

Di chuột lên thuộc tính CSS tỷ lệ khung hình trong các phiên bản VS Code trước đây, với khả năng hỗ trợ trình duyệt được thể hiện bằng số phiên bản: Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74
Di chuột lên thuộc tính CSS aspect-ratio trong các phiên bản trước của VS Code, với sự hỗ trợ của trình duyệt được thể hiện bằng số phiên bản:
"Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74"

Các phiên bản trước của VS Code thể hiện thông tin này theo số phiên bản trình duyệt, tương tự như những gì bạn có thể thấy trong các bảng tương thích trên những trang web như MDN, Can I Use hoặc tại đây trên web.dev. Nhưng điểm chung của tất cả những trang web này là chúng cũng bắt đầu tóm tắt bối cảnh phức tạp về khả năng hỗ trợ của trình duyệt bằng cách sử dụng Baseline. Vì vậy, để VS Code phù hợp với cách các tài nguyên khác truyền tải thông tin về khả năng tương thích của trình duyệt, VS Code hiện cũng hỗ trợ Baseline.

Để sử dụng Giao diện người dùng Baseline mới, hãy nâng cấp lên VS Code phiên bản 1.100 trở lên. Mọi thứ đều hoạt động ngay khi bạn mở hộp mà không cần tiện ích hoặc cấu hình bổ sung.

Di chuột lên thuộc tính CSS aspect-ratio trong phiên bản mới nhất của VS Code, với khả năng hỗ trợ trình duyệt được thể hiện theo Baseline: Có sẵn trên nhiều trình duyệt chính (Baseline từ năm 2021)
Di chuột lên thuộc tính CSS aspect-ratio trong phiên bản mới nhất của VS Code, với khả năng hỗ trợ trình duyệt được thể hiện theo Baseline:
"Có sẵn trên nhiều trình duyệt chính (Baseline từ năm 2021)"

Khi di chuột lên một tính năng web trong phiên bản VS Code mới nhất, bạn sẽ thấy trạng thái Baseline của tính năng đó. Để cho bạn biết tính năng này đã được hỗ trợ bao lâu, VS Code cũng sẽ cho bạn biết năm tính năng này trở thành Đường cơ sở. Hoặc đối với những tính năng chưa phải là Baseline, thông tin này sẽ cho bạn biết những trình duyệt chưa triển khai đầy đủ tính năng đó.

Trong các phiên bản trước của VS Code, việc này không đơn giản như vậy. Bạn cần suy nghĩ một chút để xem danh sách các phiên bản trình duyệt được hỗ trợ và tìm ra những trình duyệt còn thiếu. Có lẽ phần khó xác định nhất là thời gian tính năng này được hỗ trợ trên các trình duyệt. Để làm việc đó, bạn cần biết thời điểm phát hành từng phiên bản, nhưng đây không phải là thông tin phổ biến! Rất may là tất cả những yếu tố đó đều được tính đến trong trạng thái và năm của Baseline.

Thẻ thông tin khi di chuột cho thuộc tính HTML tự động sửa lỗi có tình trạng còn hàng hạn chế
Thẻ thông tin khi di chuột cho thuộc tính HTML autocorrect có tình trạng còn hàng một phần

Bản phát hành này cũng có một điểm hoàn toàn mới. Trước đây, bạn chỉ có thể xem dữ liệu hỗ trợ trình duyệt cho các thuộc tính CSS. Điều này đặc biệt hữu ích vì tốc độ ra mắt các tính năng CSS mới mỗi năm là rất nhanh. Nhưng cũng có rất nhiều điểm mới trong HTML! Kể từ bản phát hành này, VS Code cũng sẽ bắt đầu hiển thị thông tin hỗ trợ trình duyệt cho các phần tử và thuộc tính HTML theo trạng thái Baseline của chúng.

Ví dụ: thuộc tính đầu vào autocorrect được phát hành trong trình duyệt đầu tiên của Firefox chỉ vài tháng trước. Thật tốt khi có thể nhận được phản hồi ngay lập tức rằng tính năng này có phạm vi cung cấp hạn chế, nhờ đó bạn có thể biết rõ hơn về nơi tính năng này sẽ hoạt động hoặc không hoạt động. Trong trường hợp cụ thể này, việc sử dụng thuộc tính này không gây hại trong các trình duyệt không được hỗ trợ, vì vậy, hãy sử dụng!

Di chuột lên phần tử HTML của hộp thoại Có sẵn rộng rãi và thuộc tính của cửa sổ bật lên Mới có sẵn
Di chuột lên phần tử HTML dialog Có sẵn trên diện rộng và thuộc tính popover Mới ra mắt

Các tính năng HTML khác như phần tử dialog không giảm cấp mượt mà như autocorrect. Vì vậy, thật yên tâm khi có thể gọi thẻ thông tin dialog và thấy rằng thẻ này thực sự đã được Baseline từ năm 2022 và được coi là Có sẵn trên nhiều trình duyệt chính. Những thông tin như thế này sẽ giúp bạn tự tin áp dụng những tính năng mà bạn có thể cho là quá mới.

Popover API là một ví dụ khác về tính năng HTML cũng đã được Baseline, nhưng chỉ từ năm 2024, nên vẫn được coi là Mới có sẵn. Điều đó có nghĩa là mặc dù được tất cả các trình duyệt chính hỗ trợ, nhưng tính năng này chưa đạt được 2,5 năm cần thiết để trở thành tính năng Được cung cấp rộng rãi. Vì vậy, bạn nên thận trọng hơn một chút trước khi phát hành tính năng này cho tất cả người dùng.

HTML ESLint làm nổi bật rằng tính năng tự động sửa lỗi chưa phải là Baseline và ngăn chặn cảnh báo đó bằng một nhận xét
HTML ESLint làm nổi bật rằng tính năng autocorrect chưa phải là Baseline và ngăn chặn cảnh báo đó bằng một nhận xét

Việc có sẵn thông tin này trong VS Code giúp tăng năng suất đáng kể. Nhưng nếu bạn không cần di chuột lên một tính năng để xem tính năng đó có phải là Baseline hay không thì sao? Điều này có thể thực hiện được nhờ một công cụ riêng biệt nhưng có liên quan: linter.

Ví dụ: tiện ích ESLint cho VS Code có thể kiểm tra các tệp HTML và CSS của bạn, đồng thời thêm đường gạch chân lượn sóng vào mọi tính năng chưa thuộc Baseline. Điều này được hỗ trợ bởi các quy tắc use-baseline mới được thêm vào từ các trình bổ trợ HTML ESLint và ESLint cho CSS. Ngoài ra, Stylelint cũng có một quy tắc tương tự, nếu bạn muốn. Tất nhiên, đây chỉ là một trong nhiều lợi ích của trình kiểm tra mã nguồn, nhưng nó cho thấy mức độ phù hợp của trình kiểm tra mã nguồn với thẻ di chuột mới có hỗ trợ Baseline.

Nếu là người dùng VS Code, tôi hy vọng bạn sẽ dùng thử các thẻ di chuột mới. Và nếu bạn không phải là người dùng VS Code, thì tôi có một tin rất vui cho bạn. Nhiều IDE được phân nhánh từ Code – OSS (phiên bản mã nguồn mở của VS Code) hoặc dựa vào cùng một máy chủ ngôn ngữ hỗ trợ thẻ di chuột HTML và CSS. Các IDE hạ nguồn này có thể mất vài tuần hoặc vài tháng để nâng cấp lên phiên bản mới nhất, nhưng khi nâng cấp, chúng sẽ tự động kế thừa Giao diện người dùng cơ bản mới:

  • VSCodium
  • Firebase Studio
  • Con trỏ
  • Lướt ván buồm
  • Zed
  • Eclipse Theia
  • Trae
  • Không gian mã trên GitHub
  • Không gian làm việc trên GitLab
  • Replit
  • StackBlitz (Bolt)

JetBrains cũng đang nỗ lực tích hợp Baseline với tất cả các IDE dựa trên IntelliJ của họ, bắt đầu từ WebStorm. Chúng tôi sẽ nói thêm về vấn đề này trong một bài đăng riêng trên blog. Hãy chú ý theo dõi.

Ngày càng có nhiều công cụ và tài nguyên dành cho nhà phát triển bổ sung chế độ hỗ trợ Baseline, và những tính năng tích hợp IDE mới này do VS Code dẫn đầu đặc biệt thú vị. Chúng ta dành rất nhiều thời gian trong các IDE và việc có sẵn dữ liệu Đường cơ sở này sẽ giúp quy trình phát triển của chúng ta trở nên rõ ràng hơn và nhất quán hơn giữa các công cụ. Để tìm hiểu thêm về Cơ sở và các hoạt động tích hợp công cụ khác như thế này, hãy xem hướng dẫn về Cơ sở của chúng tôi để biết thêm tài nguyên.