Visual Studio Code artık referans değerlerini destekliyor

Rick Viscomi

Yayınlanma tarihi: 20 Mayıs 2025

Modern kod düzenleyiciler, verimli bir şekilde geliştirme yapmanız için gereken araçları ve referans belgelerini bir araya getirerek üretkenliği önemli ölçüde artırır. Bu, IDE'deki I'dır. Visual Studio Code (VS Code) gibi birçok IDE'de üretkenliği artıran bir özellik, web özelliklerinin üzerine düzenleyicide geldiğinizde bu özelliklerle ilgili ek bilgiler göstermesidir. Bu bilgiler arasında özellik açıklaması, desteklenen tarayıcılar, söz dizimi kılavuzu ve MDN'de daha fazla bilgi edinmek için bir bağlantı yer alır.

Tarayıcı uyumluluğu bilgileri, bir özelliğin üzerine gelerek ne kadar birlikte çalışabilir olduğu hakkında anında geri bildirim alabileceğiniz için özellikle bir IDE bağlamında kullanışlıdır. Bu bilgileri kullanarak bir özelliğin tarayıcı desteği hedeflerinizi karşılayıp karşılamadığına, kademeli olarak geliştirmek veya polyfill yapmak için savunma amaçlı adımlar atmanız gerekip gerekmediğine ya da özelliği tamamen kullanmaktan vazgeçmeniz gerekip gerekmediğine karar verebilirsiniz.

Tarayıcı desteği sürüm numaralarıyla ifade edilen VS Code'un önceki sürümlerinde en-boy oranı CSS özelliğinin üzerine gelme: Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74
VS Code'un önceki sürümlerinde aspect-ratio CSS özelliğinin üzerine gelindiğinde tarayıcı desteği sürüm numaralarıyla ifade edilir:
"Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74"

VS Code'un önceki sürümlerinde bu bilgiler, MDN, Can I Use veya web.dev gibi sitelerdeki uyumluluk tablolarında gördüğünüz gibi tarayıcı sürüm numaraları şeklinde ifade ediliyordu. Ancak bu sitelerin ortak noktası, tarayıcı desteğinin karmaşık yapısını Baseline kullanarak özetlemeye başlamalarıdır. Bu nedenle, VS Code'u diğer kaynakların tarayıcı uyumluluğu bilgilerini aktarma şekliyle uyumlu hale getirmek için VS Code artık Baseline'ı da destekliyor.

Yeni Baseline kullanıcı arayüzünü edinmek için VS Code'u 1.100 veya daha yeni bir sürüme yükseltin. Her şey kullanıma hazırdır. Uzantı veya ek yapılandırma gerekmez.

VS Code'un en son sürümünde en-boy oranı CSS özelliğinin üzerine gelindiğinde, tarayıcı desteği Baseline (2021'den beri) açısından ifade ediliyor: Büyük tarayıcılarda yaygın olarak kullanılabilir.
Tarayıcı desteği, Baseline açısından ifade edilerek VS Code'un en son sürümünde aspect-ratio CSS özelliğinin üzerine gelindiğinde:
"Büyük tarayıcılarda yaygın olarak kullanılabilir (2021'den beri Baseline)"

VS Code'un en son sürümünde bir web özelliğinin üzerine geldiğinizde bu özelliğin Baseline durumunu görürsünüz. VS Code, özelliğin ne kadar süredir desteklendiğini anlamanız için temel özellik haline geldiği yılı da belirtir. Henüz Baseline olmayan özellikler için ise özelliğin hangi tarayıcılarda tam olarak uygulanmadığı belirtilir.

VS Code'un önceki sürümlerinde bu işlem bu kadar kolay değildi. Desteklenen tarayıcı sürümlerinin listesine bakıp hangi tarayıcıların eksik olduğunu anlamak biraz zaman alabilir. Belki de en zor kısım, özelliğin tarayıcılarda ne kadar süredir desteklendiğini anlamaktı. Bunun için her sürümün ne zaman yayınlandığını bilmeniz gerekir. Bu bilgi herkes tarafından bilinmez. Neyse ki tüm bunlar, Temel statü ve yıla dahil edilir.

Sınırlı kullanılabilirlik otomatik düzeltme HTML özelliği için fareyle üzerine gelme kartı
Sınırlı stok durumu autocorrect HTML özelliği için fareyle üzerine gelme kartı

Bu sürümde tamamen yeni bir özellik de yer alıyor. Daha önce yalnızca CSS özellikleri için tarayıcı desteği verilerini alabiliyordunuz. Bu, her yıl yeni CSS özelliklerinin inanılmaz bir hızla kullanıma sunulduğu göz önüne alındığında özellikle yararlıydı. Ancak HTML'de de birçok yenilik yaşanıyor. Bu sürümden itibaren VS Code, HTML öğeleri ve özelliklerinin Baseline durumuyla ilgili tarayıcı desteği bilgilerini de göstermeye başlayacak.

Örneğin, autocorrect giriş özelliği, ilk tarayıcısı olan Firefox'ta yalnızca birkaç ay önce kullanıma sunuldu. Özelliğin sınırlı kullanılabilirliğe sahip olduğuna dair anında geri bildirim almak, özelliğin nerede çalışıp nerede çalışmayacağı konusunda daha bilinçli olmanızı sağlar. Bu durumda, desteklenmeyen tarayıcılarda zararsızdır. Bu nedenle, bu özelliği kullanabilirsiniz.

Widely available dialog HTML element (Genel kullanıma sunulan iletişim kutusu HTML öğesi) ve Newly available popover attributes (Yeni kullanıma sunulan pop-over özellikleri) üzerinde fareyle gezinme
Yaygın olarak kullanılabilen dialog HTML öğesinin ve yeni kullanıma sunulan popover özelliklerinin üzerine gelme

autocorrect öğesi kadar sorunsuz bir şekilde bozulmayan dialog öğesi gibi diğer HTML özellikleri. Bu nedenle, dialog bilgi kartını çağırıp 2022'den beri Baseline olduğunu ve büyük tarayıcılarda yaygın olarak kullanılabildiğini görmek rahatlatıcıdır. Bu tür bir yaklaşım, aksi takdirde çok yeni olduğunu düşünebileceğiniz özellikleri kullanma konusunda size güven verebilir.

Popover API, Baseline olarak kabul edilen ancak yalnızca 2024'ten beri Baseline olan bir HTML özelliğine başka bir örnektir. Bu nedenle, Popover API hâlâ Yeni kullanıma sunulan özellikler arasında yer alır. Bu, tüm büyük tarayıcılar tarafından desteklenmesine rağmen, yaygın olarak kullanılabilir hale gelmek için gereken 2,5 yıllık sürenin henüz dolmadığı anlamına gelir. Bu nedenle, bu özelliği tüm kullanıcılarınıza sunmadan önce biraz daha dikkatli olmanız gerekebilir.

Otomatik düzeltme özelliğinin henüz Baseline olmadığına dair HTML ESLint vurgulaması ve bu uyarıyı yorumla bastırma
autocorrect özelliğinin henüz Baseline olmadığına dair HTML ESLint vurgulaması ve bu uyarıyı yorumla bastırma

Bu bilgilerin VS Code'da hazır bulunması, üretkenliği büyük ölçüde artırır. Peki, bir özelliğin Baseline olup olmadığını görmek için üzerine gelmeniz gerekmeseydi? Bu, ayrı ancak ilgili bir araç olan linters ile mümkün olur.

Örneğin, VS Code için ESLint uzantısı, HTML ve CSS dosyalarınızı lint edebilir ve henüz Baseline olmayan tüm özelliklere dalgalı alt çizgiler ekleyebilir. Bu özellik, kısa süre önce eklenen use-baseline kuralları tarafından desteklenir. Bu kurallar, HTML ESLint ve CSS için ESLint eklentilerinden alınmıştır. İlginizi çekiyorsa Stylelint için de benzer bir kural vardır. Elbette bu, linter'ların birçok avantajından yalnızca biridir ancak yeni Baseline özellikli fareyle üzerine gelme kartlarını ne kadar iyi tamamladığını gösterir.

VS Code kullanıcısıysanız yeni bilgi kutucuklarını denemenizi öneririz. VS Code kullanıcısı değilseniz de size çok iyi bir haberim var. Birçok IDE, Code - OSS'den (VS Code'un açık kaynak sürümü) çatallanmıştır veya HTML ve CSS yer imi kartlarını destekleyen aynı dil sunucularını kullanır. Bu aşağı akış IDE'lerinin en son sürüme yükseltilmesi haftalar veya aylar sürebilir. Ancak yükseltme yapıldığında yeni Baseline kullanıcı arayüzünü otomatik olarak devralmaları gerekir:

  • VSCodium
  • Firebase Studio
  • İmleç
  • Rüzgar Sörfü
  • Zed
  • Eclipse Theia
  • Trae
  • GitHub kod alanları
  • GitLab çalışma alanları
  • Replit
  • StackBlitz (Bolt)

JetBrains, Baseline'ı WebStorm'dan başlayarak IntelliJ tabanlı tüm IDE'leriyle entegre etmek için de çalışıyor. Bu konuyla ilgili daha fazla bilgiyi ayrı bir blog yayınında paylaşacağız. Bizi takip etmeye devam edin.

Giderek daha fazla geliştirici aracı ve kaynağı Baseline desteği ekliyor. VS Code'un öncülüğünde yapılan bu yeni IDE entegrasyonları özellikle heyecan verici. IDE'lerimizde çok fazla zaman geçiriyoruz. Bu nedenle, bu temel verilerin parmaklarımızın ucunda olması, geliştirme iş akışlarımıza daha fazla netlik ve araçlar arası tutarlılık getirmemize yardımcı olacaktır. Baseline ve bu gibi diğer araç entegrasyonları hakkında daha fazla bilgi edinmek için Baseline rehberimize göz atarak daha fazla kaynak bulabilirsiniz.