O Visual Studio Code agora oferece suporte à linha de base

Rick Viscomi

Publicado em: 20 de maio de 2025

Os editores de código modernos aumentam muito a produtividade ao reunir as ferramentas e os documentos de referência necessários para criar coisas com eficiência. É o I de IDE. Um aprimoramento de produtividade em muitos ambientes de desenvolvimento integrado, como o Visual Studio Code (VS Code), é mostrar mais informações sobre recursos da Web quando você passa o cursor sobre eles no editor. Essas informações incluem uma descrição do recurso, navegadores compatíveis, um guia de sintaxe e um link para saber mais no MDN.

As informações de compatibilidade do navegador são especialmente úteis no contexto de uma IDE, porque você recebe feedback instantâneo sobre a interoperabilidade de um recurso apenas passando o cursor sobre ele. Você pode usar essas informações para decidir se um recurso atende às metas de suporte do navegador, se é necessário tomar medidas de defesa para melhorar ou fazer polyfill progressivamente ou se é melhor não usar o recurso.

As versões anteriores do VS Code expressavam essas informações em termos de números de versão do navegador, semelhante ao que você pode ter visto em tabelas de compatibilidade em sites como MDN, Can I Use ou aqui no web.dev. Mas o que todos esses sites têm em comum é que eles também começaram a resumir o cenário complexo de suporte a navegadores usando o Baseline. Para alinhar o VS Code à forma como esses outros recursos transmitem informações de compatibilidade com navegadores, o VS Code agora também oferece suporte à Baseline.

Para acessar a nova interface de base, faça upgrade para a versão 1.100 ou mais recente do VS Code. Tudo funciona sem precisar de extensões ou configurações extras.

Ao passar o cursor sobre um recurso da Web na versão mais recente do VS Code, você verá o status da linha de base. Para você ter uma ideia de quanto tempo o recurso é compatível, o VS Code também informa o ano em que ele se tornou um recurso de referência. Ou, para recursos que ainda não são de linha de base, ele informa em quais navegadores o recurso ainda não foi totalmente implementado.

Em versões anteriores do VS Code, isso não era tão simples. É preciso pensar um pouco para analisar uma lista de versões de navegadores compatíveis e descobrir quais estão faltando. Talvez a parte menos direta de descobrir tenha sido por quanto tempo o recurso foi compatível com os navegadores. Para isso, você precisa saber quando cada versão foi lançada, o que não é exatamente de conhecimento geral. Felizmente, tudo isso é considerado no status e no ano de base.

Esta versão também inclui algo completamente novo. Antes, só era possível acessar dados de compatibilidade do navegador para propriedades de CSS. Isso foi especialmente útil devido ao ritmo incrível em que novos recursos de CSS são lançados todos os anos. Mas também há muita inovação acontecendo em HTML. A partir desta versão, o VS Code também vai começar a mostrar informações de suporte do navegador para elementos e atributos HTML em termos de status de linha de base.

Por exemplo, o atributo de entrada autocorrect foi lançado no primeiro navegador, o Firefox, há apenas alguns meses. É bom receber feedback imediato sobre a disponibilidade limitada do recurso para saber onde ele vai ou não funcionar. Nesse caso específico, ele não causa problemas em navegadores não compatíveis. Então, pode usar!

Outros recursos HTML, como o elemento dialog, não são degradados tão bem quanto autocorrect. É reconfortante poder invocar o dialog card de passar o cursor e ver que ele é, de fato, Baseline desde 2022 e é considerado amplamente disponível nos principais navegadores. Algo assim dá confiança para adotar recursos que você talvez achasse muito modernos.

A API Popover é outro exemplo de um recurso HTML que também foi Baseline, mas apenas desde 2024. Portanto, ainda é considerado "Recém-disponível". Isso significa que, embora seja compatível com todos os principais navegadores, ele ainda não tem os 2,5 anos necessários para ficar disponível para todos. Portanto, é recomendável ter um pouco mais de cuidado antes de lançar esse recurso para todos os usuários.

Ter essas informações prontas no VS Code aumenta muito a produtividade. Mas e se você não precisasse nem passar o cursor sobre um recurso para saber se ele é de base? Isso é possível com uma ferramenta separada, mas relacionada: os linters.

Por exemplo, a extensão ESLint para VS Code pode analisar seus arquivos HTML e CSS e adicionar sublinhados ondulados a recursos que ainda não estão na Baseline. Isso é feito pelas regras use-baseline adicionadas recentemente dos plug-ins HTML ESLint e ESLint para CSS. Há uma regra semelhante para o Stylelint, se for do seu interesse. É claro que esse é apenas um dos muitos benefícios dos linters, mas mostra como eles complementam bem os cards flutuantes ativados por linha de base.

Se você usa o VS Code, espero que teste os novos cards de informações. E se você não usa o VS Code, tenho uma ótima notícia. Muitos ambientes de desenvolvimento integrado são bifurcados do Code - OSS (a versão de código aberto do VS Code) ou dependem dos mesmos servidores de linguagem que alimentam os cards flutuantes HTML e CSS. Essas IDEs downstream podem levar semanas ou meses para fazer upgrade para a versão mais recente, mas, quando isso acontecer, elas vão herdar automaticamente a nova interface do usuário de referência:

• VSCodium
• Firebase Studio
• Cursor
• Windsurf
• Zed
• Eclipse Theia
• Trae
• GitHub Codespaces
• Espaços de trabalho do GitLab
• Replit
• StackBlitz (Bolt)

A JetBrains também está trabalhando para integrar o Baseline a todos os ambientes de desenvolvimento integrado baseados no IntelliJ, começando pelo WebStorm. Vamos falar mais sobre isso em uma postagem separada no blog. Fique de olho.

Cada vez mais ferramentas e recursos para desenvolvedores estão adicionando suporte à linha de base, e essas novas integrações de IDE lideradas pelo VS Code são especialmente interessantes. Passamos muito tempo nas nossas IDEs, e ter esses dados de valor de referência ao nosso alcance vai ajudar a trazer ainda mais clareza e consistência entre ferramentas para nossos fluxos de trabalho de desenvolvimento. Para saber mais sobre o Baseline e outras integrações de ferramentas como essa, acesse nosso guia Baseline para mais recursos.