Publicado: 20 de maio de 2025

Os editores de código modernos desbloqueiam tanta produtividade, reunindo as ferramentas e os documentos de referência que você precisa para criar coisas com eficiência – é o I na IDE. Um aprimoramento de produtividade em muitos ides como Código do Visual Studio (VS Code) está mostrando informações adicionais sobre os recursos da Web enquanto você passa sobre eles no editor. Essas informações incluem uma descrição do recurso, navegadores suportados, um guia de sintaxe e um link para saber mais sobre o MDN.

As informações de compatibilidade do navegador são especialmente úteis no contexto de um IDE, porque você pode obter feedback instantâneo sobre o quão interoperável é um recurso, apenas pairando sobre ele. Você pode usar essas informações para decidir se um recurso atende às metas de suporte do navegador, se você precisa tomar medidas defensivas para aprimorá -lo ou poli -las progressivamente ou adiar o uso inteiramente.

As versões anteriores do código VS expressaram essas informações em termos de números de versão do navegador, semelhantes ao que você pode ter visto nas tabelas de compatibilidade em sites como o MDN, Posso usarou 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 do suporte do navegador usando Linha de base. Portanto, em um esforço para alinhar contra o código com a maneira como esses outros recursos transmitem informações de compatibilidade do navegador, O código vs agora também suporta linha de base.

Para obter a nova interface do usuário da linha de base, atualize para o código VS versão 1.100 ou mais recente. Tudo funciona fora da caixa – sem extensões ou configuração extra necessária.

Quando você passa o mouse sobre um recurso da Web na versão mais recente do código VS, verá seu status de linha de base. E para dar uma sensação por quanto tempo o recurso foi suportado, o código VS também informará o ano em que se tornou a linha de base. Ou, para recursos que ainda não estão na linha de base, ele dirá em quais navegadores o recurso ainda não está totalmente implementado.

Nas versões anteriores do código VS, isso não era tão direto. É preciso um pouco de pensamento para olhar para uma lista de versões do navegador suportado e descobrir quais navegadores estão faltando. Talvez a parte menos direta a descobrir foi quanto tempo o recurso foi suportado entre os navegadores. Para isso, você precisaria saber quando cada versão foi lançada, o que não é exatamente conhecimento comum! Felizmente, tudo isso é considerado no status de linha de base e no ano.

Este lançamento também inclui algo completamente novo. Anteriormente, você só seria capaz de extrair dados de suporte ao navegador para propriedades CSS. Isso foi especialmente útil, dado o ritmo incrível no qual os novos recursos do CSS são o envio todos os anos. Mas há muita inovação acontecendo no HTML também! A partir desta versão, o código VS também começará a mostrar informações de suporte ao navegador para elementos e atributos HTML em termos de seu status de linha de base.

Por exemplo, o autocorrect Atributo de entrada enviado em seu primeiro navegador, o Firefox, apenas alguns meses atrás. É bom poder obter o feedback imediato de que o recurso tenha disponibilidade limitada, para que você possa ser mais informado sobre onde ele funcionará ou não funcionará. Nesse caso em particular, é inofensivo em navegadores não suportados, então vá em frente!

Outros recursos HTML como o dialog elemento não se degradam tão graciosamente quanto autocorrect. Portanto, é reconfortante poder invocar o dialog Hovercard e veja que ele é de fato basal desde 2022 e é considerado amplamente disponível nos principais navegadores. Algo assim deve dar a você a confiança para adotar recursos que você poderia ter pensado que eram de ponta.

O API de popover é outro exemplo de um recurso HTML que também tem sido base, mas apenas desde 2024, por isso ainda é considerado recentemente disponível. Isso significa que, embora seja apoiado por todos os principais navegadores, não foram os 2,5 anos necessários para se tornar amplamente disponíveis. Portanto, você pode prosseguir com um pouco mais de cautela antes de enviar esse recurso para todos os seus usuários.

Ter essas informações prontas no Código VS é um ótimo aumento de produtividade. Mas e se você nem precisasse pairar sobre um recurso para ver se é a linha de base? Isso é possível por uma ferramenta separada, mas relacionada: linters.

Por exemplo, o Extensão Eslint Para o código VS, pode fazer com que os arquivos HTML e CSS e adicionar sublimes ondulados a quaisquer recursos que ainda não estejam basais. Isso é alimentado pelo recentemente adicionado use-baseline regras do Html eslint e Eslint para CSS plugins. Existe uma regra semelhante para Stylelint Além disso, se é isso que você gosta. Obviamente, este é apenas um dos muitos benefícios dos linheiros, mas mostra como eles complementam bem os novos hovercards habilitados para a base.

Se você é um usuário do Code VS, espero que você experimente os novos HoverCards. E se você não é um usuário do VS Code, tenho algumas notícias muito boas. Muitos Ides são bifurcados de Código – OSS (a versão de código aberto do código VS) ou confie nos mesmos servidores de idiomas que alimentam seus hovercards HTML e CSS. Esses IDEs a jusante podem levar semanas ou meses para atualizar para a versão mais recente, mas quando o fizerem, eles devem herdar a nova interface do usuário da linha de base automaticamente:

• Vscodium
• Firebase Studio
• Cursor
• Windsurfing
• Zed
• Eclipse Theia
• Trae
• Github Codespaces
• Espaços de trabalho do GitLab
• Replite
• Stackblitz (parafuso)

JetBrains também está trabalhando para integrar a linha de base com todos os seus IDEs baseados em Intellij, começando com Webstorm. Teremos mais a dizer sobre isso em uma postagem de blog separada – fique sintonizada.

Cada vez mais ferramentas e recursos do desenvolvedor estão adicionando suporte de linha de base, e essas novas integrações de IDE lideradas pelo código VS são especialmente emocionantes. Passamos muito tempo em nossos IDEs, e ter esses dados de linha de base na ponta dos dedos ajudará a trazer ainda mais clareza e consistência cruzada aos nossos fluxos de trabalho de desenvolvimento. Para saber mais sobre a linha de base e outras integrações de ferramentas como essa, acesse nosso guia de linha de base para obter mais recursos.