「Visual Studio Code」に「Microsoft Edge」開発者機能を統合する拡張機能がv2.0.0に

「Microsoft Edge Tools for VS Code」v2.0.0

　米Microsoftは5月5日（現地時間）、「Visual Studio Code」用の拡張機能「Microsoft Edge Tools for VS Code」v2.0.0を公開した。エディター画面に「Microsoft Edge」の開発者ツール相当のツールを統合し、エディターから直接Webサイトをデバッグ可能。メジャーバージョンアップとなるv2.0.0では、既存機能の安定性向上と新機能の導入が行われている。

「Visual Studio Code」のエディター画面に「Microsoft Edge」の開発者ツール相当のツールを統合

　本バージョンでは、以下の2つの新機能が追加された。

Screencast V2

　開発中のWebサイトをプレビューするスクリーンキャスト機能が拡充され、さまざまな閲覧環境をエミュレートできるようになった。

　たとえば、初期状態ではさまざまな画面幅でプレビューを行う「レスポンシブ」モードになっているが、画面下のバーのデバイスリストから「iPhone 12 Pro」や「Samsung Galaxy S8+」を選択すると、そのデバイスの解像度での表示をエミュレーションできるようになった。

指定したデバイスでの表示をエミュレーション

　さらに、右下の「魔法の杖」アイコンを利用すれば、印刷モード、ダーク・ライトモードの切り替え、ハイコントラストモードが利用可能。Webページがぼやけて見えたり、特定の色が見えないといった色覚異常のエミュレーションも可能で、アクセシビリティに配慮したWebサイトを開発したい場合に役立つ。

色覚異常のエミュレーションも可能で、アクセシビリティに配慮したWebサイトを開発したい場合に役立つ

スタイルのソースマップ対応

　「Sass」などで出力されるソースマップをサポート。プロジェクトでソースマップを正しく設定すれば、開発者ツール側でスタイルを編集すると、それが「Sass」側にも反映される。

　そのほかにも、コンソール統合の問題を解決。CSSミラー編集が実験的機能を卒業し、正式な機能となった。コードに問題がある場合に、波状の下線でその個所と詳細を知らせるライブ問題レポート（live issue report）機能もアップデートされ、同時に「Internet Explorer」対応が削除された。

　「Microsoft Edge Tools for VS Code」は現在、拡張機能ライブラリ「Visual Studio Marketplace」から無償でダウンロード可能。「Visual Studio Code」内から直接インストールすることもできる。ソースコードは「MIT license」ライセンスで公開」されている。

　なお、利用には「Microsoft Edge 80」以降が必要。機能によってはより新しいバージョンが必要となることもある。