Visual Studio Code теперь поддерживает Baseline

Rick Viscomi

Опубликовано: 20 мая 2025 г.

Современные редакторы кода позволяют значительно повысить производительность, объединяя инструменты и справочную документацию, необходимые для эффективной разработки — это буква I в аббревиатуре IDE. Одним из преимуществ многих IDE, таких как Visual Studio Code (VS Code), является отображение дополнительной информации о веб-функциях при наведении курсора на них в редакторе. Эта информация включает описание функции, поддерживаемые браузеры, руководство по синтаксису и ссылку на MDN для получения дополнительной информации.

Информация о совместимости с браузерами особенно полезна в контексте IDE, поскольку позволяет мгновенно получить оценку совместимости функции, просто наведя на неё курсор. Эту информацию можно использовать, чтобы решить, соответствует ли функция целям поддержки вашего браузера, нужно ли предпринять меры по её постепенному улучшению или полифиллу , или полностью отказаться от её использования.

В более ранних версиях VS Code эта информация выражалась в виде номеров версий браузеров, подобно тому, что вы могли видеть в таблицах совместимости на таких сайтах, как MDN, Can I Use или здесь, на web.dev. Но все эти сайты объединяет то, что они также начали суммировать сложную картину поддержки браузеров, используя Baseline . Поэтому, стремясь согласовать VS Code с тем, как эти ресурсы предоставляют информацию о совместимости браузеров, VS Code теперь также поддерживает Baseline .

Чтобы получить новый базовый пользовательский интерфейс, обновитесь до версии VS Code 1.100 или выше. Всё работает сразу — никаких расширений или дополнительных настроек не требуется.

При наведении курсора на веб-функцию в последней версии VS Code вы увидите её статус Baseline. Чтобы вы могли оценить, как долго функция поддерживается, VS Code также укажет год, когда она стала базовой. Для функций, которые ещё не стали базовой, будет указано, в каких браузерах она ещё не полностью реализована.

В более ранних версиях VS Code это было не так просто. Чтобы посмотреть список поддерживаемых версий браузеров и определить, каких браузеров не хватает, требуется немного поразмыслить. Пожалуй, самым сложным было выяснить, как долго функция поддерживается в разных браузерах. Для этого нужно знать дату выпуска каждой версии, что не так уж и очевидно! К счастью, всё это учитывается в базовом статусе и годе.

В этом выпуске также есть нечто совершенно новое. Раньше можно было получать данные о поддержке браузерами только для CSS-свойств. Это было особенно полезно, учитывая невероятную скорость, с которой каждый год появляются новые функции CSS. Но и в HTML происходит немало инноваций! С этого выпуска VS Code также начнёт отображать информацию о поддержке браузерами HTML-элементов и атрибутов в соответствии с их базовым статусом.

Например, функция autocorrect ввода появилась в первом браузере Firefox всего пару месяцев назад. Приятно сразу получать информацию об ограниченном доступе к этой функции, чтобы лучше понимать, где она будет работать, а где — нет. В данном конкретном случае она безвредна в неподдерживаемых браузерах, так что дерзайте!

Другие HTML-функции, такие как элемент dialog , не так изящно деградируют, как autocorrect . Поэтому приятно видеть, что при открытии карточки dialog она имеет статус Baseline с 2022 года и считается широкодоступной в основных браузерах. Это должно придать вам уверенности при использовании функций, которые вы могли бы счесть слишком передовыми.

Popover API — ещё один пример HTML-функции, которая также находится в базовой версии, но только с 2024 года, поэтому всё ещё считается недавно доступной. Это означает, что, хотя она поддерживается всеми основными браузерами, ей ещё не исполнилось 2,5 года, необходимых для того, чтобы стать широкодоступной. Поэтому вам стоит проявить осторожность, прежде чем предоставлять эту функцию всем своим пользователям.

Наличие этой информации под рукой в ​​VS Code значительно повышает производительность. Но что, если бы вам даже не нужно было наводить курсор на функцию, чтобы проверить, относится ли она к Baseline? Это стало возможным благодаря отдельному, но связанному инструменту: линтерам.

Например, расширение ESLint для VS Code может линтерировать HTML и CSS-файлы и добавлять волнистые подчёркивания к любым функциям, которые ещё не поддерживают Baseline. Это основано на недавно добавленных правилах use-baseline из плагинов HTML ESLint и ESLint для CSS . Аналогичное правило есть и для Stylelint , если вам это интересно. Конечно, это лишь одно из многих преимуществ линтеров, но оно показывает, насколько хорошо они дополняют новые всплывающие подсказки с поддержкой Baseline.

Если вы пользуетесь VS Code, надеюсь, вы попробуете новые всплывающие карточки. А если вы не пользуетесь VS Code, у меня для вас отличные новости. Многие IDE либо являются ответвлениями Code — OSS (версии VS Code с открытым исходным кодом), либо используют те же языковые серверы, что и HTML и CSS-визитки. Обновление этих IDE до последней версии может занять недели или месяцы, но после этого они должны автоматически унаследовать новый базовый пользовательский интерфейс:

• VSCodium
• Студия Firebase
• Курсор
• Виндсерфинг
• Зед
• Затмение Тейя
• Трей
• Кодовые пространства GitHub
• Рабочие пространства GitLab
• Повторить
• StackBlitz (Болт)

JetBrains также работает над интеграцией Baseline со всеми своими IDE на базе IntelliJ, начиная с WebStorm . Мы расскажем об этом подробнее в отдельной публикации в блоге — следите за новостями.

Всё больше инструментов и ресурсов для разработчиков поддерживают Baseline, и эти новые интеграции с IDE, основанные на VS Code, особенно интересны. Мы проводим так много времени в наших IDE, и наличие данных Baseline под рукой поможет нам добиться ещё большей ясности и согласованности между различными инструментами в наших рабочих процессах разработки. Чтобы узнать больше о Baseline и других подобных интеграциях, ознакомьтесь с нашим руководством по Baseline , где вы найдёте дополнительные ресурсы.