Visual Studio Code obsługuje teraz Baseline

Rick Viscomi

Data publikacji: 20 maja 2025 r.

Nowoczesne edytory kodu znacznie zwiększają produktywność, ponieważ łączą narzędzia i dokumentację referencyjną potrzebną do wydajnego tworzenia oprogramowania – to właśnie oznacza litera I w skrócie IDE. Jednym z ulepszeń zwiększających produktywność w wielu środowiskach IDE, takich jak Visual Studio Code (VS Code), jest wyświetlanie dodatkowych informacji o funkcjach internetowych po najechaniu na nie kursorem w edytorze. Zawiera ona opis funkcji, obsługiwane przeglądarki, przewodnik po składni i link do dodatkowych informacji w MDN.

Informacje o zgodności z przeglądarkami są szczególnie przydatne w kontekście IDE, ponieważ wystarczy najechać kursorem na funkcję, aby uzyskać natychmiastową informację o jej interoperacyjności. Na podstawie tych informacji możesz zdecydować, czy dana funkcja spełnia Twoje wymagania dotyczące obsługi przeglądarek, czy musisz podjąć działania ochronne, aby stopniowo ją ulepszać lub wypełniać, czy też w ogóle z niej zrezygnować.

Najechanie kursorem na właściwość CSS aspect-ratio we wcześniejszych wersjach VS Code, w których obsługa przeglądarki jest wyrażona w postaci numerów wersji: Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74
Najechaniu kursorem na właściwość CSS aspect-ratio w starszych wersjach VS Code, w których obsługa przeglądarki jest wyrażona w postaci numerów wersji:
„Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74”

Wcześniejsze wersje VS Code podawały te informacje w postaci numerów wersji przeglądarki, podobnie jak w tabelach zgodności na stronach takich jak MDN, Can I Use czy web.dev. Wszystkie te strony zaczęły jednak podsumowywać złożoną sytuację dotyczącą obsługi przeglądarek za pomocą linii bazowej. Aby dostosować VS Code do sposobu, w jaki inne zasoby przekazują informacje o kompatybilności z przeglądarkami, VS Code obsługuje teraz również Baseline.

Aby uzyskać nowy interfejs Baseline, uaktualnij VS Code do wersji 1.100 lub nowszej. Wszystko działa od razu – nie są potrzebne żadne rozszerzenia ani dodatkowa konfiguracja.

Najechanie kursorem na właściwość CSS aspect-ratio w najnowszej wersji VS Code, z informacją o obsłudze przez przeglądarki wyrażoną w kategoriach Baseline: szeroko dostępna w głównych przeglądarkach (Baseline od 2021 r.)
Po najechaniu kursorem na właściwość CSS aspect-ratio w najnowszej wersji VS Code, w której obsługa przeglądarek jest wyrażona w terminach Baseline:
„Widely available across major browsers (Baseline since 2021)” (Szeroko dostępna w głównych przeglądarkach (Baseline od 2021 r.))

Gdy najedziesz kursorem na funkcję internetową w najnowszej wersji VS Code, zobaczysz jej stan Baseline. Aby dać Ci wyobrażenie o tym, jak długo funkcja jest obsługiwana, VS Code poda też rok, w którym stała się funkcją bazową. W przypadku funkcji, które nie są jeszcze w stanie podstawowym, informuje, w których przeglądarkach nie są jeszcze w pełni wdrożone.

We wcześniejszych wersjach VS Code nie było to takie proste. Przejrzenie listy obsługiwanych wersji przeglądarek i ustalenie, których przeglądarek brakuje, wymaga trochę zastanowienia. Najtrudniejsze było ustalenie, jak długo ta funkcja jest obsługiwana w różnych przeglądarkach. Musisz wiedzieć, kiedy została wydana każda wersja, a to nie jest powszechnie znana informacja. Na szczęście wszystko to jest uwzględniane w statusie i roku bazowym.

Karta najazdowa dla atrybutu HTML autokorekty o ograniczonej dostępności
Karta najazdowa dla atrybutu HTML autocorrect o ograniczonej dostępności

Ta wersja zawiera też coś zupełnie nowego. Wcześniej można było wyświetlać dane o obsłudze w przeglądarce tylko w przypadku właściwości CSS. Było to szczególnie przydatne ze względu na niesamowite tempo, w jakim co roku pojawiają się nowe funkcje CSS. Ale w HTML też zachodzi wiele innowacji. Od tej wersji VS Code będzie też wyświetlać informacje o obsłudze elementów i atrybutów HTML przez przeglądarki w zakresie ich stanu Baseline.

Na przykład atrybut wejściowy autocorrect został wprowadzony w pierwszej przeglądarce, Firefox, zaledwie kilka miesięcy temu. Dobrze jest od razu otrzymywać informację, że funkcja jest dostępna w ograniczonym zakresie, dzięki czemu możesz dowiedzieć się, gdzie będzie działać, a gdzie nie. W tym konkretnym przypadku jest to nieszkodliwe w nieobsługiwanych przeglądarkach, więc możesz to zrobić.

Najechanie kursorem na element HTML okna „Szeroko dostępne” i atrybuty wyskakującego okienka „Nowo dostępne”
Najechanie kursorem na element HTML dialog Dostępne powszechnie i atrybuty popover Nowo dostępne

Inne funkcje HTML, takie jak element dialog, nie działają tak dobrze jak autocorrect. Dlatego warto wywołać dialog kartę najazdową i sprawdzić, że jest to funkcja Baseline od 2022 roku i jest ona powszechnie dostępna w głównych przeglądarkach. Dzięki temu możesz śmiało korzystać z funkcji, które wcześniej wydawały Ci się zbyt zaawansowane.

Interfejs Popover API to kolejny przykład funkcji HTML, która również jest w stanie Baseline, ale dopiero od 2024 roku, więc nadal jest uważana za nowo dostępną. Oznacza to, że chociaż jest obsługiwany przez wszystkie główne przeglądarki, nie minęło jeszcze 2,5 roku, które są wymagane, aby stał się powszechnie dostępny. Zanim udostępnisz tę funkcję wszystkim użytkownikom, zachowaj ostrożność.

Podświetlanie w ESLint w HTML, że funkcja automatycznej korekty nie jest jeszcze w wersji podstawowej, i pomijanie tego ostrzeżenia za pomocą komentarza
Podświetlenie w HTML ESLint wskazujące, że funkcja autocorrect nie jest jeszcze w stanie Baseline, i pomijanie tego ostrzeżenia za pomocą komentarza

Dostępność tych informacji w VS Code znacznie zwiększa produktywność. A co, jeśli nie musisz nawet najeżdżać kursorem na funkcję, aby sprawdzić, czy jest ona częścią Baseline? Jest to możliwe dzięki osobnemu, ale powiązanemu narzędziu: linterom.

Na przykład rozszerzenie ESLint do VS Code może sprawdzać pliki HTML i CSS oraz dodawać faliste podkreślenia do wszystkich funkcji, które nie są jeszcze w wersji Baseline. Jest to możliwe dzięki dodanym niedawno use-baseline regułom z wtyczek HTML ESLint i ESLint for CSS. Podobna reguła obowiązuje też w przypadku Stylelint. To oczywiście tylko jedna z wielu zalet linterów, ale pokazuje, jak dobrze uzupełniają one nowe karty najazdowe z włączoną funkcją Baseline.

Jeśli korzystasz z VS Code, mam nadzieję, że wypróbujesz nowe karty informacyjne. A jeśli nie korzystasz z VS Code, mam dla Ciebie bardzo dobrą wiadomość. Wiele środowisk IDE jest rozwidleniem Code – OSS (wersji VS Code o otwartym kodzie źródłowym) lub korzysta z tych samych serwerów językowych, które obsługują karty najazdowe HTML i CSS. Uaktualnienie tych środowisk IDE do najnowszej wersji może potrwać tygodnie lub miesiące, ale gdy to nastąpi, powinny one automatycznie przejąć nowy interfejs Baseline:

  • VSCodium
  • Firebase Studio
  • Kursor
  • Windsurfing
  • Zed
  • Eclipse Theia
  • Trae
  • GitHub Codespaces
  • Obszary robocze GitLab
  • Replit
  • StackBlitz (Bolt)

JetBrains pracuje też nad integracją Baseline ze wszystkimi środowiskami IDE opartymi na IntelliJ, zaczynając od WebStorm. Więcej informacji na ten temat znajdziesz w osobnym poście na blogu.

Coraz więcej narzędzi i zasobów dla programistów dodaje obsługę Baseline, a te nowe integracje IDE prowadzone przez VS Code są szczególnie interesujące. W IDE spędzamy dużo czasu, a dostęp do danych Baseline pomoże nam jeszcze bardziej ujednolicić i usprawnić procesy programistyczne. Więcej informacji o Baseline i innych integracjach narzędzi znajdziesz w naszym przewodniku Baseline.