Visual Studio Code でベースラインがサポートされるようになりました

Rick Viscomi

公開日: 2025 年 5 月 20 日

最新のコードエディタは、効率的に構築するために必要なツールとリファレンス ドキュメントを統合することで、生産性を大幅に向上させます。これが IDE の I です。Visual Studio Code（VS Code）などの多くの IDE で生産性を高める機能の 1 つに、エディタでウェブ機能にカーソルを合わせると、その機能に関する追加情報が表示されることがあります。この情報には、機能の説明、サポートされているブラウザ、構文ガイド、MDN で詳細を確認するためのリンクが含まれています。

ブラウザの互換性情報は、IDE のコンテキストで特に役立ちます。機能にカーソルを合わせるだけで、その機能の相互運用性に関するフィードバックをすぐに得られるからです。この情報を使用して、機能がブラウザのサポート目標を満たしているかどうか、プログレッシブ エンハンスメントやポリフィルを行うための防御策を講じる必要があるかどうか、またはその機能の使用を完全に控えるかどうかを判断できます。

以前のバージョンの VS Code では、この情報はブラウザのバージョン番号で表現されていました。これは、MDN、Can I Use、web.dev などのサイトの互換性表で見たことがあるかもしれません。これらのサイトに共通しているのは、Baseline を使用して、ブラウザ サポートの複雑な状況を要約し始めたことです。そこで、VS Code を他のリソースがブラウザの互換性情報を伝える方法に合わせるため、VS Code でも Baseline がサポートされるようになりました。

新しい Baseline UI を利用するには、VS Code バージョン 1.100 以降にアップグレードしてください。すべてがすぐに使用できます。拡張機能や追加の構成は必要ありません。

最新バージョンの VS Code でウェブ機能にカーソルを合わせると、そのベースライン ステータスが表示されます。また、この機能がどのくらいサポートされているかを知るために、VS Code はこの機能がベースラインになった年も表示します。また、まだ Baseline になっていない機能については、どのブラウザでまだ完全に実装されていないかを確認できます。

以前のバージョンの VS Code では、これは簡単ではありませんでした。サポートされているブラウザのバージョンの一覧を見て、どのブラウザが欠落しているかを判断するには、少し考える必要があります。最もわかりにくいのは、この機能がブラウザ間でどのくらいの期間サポートされているかという点でした。そのためには、各バージョンのリリース日を知る必要がありますが、これは一般的に知られていることではありません。幸いなことに、これらはすべてベースラインのステータスと年度に反映されています。

今回のリリースには、まったく新しいものも含まれています。以前は、CSS プロパティのブラウザ サポート データのみを表示できました。これは、毎年新しい CSS 機能が驚くべきペースでリリースされていることを考えると、特に有用でした。しかし、HTML でも多くのイノベーションが起こっています。今回のリリースから、VS Code では HTML 要素と属性のブラウザ サポート情報がベースライン ステータスで表示されるようになります。

たとえば、autocorrect 入力属性は、数か月前に最初のブラウザである Firefox でリリースされました。機能の利用が制限されているというフィードバックをすぐに得られるため、その機能がどこで動作するのか、どこで動作しないのかをより詳しく把握できます。この特定のケースでは、サポートされていないブラウザでも問題ありません。

dialog 要素などの他の HTML 機能は、autocorrect ほど優雅に劣化しません。そのため、dialog ホバーカードを呼び出して、実際には 2022 年から Baseline であり、主要なブラウザで広く利用可能と見なされていることを確認できると安心です。このような結果が得られれば、最先端すぎて採用できないと思っていた機能も自信を持って採用できるようになります。

Popover API も、Baseline になった HTML 機能の例ですが、2024 年からなので、まだ Newly available と見なされます。つまり、すべての主要なブラウザでサポートされていますが、広く利用可能になるために必要な 2 年半にはまだ達していません。そのため、この機能をすべてのユーザーにリリースする前に、もう少し慎重に進めることをおすすめします。

この情報を VS Code で簡単に確認できるため、生産性が大幅に向上します。しかし、機能が Baseline かどうかを確認するために、機能にカーソルを合わせる必要がない場合はどうでしょうか。これは、別の関連ツールであるリンターによって実現されています。

たとえば、VS Code の ESLint 拡張機能を使用すると、HTML ファイルと CSS ファイルをリントし、まだ Baseline になっていない機能に波線の下線を追加できます。これは、HTML ESLint プラグインと ESLint for CSS プラグインから最近追加された use-baseline ルールによって実現されています。Stylelint にも同様のルールがあります。もちろん、これはリンターの多くのメリットの 1 つにすぎませんが、新しいベースライン対応のホバーカードを補完するうえで、リンターがどれほど優れているかを示しています。

VS Code をご利用の場合は、新しいホバーカードをぜひお試しください。VS Code を使用していない方にも、朗報があります。多くの IDE は、Code - OSS（VS Code のオープンソース バージョン）からフォークされたものか、HTML と CSS のホバーカードを駆動する同じ言語サーバーに依存しています。これらのダウンストリーム IDE が最新バージョンにアップグレードされるまでに数週間から数か月かかることがありますが、アップグレードされると、新しい Baseline UI が自動的に継承されます。

• VSCodium
• Firebase Studio
• Cursor
• Windsurf
• Zed
• Eclipse Theia
• Trae
• GitHub Codespaces
• GitLab ワークスペース
• Replit
• StackBlitz（Bolt）

JetBrains は、WebStorm を皮切りに、すべての IntelliJ ベースの IDE と Baseline の統合にも取り組んでいます。これについては、別のブログ投稿で詳しく説明しますので、ご期待ください。

Baseline をサポートするデベロッパー ツールとリソースが増えており、特に VS Code が主導する新しい IDE 統合は非常に楽しみです。IDE で多くの時間を費やしているため、このベースライン データをすぐに利用できることで、開発ワークフローの透明性とツール間の整合性がさらに高まります。Baseline やその他のツール統合について詳しくは、Baseline ガイドでその他のリソースをご覧ください。