Visual Studio Code ahora admite Baseline

Rick Viscomi

Publicado el 20 de mayo de 2025

Los editores de código modernos aumentan la productividad, ya que reúnen las herramientas y la documentación de referencia que necesitas para compilar elementos de manera eficiente. Esta es la I de IDE. Una mejora de productividad en muchos IDE, como Visual Studio Code (VS Code), es mostrar información adicional sobre las funciones web a medida que te desplazas sobre ellas en el editor. Esta información incluye una descripción de la función, los navegadores compatibles, una guía de sintaxis y un vínculo para obtener más información en MDN.

La información de compatibilidad del navegador es especialmente útil en el contexto de un IDE, ya que puedes obtener comentarios instantáneos sobre la interoperabilidad de una función con solo colocar el cursor sobre ella. Puedes usar esta información para decidir si una función cumple con los objetivos de compatibilidad con el navegador, si necesitas tomar medidas defensivas para mejorarla progresivamente o agregarle un polyfill, o bien si debes posponer su uso por completo.

Las versiones anteriores de VS Code expresaban esta información en términos de números de versión del navegador, de forma similar a lo que podrías haber visto en las tablas de compatibilidad de sitios como MDN, Can I Use o aquí en web.dev. Sin embargo, lo que todos estos sitios tienen en común es que también comenzaron a resumir el complejo panorama de la compatibilidad con navegadores usando Baseline. Por lo tanto, en un esfuerzo por alinear VS Code con la forma en que estos otros recursos transmiten información sobre la compatibilidad del navegador, VS Code ahora también admite Baseline.

Para obtener la nueva IU de Baseline, actualiza a la versión 1.100 o posterior de VS Code. Todo funciona de inmediato, sin necesidad de extensiones ni configuraciones adicionales.

Cuando coloques el cursor sobre una función web en la versión más reciente de VS Code, verás su estado de Baseline. Además, para que sepas durante cuánto tiempo se admitió la función, VS Code también te indicará el año en que se convirtió en Baseline. O bien, para las funciones que aún no son de Baseline, te indicará en qué navegadores aún no se implementó por completo la función.

En versiones anteriores de VS Code, esto no era tan sencillo. Se requiere un poco de análisis para revisar una lista de versiones de navegadores compatibles y determinar qué navegadores faltan. Quizás la parte menos sencilla de determinar fue durante cuánto tiempo se admitió la función en los distintos navegadores. Para eso, deberías saber cuándo se lanzó cada versión, lo que no es exactamente un conocimiento común. Afortunadamente, todo eso se tiene en cuenta en el estado y el año de Baseline.

Esta versión también incluye algo completamente nuevo. Anteriormente, solo podías consultar los datos de compatibilidad del navegador para las propiedades de CSS. Esto fue especialmente útil dado el increíble ritmo al que se lanzan nuevas funciones de CSS cada año. Pero también hay mucha innovación en HTML. A partir de esta versión, VS Code también comenzará a mostrar información sobre la compatibilidad del navegador con los elementos y atributos HTML en términos de su estado de Baseline.

Por ejemplo, el atributo de entrada autocorrect se lanzó en su primer navegador, Firefox, hace solo un par de meses. Es bueno poder obtener comentarios inmediatos sobre la disponibilidad limitada de la función, de modo que puedas estar más informado sobre dónde funcionará o no. En este caso en particular, no causa daños en los navegadores no compatibles, así que puedes hacerlo.

Otras funciones de HTML, como el elemento dialog, no se degradan con la misma elegancia que autocorrect. Por lo tanto, es tranquilizador poder invocar la tarjeta de dialog y ver que, de hecho, es Baseline desde 2022 y se considera ampliamente disponible en los principales navegadores. Algo así debería darte la confianza para adoptar funciones que, de otro modo, podrías haber considerado demasiado vanguardistas.

La API de Popover es otro ejemplo de una función de HTML que también se convirtió en Baseline, pero solo desde 2024, por lo que aún se considera como recién disponible. Esto significa que, si bien es compatible con todos los navegadores principales, aún no se cumplieron los 2 años y medio necesarios para que esté disponible de forma generalizada. Por lo tanto, es posible que desees proceder con un poco más de precaución antes de lanzar esta función para todos tus usuarios.

Tener esta información lista en VS Code es un gran impulso para la productividad. Pero ¿y si ni siquiera tuvieras que colocar el cursor sobre una función para ver si es de Baseline? Esto es posible gracias a una herramienta independiente, pero relacionada: los linters.

Por ejemplo, la extensión de ESLint para VS Code puede analizar tus archivos HTML y CSS, y agregar subrayados ondulados a cualquier función que aún no sea de Baseline. Esto se basa en las reglas use-baseline agregadas recientemente de los complementos HTML ESLint y ESLint para CSS. También hay una regla similar para Stylelint, si te interesa. Por supuesto, este es solo uno de los muchos beneficios de los linters, pero demuestra lo bien que complementan las nuevas tarjetas de desplazamiento habilitadas para Baseline.

Si eres usuario de VS Code, espero que pruebes las nuevas tarjetas emergentes. Y si no eres usuario de VS Code, tengo muy buenas noticias. Muchos IDE se bifurcan desde Code-OSS (la versión de código abierto de VS Code) o se basan en los mismos servidores de lenguaje que potencian sus tarjetas de desplazamiento HTML y CSS. Estos IDEs posteriores pueden tardar semanas o meses en actualizarse a la versión más reciente, pero, cuando lo hagan, deberían heredar la nueva IU de Baseline automáticamente:

• VSCodium
• Firebase Studio
• Cursor
• Windsurf
• Zed
• Eclipse Theia
• Trae
• GitHub Codespaces
• Espacios de trabajo de GitLab
• Replit
• StackBlitz (Bolt)

JetBrains también está trabajando para integrar Baseline en todos sus IDE basados en IntelliJ, comenzando con WebStorm. Hablaremos más sobre eso en otra entrada de blog. Mantente al tanto.

Cada vez más herramientas y recursos para desarrolladores agregan compatibilidad con Baseline, y estas nuevas integraciones en el IDE lideradas por VS Code son especialmente emocionantes. Pasamos mucho tiempo en nuestros IDE, y tener estos datos de Baseline a nuestro alcance nos ayudará a brindar aún más claridad y coherencia entre herramientas a nuestros flujos de trabajo de desarrollo. Para obtener más información sobre Baseline y otras integraciones de herramientas como esta, consulta nuestra guía de Baseline para obtener más recursos.