Visual Studio Code kini mendukung Baseline

Rick Viscomi

Dipublikasikan: 20 Mei 2025

Editor kode modern meningkatkan produktivitas dengan menyatukan alat dan dokumen referensi yang Anda butuhkan untuk membangun sesuatu secara efisien—itulah I dalam IDE. Salah satu peningkatan produktivitas di banyak IDE seperti Visual Studio Code (VS Code) adalah menampilkan informasi tambahan tentang fitur web saat Anda mengarahkan kursor ke fitur tersebut di editor. Informasi ini dengan berguna mencakup deskripsi fitur, browser yang didukung, panduan sintaksis, dan link untuk mempelajari lebih lanjut di MDN.

Informasi kompatibilitas browser sangat berguna dalam konteks IDE, karena Anda bisa mendapatkan masukan instan tentang seberapa interoperabel suatu fitur, hanya dengan mengarahkan kursor ke fitur tersebut. Anda dapat menggunakan informasi ini untuk memutuskan apakah suatu fitur memenuhi target dukungan browser Anda, apakah Anda perlu mengambil langkah-langkah defensif untuk meningkatkan atau polyfill secara progresif, atau menunda penggunaannya sama sekali.

Mengarahkan kursor ke properti CSS rasio aspek di versi VS Code sebelumnya, dengan dukungan browser yang dinyatakan dalam nomor versi: Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74
Mengarahkan kursor ke properti CSS aspect-ratio di VS Code versi sebelumnya, dengan dukungan browser yang dinyatakan dalam nomor versi:
"Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74"

Versi VS Code sebelumnya menyatakan informasi ini dalam hal nomor versi browser, mirip dengan yang mungkin Anda lihat dalam tabel kompatibilitas di situs seperti MDN, Can I Use, atau di sini di web.dev. Namun, kesamaan semua situs ini adalah bahwa mereka juga mulai meringkas lanskap dukungan browser yang kompleks menggunakan Baseline. Jadi, dalam upaya menyelaraskan VS Code dengan cara resource lain ini menyampaikan informasi kompatibilitas browser, VS Code kini juga mendukung Baseline.

Untuk mendapatkan UI Dasar baru, upgrade ke VS Code versi 1.100 atau yang lebih baru. Semuanya dapat langsung berfungsi—tidak memerlukan ekstensi atau konfigurasi tambahan.

Mengarahkan kursor ke properti CSS aspect-ratio di VS Code versi terbaru, dengan dukungan browser yang dinyatakan dalam istilah Baseline: Tersedia secara luas di browser utama (Baseline sejak 2021)
Mengarahkan kursor ke properti CSS aspect-ratio di VS Code versi terbaru, dengan dukungan browser yang dinyatakan dalam istilah Baseline:
"Tersedia secara luas di browser utama (Baseline sejak 2021)"

Saat mengarahkan kursor ke fitur web di VS Code versi terbaru, Anda akan melihat status Dasarnya. Untuk memberi Anda gambaran tentang berapa lama fitur ini telah didukung, VS Code juga akan memberi tahu Anda tahun fitur ini menjadi Dasar. Atau, untuk fitur yang belum menjadi Dasar, Anda akan mengetahui di browser mana fitur tersebut belum diimplementasikan sepenuhnya.

Pada versi VS Code sebelumnya, hal ini tidak begitu mudah. Memang perlu sedikit pemikiran untuk melihat daftar versi browser yang didukung dan mencari tahu browser mana yang tidak ada. Mungkin bagian yang paling sulit untuk diketahui adalah berapa lama fitur ini telah didukung di berbagai browser. Untuk itu, Anda perlu mengetahui kapan setiap versi dirilis, yang bukan merupakan pengetahuan umum. Untungnya, semua itu diperhitungkan dalam status dan tahun Dasar.

Kartu infografis untuk atribut HTML koreksi otomatis ketersediaan terbatas
Kartu infografis untuk atribut HTML autocorrect ketersediaan terbatas

Rilis ini juga menyertakan sesuatu yang benar-benar baru. Sebelumnya, Anda hanya dapat menampilkan data dukungan browser untuk properti CSS. Hal ini sangat berguna mengingat kecepatan luar biasa dalam peluncuran fitur CSS baru setiap tahunnya. Namun, ada banyak inovasi yang terjadi di HTML juga. Mulai rilis ini, VS Code juga akan mulai menampilkan informasi dukungan browser untuk elemen dan atribut HTML dalam hal status Dasarnya.

Misalnya, atribut input autocorrect diluncurkan di browser pertamanya, Firefox, baru beberapa bulan yang lalu. Anda akan senang karena bisa mendapatkan masukan langsung bahwa fitur tersebut memiliki ketersediaan terbatas, sehingga Anda bisa mendapatkan informasi lebih lanjut tentang tempat fitur tersebut akan atau tidak akan berfungsi. Dalam kasus khusus ini, tidak berbahaya di browser yang tidak didukung, jadi lanjutkan saja.

Mengarahkan kursor ke elemen HTML dialog Tersedia luas dan atribut popover Baru tersedia
Arahkan kursor ke elemen HTML dialog Tersedia luas dan atribut popover Baru tersedia

Fitur HTML lainnya seperti elemen dialog tidak mengalami penurunan kualitas sebaik autocorrect. Jadi, Anda dapat merasa yakin saat memanggil kartu info dialog dan melihat bahwa kartu tersebut memang telah menjadi Baseline sejak tahun 2022 dan dianggap Tersedia luas di seluruh browser utama. Dengan begitu, Anda akan merasa lebih percaya diri untuk menggunakan fitur yang sebelumnya mungkin Anda anggap terlalu canggih.

Popover API adalah contoh lain dari fitur HTML yang juga telah menjadi Baseline, tetapi baru sejak tahun 2024, sehingga masih dianggap Baru tersedia. Artinya, meskipun didukung oleh semua browser utama, fitur ini belum mencapai 2,5 tahun yang diperlukan untuk menjadi Tersedia luas. Jadi, Anda mungkin ingin melanjutkan dengan lebih berhati-hati sebelum meluncurkan fitur ini kepada semua pengguna.

Penyorotan ESLint HTML yang menunjukkan bahwa fitur koreksi otomatis belum menjadi Baseline, dan menekan peringatan tersebut dengan komentar
HTML ESLint yang menandai bahwa fitur autocorrect belum menjadi Baseline, dan menyembunyikan peringatan tersebut dengan komentar

Menyiapkan informasi ini di VS Code akan sangat meningkatkan produktivitas. Namun, bagaimana jika Anda bahkan tidak perlu mengarahkan kursor ke fitur untuk melihat apakah fitur tersebut termasuk dalam Baseline? Hal ini dapat dilakukan dengan alat terpisah, tetapi terkait: linter.

Misalnya, ekstensi ESLint untuk VS Code dapat melakukan linting pada file HTML dan CSS Anda serta menambahkan garis bawah berlekuk-lekuk pada fitur yang belum Baseline. Hal ini didukung oleh aturan use-baseline yang baru ditambahkan dari plugin HTML ESLint dan ESLint for CSS. Ada juga aturan serupa untuk Stylelint, jika Anda tertarik. Tentu saja, ini hanyalah salah satu dari banyak manfaat linter, tetapi hal ini menunjukkan seberapa baik linter melengkapi kartu info saat mengarahkan kursor yang diaktifkan Baseline baru.

Jika Anda adalah pengguna VS Code, kami harap Anda mencoba kartu info baru ini. Dan jika Anda bukan pengguna VS Code, ada kabar baik. Banyak IDE yang di-fork dari Code - OSS (versi open source VS Code) atau mengandalkan server bahasa yang sama yang mendukung kartu hover HTML dan CSS-nya. IDE hilir ini mungkin memerlukan waktu berminggu-minggu atau berbulan-bulan untuk mengupgrade ke versi terbaru, tetapi saat diupgrade, IDE tersebut akan mewarisi UI Dasar yang baru secara otomatis:

  • VSCodium
  • Firebase Studio
  • Kursor
  • Selancar Angin
  • Zed
  • Eclipse Theia
  • Trae
  • Codespace GitHub
  • Ruang kerja GitLab
  • Replit
  • StackBlitz (Bolt)

JetBrains juga berupaya mengintegrasikan Baseline dengan semua IDE berbasis IntelliJ, dimulai dengan WebStorm. Kami akan membahasnya lebih lanjut dalam postingan blog terpisah—tunggu saja.

Makin banyak alat dan resource developer yang menambahkan dukungan Baseline, dan integrasi IDE baru yang dipimpin oleh VS Code ini sangat menarik. Kita menghabiskan banyak waktu di IDE, dan memiliki data Dasar ini di ujung jari akan membantu memberikan kejelasan dan konsistensi lintas alat yang lebih besar pada alur kerja pengembangan kita. Untuk mempelajari lebih lanjut integrasi Baseline dan alat lainnya seperti ini, buka panduan Baseline kami untuk mendapatkan referensi lainnya.