🚀 VS Code で で入手しましょう！

2021年5月 (バージョン 1.57)

アップデート 1.57.1: このアップデートでは、以下のissueに対処しています。

ワークスペースの信頼機能は、CVE-2021-34529に対処します。

ダウンロード: Windows: x64 Arm64 | Mac: Universal Intel シリコン | Linux: deb rpm tarball Arm snap

Visual Studio Code 2021年5月リリースへようこそ。このバージョンには多くのアップデートが含まれており、皆様に気に入っていただけることを願っています。主なハイライトは以下のとおりです。

これらのリリースノートをオンラインで読む場合は、code.visualstudio.com の 更新情報にアクセスしてください。

VS Code チームのリリースパーティーで、このバージョンの新機能のハイライトをご覧ください。イベントの録画は、YouTube チャンネルでご覧いただけます。

Insiders: 最新機能をいち早く試したいですか？毎晩更新される Insiders ビルドをダウンロードして、最新のアップデートをすぐにお試しください。

ワークベンチ

ワークスペースの信頼

Visual Studio Code はセキュリティを重視しており、ソースや作成者に関係なく、安全にコードを閲覧および編集できるように支援したいと考えています。ワークスペースの信頼機能を使用すると、プロジェクトフォルダーで自動コード実行を許可するか制限するかを決定できます。

Trust this folder dialog

注意: 不安な場合は、フォルダーを制限付きモードのままにしてください。後でいつでも信頼を有効にできます。

安全なコード閲覧

パブリックリポジトリやファイル共有で非常に多くのソースコードが利用できるのは素晴らしいことです。コーディングタスクや問題に関係なく、おそらくすでにどこかに良い解決策があるでしょう。ただし、オープンソースのコードとツールを使用することにはリスクがあり、悪意のあるコード実行やエクスプロイトにさらされる可能性があります。

ワークスペースの信頼は、ワークスペースが制限付きモードで開かれている場合に、自動コード実行を防ぐことで、不慣れなコードを扱う際のセキュリティレイヤーを追加します。

注意: ワークスペースの信頼機能を無効にする場合は、security.workspace.trust.enabled を false に設定できます。ワークスペースの信頼を無効にするのは、作業しているファイルのソースと整合性を確信できる場合に限ります。

制限付きモード

ワークスペースの信頼ダイアログで、いいえ、作成者を信頼しませんを選択した場合、VS Code はコード実行を防ぐために制限付きモードになります。ワークベンチの上部に、ワークスペースの信頼エディターを介してフォルダーを管理するためのリンクと、ワークスペースの信頼ユーザーガイドに移動する詳細はこちらリンクを含むバナーが表示されます。

Workspace Trust Restricted Mode banner

ステータスバーにも制限付きモードバッジが表示されます。

Workspace Trust Restricted Mode Status bar badge

制限付きモードは、タスク、デバッグ、ワークスペース設定、拡張機能など、いくつかの VS Code 機能の動作を無効または制限することにより、自動コード実行を防ごうとします。

制限付きモードで無効になっている機能の完全なリストを表示するには、バナーの管理リンクをクリックするか、ステータスバーの制限付きモードバッジをクリックして、ワークスペースの信頼エディターを開くことができます。

Workspace Trust editor

ワークスペースの信頼

プロジェクトの作成者とメンテナーを信頼する場合は、ローカルマシン上のプロジェクトのフォルダーを信頼できます。たとえば、github.com/microsoft や github.com/docker などの有名な GitHub 組織のリポジトリを信頼するのは通常安全です。新しいフォルダーを開いたときの最初のワークスペースの信頼プロンプトでは、そのフォルダーとそのサブフォルダーを信頼できます。

ワークスペースエディターを表示して、フォルダーの信頼状態をすばやく切り替えることもできます。ワークスペースエディターダイアログを表示する方法はいくつかあります。

制限付きモードの場合

  • 制限付きモードバナーの 管理 リンク
  • 制限付きモードのステータスバー項目

いつでも使用することもできます

  • コマンドパレットから ワークスペース: ワークスペースの信頼を管理 コマンド (⇧⌘P (Windows, Linux Ctrl+Shift+P))
  • アクティビティバーの 管理 ギアから ワークスペースの信頼を管理

Manage Workspace Trust command in the Manage gear context menu

フォルダーの選択

フォルダーを信頼すると、ワークスペースの信頼エディターに表示される 信頼されたフォルダーとワークスペース リストに追加されます。

Workspace Trust editor Trusted Folders and Workspaces list

このリストからフォルダーを手動で追加、編集、削除でき、信頼を有効にするアクティブなフォルダーが太字で強調表示されます。

親フォルダーを信頼するオプションもあります。これにより、親フォルダーとすべてのサブフォルダーに信頼が適用されます。これは、信頼されたコンテンツを含む多くのフォルダーが 1 つのフォルダーの下にまとめられている場合に役立ちます。

拡張機能の有効化

制限付きモードを使用したいが、お気に入りの拡張機能がワークスペースの信頼をサポートしていない場合はどうなりますか？これは、拡張機能が便利で機能的であっても、積極的にメンテナンスされておらず、ワークスペースの信頼サポートを宣言していない場合に発生する可能性があります。このシナリオに対処するために、extensions.supportUntrustedWorkspaces 設定で拡張機能の信頼状態をオーバーライドできます。

注意: 拡張機能のワークスペースの信頼サポートをオーバーライドする場合は注意してください。拡張機能の作成者が制限付きモードで拡張機能を無効にする正当な理由がある可能性があります。

以下に、Prettier 拡張機能のユーザー settings.json エントリを示します。

  "extensions.supportUntrustedWorkspaces": {
    "esbenp.prettier-vscode": {
      "supported": true,
      "version": "6.4.0"
    },
  },

supported 属性を使用して、ワークスペースの信頼サポートを有効または無効にできます。version 属性は、適用可能な正確な拡張機能バージョンを指定し、すべてのバージョンの状態を設定する場合は、バージョンフィールドを削除できます。

拡張機能の作成者が制限付きモードで制限する機能を評価および決定する方法の詳細については、ワークスペースの信頼拡張機能ガイドをお読みください。

設定

以下は、利用可能なワークスペースの信頼設定です。

  • security.workspace.trust.enabled - ワークスペースの信頼機能を有効にします。デフォルトは true です。
  • security.workspace.trust.startupPrompt - 起動時にワークスペースの信頼ダイアログを表示するかどうか。デフォルトは、個別のフォルダーまたはワークスペースごとに 1 回のみ表示することです。
  • security.workspace.trust.emptyWindow - 空のウィンドウ (開いているフォルダーなし) を常に信頼するかどうか。デフォルトは true です。
  • security.workspace.trust.untrustedFiles - ワークスペース内の非関連ファイルをどのように処理するかを制御します。デフォルトはプロンプトを表示することです。
  • extensions.supportUntrustedWorkspaces - 拡張機能のワークスペースの信頼宣言をオーバーライドします。true または false のいずれか。

ワークスペースの信頼の詳細については、ワークスペースの信頼ユーザーガイドをお読みください。

新しい始め方

過去数回のイテレーションで、VS Code のウェルカムページのリフレッシュに取り組んできましたが、今回のイテレーションから、新しいウェルカムページ (始めましょう) がすべてのユーザーに対してデフォルトで有効になることを発表できて嬉しく思います。この新しいエクスペリエンスでは、VS Code のコアとインストールされた拡張機能の両方が、ウェルカムページに「ウォークスルー」を提供できます。ウォークスルーは、VS Code 自体または新しい拡張機能を使い始めるのに役立つように設計されています。たとえば、Luna Paint 拡張機能は、イメージエディターの各コンポーネントを理解するのに役立つガイドを含むウォークスルーを提供します。

New welcome page, showing some of the walkthroughs core and extensions can contribute

さらに、すべてのウォークスルーを完了 (または無視) すると、VS Code はコンテンツを再配置して、ワンクリックでアクセスできる最近のワークスペースの数を 2 倍にします。

New welcome page with all walkthroughs dismissed, showing extra recent workspaces entries

設定

  • workbench.startupEditor - 起動時に表示するデフォルトのエディターを制御します。新しい値 gettingStarted は、古いデフォルト welcome を置き換えます。その他の利用可能なオプションには、readme、gettingStartedInEmptyWorkbench、newUntitledFile、または none があります。
  • workbench.welcomePage.walkthroughs.openOnInstall - 拡張機能が提供するウォークスルーをインストール時に自動的に開くかどうか。

新しいページは、既存のウェルカムページを完全に段階的に廃止するまで、始めましょう と呼ばれます。

リモートリポジトリ

リモートリポジトリ拡張機能は、1.56 の組み込みプレビュー機能として導入され、現在パブリックに利用可能ですが、VS Code に組み込まれなくなったため、VS Code Marketplace からインストールする必要があります。

簡単なまとめとして、リモートリポジトリ拡張機能を使用すると、リポジトリをローカルにクローンしたり、ローカルにリポジトリを持ったりすることなく、VS Code 内から直接 GitHub リポジトリを即座に参照、検索、編集、コミットできます。

今回のイテレーションでは、主にバグ修正と拡張機能のリリースに向けた磨き込みに重点を置いていましたが、いくつかの新機能を追加しました。リモートエクスプローラーでリモートリポジトリを確認して、保留中の変更をすばやく開いたり比較したりできるようになりました。さらに、同じリポジトリからの変更を現在のリモートリポジトリに適用して、コミットされていない変更をあるブランチから別のブランチにすばやく簡単に移動できます。

Remote Repositories Remote Explorer view

テーマ: Amethyst Dark Theme

リモートリポジトリの詳細については、リモートリポジトリブログ記事と YouTube ビデオをご覧ください。

ウィンドウ間のエディターのドラッグアンドドロップの改善

今回のリリースでは、エディターを別のウィンドウにドラッグするサポートが改善されました。差分エディター、カスタムエディター、およびエディターグループ全体を別のウィンドウにドラッグして、そこにエディターを開くことができるようになりました。

Improved editor drag and drop across windows

テーマ: GitHub Light Theme

注意: この機能を頻繁に使用する場合は、自動保存を有効 (files.autoSave) にして、一方のウィンドウでの変更がもう一方のウィンドウに自動的に反映されるようにしてください。

エディターが開いていないときに Cmd+W / Ctrl+W キーバインドでウィンドウを閉じる機能を削除

ユーザーが最後のエディターをすばやく Cmd+W / Ctrl+W を使用して閉じた後、VS Code ウィンドウ (インスタンス) が突然閉じることに不満を感じているというフィードバックがありました。チーム内の簡単なアンケートでも、多くの人がウィンドウを閉じるためのこのキーバインドを割り当て解除していることが明らかになったため、エディターが開いていないときにウィンドウを閉じるためのキーバインドとして Cmd+W / Ctrl+W を削除しました。

ユーザーの keybindings.json ファイルで次のように構成することで、キーバインドを簡単に元に戻すことができます。

macOS

{
  "key": "cmd+w",
  "command": "workbench.action.closeWindow",
  "when": "!editorIsOpen && !multipleEditorGroups"
}

Windows/Linux

{
  "key": "ctrl+w",
  "command": "workbench.action.closeWindow",
  "when": "!editorIsOpen && !multipleEditorGroups"
}

注意: すべてのプラットフォームで、ウィンドウを閉じるための専用の割り当てられたキーバインドがあります。

  • macOS: Cmd+Shift+W
  • Linux: Alt+F4
  • Windows: Alt+F4

ノートブックレイアウトのカスタマイズ

今月は、ユーザーがワークフローに合わせてノートブックエディターをカスタマイズできるように、いくつかのノートブックレイアウト設定を追加しました。デフォルトでオンになっているカスタマイズは次のとおりです。

ノートブックツールバー

エディターにノートブックツールバーを追加しました。ここでは、セルの挿入、すべてのセルの実行、カーネルの切り替えなどのアクションに簡単にアクセスできます。ツールバーは、notebook.globalToolbar を false に設定することで無効にできます。

Notebook toolbar

出力ツールバー

セル出力のクリアアクションと、別の出力レンダラーまたはMIMEタイプを選択するためのボタンが、セル出力の横にある単一の ... エリプスメニューに結合されました。これは、notebook.consolidatedOutputButton を false に設定することで無効にできます。

Notebook output toolbar

ガターのフォーカスされたセルハイライト

VS Code は、ノートブックに多数のセルが含まれている場合に、どのセルにフォーカスされているかを識別するのに役立つ、セルのガター領域でのフォーカスされたセルハイライトのレンダリングをサポートするようになりました。設定 notebook.cellFocusIndicator は、新しいデフォルトである gutter にすることも、セル境界全体を強調表示する border にすることもできます。

Notebook focus indicator on gutter

マウスオーバー時に折りたたみアイコンを表示

Markdown セルの折りたたみアイコンは、常に表示されるのではなく、マウスオーバー時に表示されるようになりました。notebook.showFoldingControls を mouseover (デフォルト) または always のいずれかに設定することで、動作をカスタマイズできます。

Notebook show focus icon on mouse over

今月実装されたノートブックレイアウト設定の完全なリストは次のとおりです。

  • notebook.cellFocusIndicator: セルがフォーカスされた状態を、Jupyter と同様に、セルの側面にある色付きのバー (gutter) で示すオプションを追加します。
  • notebook.cellToolbarVisibility: セルツールバーをセルがフォーカスされたとき、またはホバーされたときに表示するかどうかを決定します。デフォルトは、セルがフォーカスされたときにのみ表示することです。
  • notebook.compactView: 有効にすると、セルはよりコンパクトなスタイルで、空きスペースを少なくしてレンダリングされます。デフォルトで有効になっています。
  • notebook.consolidatedOutputButton: セル出力のクリアアクションと、別の出力レンダラーまたはMIMEタイプを選択するためのボタンが、セル出力の横にある単一の ... エリプスメニューに結合されました。新しいメニューは、この設定で無効にできます。
  • notebook.consolidatedRunButton: 2 つの新しいアクション、上のセルを実行とセルと下を実行があります。これらはデフォルトでセルツールバーに表示されますが、この設定を有効にすると、実行ボタンの横にある新しいコンテキストメニューに移動します。
  • notebook.dragAndDropEnabled: セルのドラッグアンドドロップを無効にします。コマンド (Alt+Up/Alt+Down がデフォルト) を使用してセルを再配置することはできます。
  • notebook.globalToolbar: ノートブックエディターの上部にツールバーを追加します。
  • notebook.insertToolbarLocation: 新しいセルを挿入するためのボタンをセル間、ツールバー、両方、または非表示にするかどうかを制御します。
  • notebook.showCellStatusBar: この設定には、新しいオプション visibleAfterExecute があり、セルが実行されるまでセルステータスバーを非表示にしてスペースを節約します。実行されると、ユーザーが実行の詳細を確認できるように表示されます。
  • notebook.showFoldingControls: Markdown ヘッダーに表示される折りたたみシェブロンを常に表示するか、マウスオーバー時のみ表示するかを制御します。
  • notebook.editorOptionsCustomizations: ユーザーがノートブックでセルエディターの設定をカスタマイズできるようにします。

下の画像は、これらの設定のいくつかの効果を示しています (上部のツールバー、ガターハイライト、出力 ... ボタン)。

Notebook layout changes

クイックピックと候補ウィジェットの色の更新

クイックピックと候補ウィジェットのフォーカス状態を更新して、ツリーウィジェットのスタイルとの整合性を高めました。これにより、フォーカス前景を制御するいくつかの新しいカラートークンが導入されました。

  • list.focusHighlightForeground
  • quickInputList.focusForeground
  • editorSuggestWidget.selectedForeground

Quick Pick style in light theme

Suggest style in light theme

アイコンテーマ: Fluent Icons

macOS 用 Touch Bar アイコンの更新

更新されたアイコンスタイルに合わせて、macOS Touch Bar アイコンを更新しました。

macOS Touch Bar アイコン デフォルトビュー

より多くのコントロールを備えたデバッグ中の macOS Touch Bar アイコン デバッグ中

WebView のコンテキストメニュー

VS Code は、Markdown プレビュー、リリースノート、拡張機能の詳細ページなど、WebView 内で簡単なコンテキストメニューを表示することをサポートするようになりました。

A context menu in a webview

このコンテキストメニューには現在、テキストのコピーと貼り付けのアクションが含まれています。将来、メニューに追加のアクションを追加する可能性があります。

このコンテキストメニューが拡張機能の WebView を妨害している場合は、contextmenu イベントで preventDefault を呼び出すことで、表示されないようにすることができます。

document.body.addEventListener('contextmenu', e => {
  e.preventDefault(); // cancel the built-in context menu
});

エディター

候補プレビュー

新しい設定 editor.suggest.preview を有効にすると、選択した候補またはスニペットのプレビューがカーソル位置に表示されます。

Suggestion preview showing smart completions for the letter 'i'

テーマ: Dark+ (デフォルトダーク)

非推奨の候補を非表示にする

新しい設定 editor.suggest.showDeprecated があります。デフォルトは on ですが、off にすると、非推奨としてマークされている項目は候補に表示されなくなります。

統合ターミナル

ターミナルタブ

ターミナルタブは、1.56 のプレビュー機能として導入され、デフォルトで有効になりました。新しいタブビューは、少なくとも 2 つのターミナルがある場合にのみデフォルトで表示されます。単一のターミナルの場合、タブはパネルタイトルに「インライン」で表示されます。これにより、タスクの実行中、成功、失敗などのターミナルのステータスの概念も導入されます。

Single inlined terminal tab, terminal tabs with status, and collapsed terminal tabs

以下は、今回のリリースのハイライトの一部です。

  • タブの色を変更して、タブ間のすばやいナビゲーションと区別を有効にできます。
  • タブはドラッグアンドドロップして、再配置できます。
    drag and drop
  • ターミナルグループのタブを空の領域にドラッグすると、グループから削除されます (ターミナルを分割解除、コンテキストメニューからも利用可能)。
    unsplit
  • タブをメインターミナル領域にドラッグすると、グループに参加できます (コンテキストメニューからも利用可能)。
    dragging a terminal tab to join a tab group
  • Alt キーを押しながらタブ、+ ボタン、または単一のタブをクリックすると、ターミナルが分割されるようになりました。ターミナルを強制終了するための中クリックでも同じように機能します。
    split terminal buttons
  • インラインアクションは、タブリストがターミナルを誤って分割/強制終了しないように十分に大きくない限り表示されません。
  • ターミナルを強制終了して 1 つだけになる場合、マウスがビューから離れるまでタブリストは非表示になりません。

新しい UX が気に入らない場合は、"terminal.integrated.tabs.enabled": false を設定してドロップダウンに戻ることができます。これは、今後もオプションとしてサポートし続ける予定です。

ターミナルプロファイルの改善

今回のリリースでは、ターミナルプロファイルシステムに多くの改善が加えられました。以下にハイライトをいくつか示します。

  • VS Code の起動時にターミナルが復元された場合、defaultProfile が尊重され、タスクとデバッグに使用されます。
  • IntelliSense が settings.json の icon と defaultProfile で動作するようになりました。
  • overrideName がデフォルトプロファイルで動作するようになりました。
  • defaultProfile をワークスペース設定で設定できるようになりました。これは、新しいワークスペースの信頼機能によっても制御されるようになりました。
  • defaultProfile と shell または shellArgs 設定を使用している場合、非推奨の設定をプロファイルシステムに移行するように求められるようになりました。
  • color をプロファイルで設定できるようになりました。

タイトルシーケンスのサポート

設定 terminal.integrated.experimentalUseTitleEvent 設定が、terminal.integrated.titleMode として安定版に昇格しました。デフォルトでは、この設定は executable になり、検出されたフォアグラウンドプロセスに基づいてターミナルに名前が付けられます。

Running 'git show' will result in the terminal's title changing to 'git'

これが sequence に設定されている場合、タイトルはシェルが設定するものに基づきます。これが機能するにはシェルのサポートが必要であり、動作中の例として、セッションに関する追加情報を表示する oh-my-zsh のデフォルトプロンプトがあります。

The oh-my-zsh default prompt will show the computer's name and current working directory

クリーンな環境での起動の改善

設定 terminal.integrated.inheritEnv は、v1.36 以降利用可能ですが、実装には Linux でのアクセス許可の問題が原因で失敗したり、macOS で期待どおりに動作しない可能性があるという欠陥がありました。

VS Code が基盤となる環境をセットアップする方法が改善されたため、起動時の初期環境にアクセスできるようになりました。これは、ほとんどのターミナルが動作する方法です。inheritEnv が true に設定されている場合、VS Code は初期環境を使用し、false の場合は、ソースされた「シェル環境」を使用します。この設定は、ターミナルを通常のターミナルとして動作させるのに役立ちます。ただし、プロファイル/rc 構成が正しく設定されていない場合、問題が発生する可能性があります。

Windows でのネイティブな行の折り返しサポート

ターミナルでの行の折り返しは、タスクの問題マッチャーとリンク検出を駆動します。これまで、Windows ターミナルは、Unix pty をシミュレートするエミュレーションテクノロジーが折り返しをサポートしていなかったため、ヒューリスティックを使用して行を折り返しとしてフラグを立てていました。これは、最近のバージョンの Windows で変更され、Windows 10 21376 以降 (現在は Insiders のみ) に更新すると、このヒューリスティックが無効になり、折り返された行は Windows ターミナルと同様に正しく機能するはずです。

タスク

ターミナルタブのタスクステータス

タスクのステータスがターミナルタブに表示されるようになりました。バックグラウンドタスクの場合、ステータスは関連付けられた問題マッチャーがある場合にのみ表示されます。

Task status on a terminal tab

タスクターミナルを自動的に閉じる

タスクの presentation プロパティに新しい close プロパティがあります。close を true に設定すると、タスクが終了したときにターミナルが閉じます。

{
  "type": "shell",
  "command": "node build/lib/preLaunch.js",
  "label": "Ensure Prelaunch Dependencies",
  "presentation": {
    "reveal": "silent",
    "close": true
  }
}

デバッグ

JavaScript デバッグ

いつものように、変更の完全なリストは、vscode-js-debug changelog にあります。

Edge Developer Tools の統合

JavaScript デバッガーは、Microsoft Edge Developer Tools と統合して、ブラウザデバッグ用の DOM、スタイル、およびネットワークインスペクターを提供します。これは、デバッグツールバーの新しい「検査」アイコンからアクセスできます。

Debugger inspect button

以下の短いビデオでは、「検査」ボタンを選択し、Edge DevTools の要素をナビゲートする様子を示しています。

「検査」アイコンをクリックし、Edge で要素をクリックするデモンストレーション テーマ: Codesong

ブラウザデバッグに Microsoft Edge をまだ使用していない場合は、launch.json で "type": "chrome" または "type": "pwa-chrome" を "type": "pwa-msedge" に置き換えることで切り替えることができます。これは、Blazor アプリケーションでも、起動構成で "browser": "edge" を設定することでサポートされています。

ソースマップで名前変更された識別子のサポート

長らく要望の多かった機能である JavaScript デバッガーが、ソースマップで名前変更された識別子をサポートするようになりました。これは、minify されたコードをデバッグする場合に特に役立ちます。

ブレークポイントで一時停止したスクリーンショット。minify されたコードが実行されていますが、変数、ウォッチ、およびデバッグコンソールビューには、変数が元の名前でアクセスできることが示されています。 テーマ: Codesong

名前変更された変数は、変数ビュー、ウォッチビュー、およびデバッグコンソール REPL でサポートされています。ツールが名前変更を出力するかどうかは、生成するソースマップファイルで空でない「names」配列を探すことで確認できます。

ヒットしたブレークポイントをブレークポイントビューで表示

ブレークポイントがヒットすると、VS Code はブレークポイントビューでそれを選択して表示するようになりました。これにより、プログラムが中断した正確なブレークポイントを理解しやすくなるはずです。

現在、JS-debug 拡張機能のみがこの機能をサポートしていますが、他のデバッグ拡張機能もすぐに追随すると予想されます。

As the user steps in the program, a breakpoint that got hit is selected and revealed in the BREAKPOINTS view

言語

TypeScript 4.3.2

VS Code に TypeScript 4.3.2 が同梱されるようになりました。このメジャーアップデートには、多くの TypeScript 言語の改善と、JavaScript および TypeScript ツールの多くの改善とバグ修正が含まれています。

TypeScript 4.3 の詳細については、TypeScript ブログをお読みください。

JSDoc @link サポート

VS Code は、JavaScript および TypeScript コメントで JSDoc @link タグ をサポートするようになりました。これにより、ドキュメント内のシンボルへのクリック可能なリンクを作成できます。

Navigating code using JSDoc @link tags

JSDoc @link タグは、{@link symbolName} として記述されます。シンボル名の代わりにレンダリングするテキストをオプションで指定することもできます: {@link class.property Alt text}。

@link は、ホバー、候補、およびシグネチャヘルプでサポートされています。また、VS Code 拡張機能タイプ宣言ファイル vscode.d.ts を @link を使用するように更新しました。

import ステートメントの補完

JavaScript および TypeScript の自動インポートは、候補を受け入れると自動的にインポートを追加します。VS Code 1.57 では、import ステートメント自体を記述するときにも機能するようになりました。

Auto imports in an import statement

これは、手動でインポートを追加する必要がある場合に時間を節約できます。

JS/TS 以外のファイルへの定義へ移動

多くの最新の JavaScript バンドラーとフレームワークは、import ステートメントを使用して、画像やスタイルシートなどのアセットをインポートします。定義へ移動でこれらのインポートをナビゲートすることをサポートするようになりました。

Navigating to a non-JS/TS import

これは、コードをナビゲートするために Ctrl/Cmd クリックを使用する場合に最も役立つ可能性があります。

インポートソースのアクションをソート

JavaScript および TypeScript の インポートをソート コードアクションは、インポートをソートします。ただし、インポートを整理とは異なり、未使用のインポートを削除しません。

保存時にインポートのソートを有効にすることもできます。設定:

"editor.codeActionsOnSave": {
    "source.sortImports": true
}

関数戻り値の型を推論するクイックフィックス

TypeScript の 関数戻り値の型を推論する リファクタリングは、関数に明示的な戻り値の型注釈を追加します。

The Infer function return type refactoring in action

明示的な型指定を追加したい場合に便利です。このリファクタリングは、戻り値の型を名前付きの型/インターフェースとして抽出したい場合や、関数の戻り値の型を変更する必要がある場合にも時間を節約できます。

TS Serverのログ記録を無効にするプロンプト

TypeScriptサーバーのログ記録が長期間有効になっている場合、VS Codeがプロンプトを表示するようになりました

TS server logging enabled notification

ログ記録はパフォーマンスに大きな影響を与える可能性があるため、積極的に問題を診断しようとしている場合を除き、無効にしておくのが最善です。

拡張機能への貢献

リモート開発

Remote Development 拡張機能の作業が継続されており、コンテナー、リモートマシン、またはWindows Subsystem for Linux (WSL) をフル機能の開発環境として使用できます。

1.57 の機能ハイライトは次のとおりです

  • 転送されたポートに必要なプロトコルを制御します。
  • 転送されたポートの衝突をオプションで監視します。
  • Dev Containers はワークスペースの信頼セキュリティ機能をサポートします。
  • Dev Containers での環境変数検出が向上しました。

新しい拡張機能やバグ修正については、Remote Development リリースノートをご覧ください。

拡張機能の作成

Notebook API

Notebook API の大部分が最終決定しました。API は 3 つの独立した部分に構造化されています。

  1. NotebookSerializer API は、notebooks contribution point と組み合わせて使用することで、VS Code が Notebook ドキュメントを開き、変更し、保存できるようにします。
  2. セル出力を表示する Notebook レンダラー。これらは、拡張機能の package.json ファイルの notebookRenderer contribution point を介して追加されます。
  3. コードセルの出力を生成する NotebookController API。

シンプルな Notebook Serializer とエコーコントローラーのサンプル。Serializer は JSON.parse と stringify を使用し、空のファイルを特別に処理します。コントローラーは、セルのテキストの大文字バリアントを返します。プレーンテキストとして 1 回、HTML として 1 回です。

// serialize/deserialize notebook
vscode.workspace.registerNotebookSerializer(
  'echobook',
  new (class implements vscode.NotebookSerializer {
    // serializer is relying on JSON.parse/stringify
    deserializeNotebook(content: Uint8Array) {
      return JSON.parse(new TextDecoder().decode(content) || '{"cells":[]}');
    }
    serializeNotebook(data: vscode.NotebookData) {
      return new TextEncoder().encode(JSON.stringify(data));
    }
  })()
);

// notebook controller
vscode.notebooks.createNotebookController(
  'myId',
  'echobook',
  'Echo',
  (cells, _notebook, controller) => {
    for (let cell of cells) {
      // execution means to echo in upper-case, once as plain text and once as html
      const execution = controller.createNotebookCellExecution(cell);
      execution.start();
      const echo = cell.document.getText().toUpperCase();
      const textItem = vscode.NotebookCellOutputItem.text(echo, 'text/plain');
      const htmlItem = vscode.NotebookCellOutputItem.text(`<b>${echo}</b>`, 'text/html');
      const output = new vscode.NotebookCellOutput([textItem, htmlItem]);
      execution.replaceOutput(output);
      execution.end(true);
    }
  }
);

この例では、*.echobook ファイルの Notebook タイプを静的に登録します。また、VS Code は、そのような Notebook が開かれるたびに onNotebook:echobook アクティベーションイベントを発行します。

"contributes": {
  "notebooks": [{
      "type": "echobook",
      "displayName": "Echobook",
      "selector": [{
        "filenamePattern": "*.echobook"
      }]
  }]
}

ステータスバー項目 'id' および 'name' プロパティ

StatusBarItem の識別子と名前プロパティの API が最終決定しました。識別子は、createStatusBarItem メソッドの新しいオーバーロードから渡すことができ、name プロパティは StatusBarItem 自体で動的に変更できます。

これらの新しいプロパティは、ステータスバーのコンテキストメニューで個々のエントリに名前を付けたり、ユーザーがエントリを表示/非表示にしたりするために使用されます。これらのプロパティを提供しない場合、メニューは 1 つの拡張機能からのすべてのステータスエントリを単一のエントリに集約します。

Status bar item menu

拡張機能がステータスバーに貢献している場合は、新しい API への更新を検討してください。

新しいターミナルにメッセージを出力する

window.createTerminal を使用してターミナルを作成する場合、TerminalOptions.message を介してターミナルの上部に表示されるメッセージを設定できるようになりました。このメッセージは、テキストスタイルを有効にする ANSI エスケープシーケンスをサポートしています。

vscode.window.createTerminal({
  name: `My terminal`,
  message: '\x1b[3;1mSome custom message\x1b[0m'
});

Terminal displaying a custom message

インライン値の新しいテーマカラー

デバッガーのインライン値をテーマ設定するための新しいカラーが追加されました。

  • editor.inlineValuesBackground: デバッグインライン値のフォアグラウンドテキストの色
  • editor.inlineValuesForeground: デバッグインライン値の背景色。

念のためですが、インライン値は、インライン値プロバイダーが登録されているデバッグ拡張機能の場合、または設定 debug.inlineValues が true の場合にデバッグ中に表示されます。

Debug inline values are shown with the foreground and background color customized

vscode-webview.d.ts

新しく公開された @types/vscode-webview パッケージは、VS Code が WebView 内で公開する API の型定義を追加します。

これらの型は、npm install --save-dev @types/vscode-webview でインストールできます。WebView の型がプロジェクトで認識されない場合は、jsconfig / tsconfig の typeAcquisition セクションに追加してみてください。

"typeAcquisition": {
  "include": [
    "@types/vscode-webview"
  ]
}

または、コードにトリプルスラッシュ参照を追加します。

///<reference types="@types/vscode-webview"/>

WebView の配列バッファー転送の改善

以前のバージョンの VS Code では、型付き配列を WebView との間で送受信する際に、いくつかの癖がありました。

  • UInt8Array などの型付き配列は、非効率的にシリアル化されます。これにより、数メガバイトのデータを転送する必要がある場合にパフォーマンスの問題が発生する可能性があります。
  • 送信された型付き配列は、受信側で正しい型として再作成されません。UInt8Array を送信すると、受信者は代わりに UInt8Array のデータ値を持つ汎用オブジェクトを取得します。

これらの問題はどちらもバグですが、既存の動作に依存している拡張機能を壊してしまう可能性があるため、修正することはできません。同時に、新しく作成された拡張機能が現在の紛らわしくて非効率的な動作を望む理由はまったくありません。

したがって、既存の拡張機能については既存の動作を維持し、新しい拡張機能をより正しい動作に移行することにしました。これは、拡張機能の package.json の engines 値を参照することで行われます。

"engines": {
  "vscode": "^1.57.0",
}

拡張機能が VS Code 1.57 以降をターゲットにしている場合、型付き配列は受信側で再作成されるはずであり、WebView との間での大きな型付き配列の転送ははるかに効率的になるはずです。

デバッグセッションの parentSession

しばらく前に、VS Code は階層型デバッグセッションのサポートを追加しましたが、階層に関する情報は拡張機能 API に公開されていませんでした。これに対処するために、親セッション (存在する場合) を参照する新しいプロパティが DebugSession インターフェースに追加されました。セッションの親が変更されることはありません。

export interface DebugSession {
  /**
    * The parent session of this debug session, if it was created as a child.
    * @see DebugSessionOptions.parentSession
    */
  readonly parentSession?: DebugSession;

  // ...

VS Code Insiders バージョンターゲティングの改善

提案された API を使用する拡張機能に取り組んでいる場合、破壊的な変更を含む新しい Insiders ビルドがリリースされる可能性があります。ユーザーへのよりシームレスな移行を提供するために、日付タグを使用して Insiders バージョンを正確にターゲットにできるようになりました。たとえば、engines.vscode を ^1.56.0-20210428 に設定すると、2020 年 4 月 28 日 0:00 UTC 以降に作成された VS Code 1.56 (以降) ビルドをターゲットにします。これにより、今後の Insiders バージョンがリリースされる前に、日付が後の拡張機能の更新を安全にリリースできます。

"engines": {
  "vscode": "^1.56.0-20210428",
}

ツリーホバーはコマンド URI をサポートします

TreeItem に信頼された Markdown ツールチップがある場合、そのツールチップには [this is a link](command:workbench.action.quickOpenView) 形式のコマンドを含めることができます。これは、Markdown でコマンドリンクがサポートされている他のすべての場所と同じ形式に従います。

提案された拡張機能 API

すべてのマイルストーンには、新しい提案された API が付属しており、拡張機能の作成者はそれらを試すことができます。いつものように、フィードバックをお待ちしています。提案された API を試すには、次のことを行う必要があります。

  • 提案された API は頻繁に変更されるため、Insiders を使用する必要があります。
  • 拡張機能の package.json ファイルに次の行を含める必要があります: "enableProposedApi": true。
  • vscode.proposed.d.ts ファイルの最新バージョンをプロジェクトのソースロケーションにコピーします。

提案された API を使用する拡張機能を公開することはできません。次のリリースで破壊的な変更が発生する可能性があり、既存の拡張機能を絶対に壊したくありません。

テスト

このイテレーションでは、テスト API の最初の部分を最終決定する予定でしたが、他の進行中の機能の数が多かったため延期されました。今回のイテレーションではテスト API に破壊的な変更はありませんでしたが、エディターエクスペリエンスの向上に引き続き取り組んでいます。たとえば、ピークビューには、現在および過去のテスト実行の結果を閲覧できる分割ビューが追加されました。

分割ビューの右側に参照スタイルのツリーが表示されたピークビューの画像 テーマ: Codesong

テストには、Ctrl+; で始まるコードとしての新しいキーバインドが追加され、ピークビューは Markdown メッセージのサポートが向上し、多くのバグが修正されました。

テストに Test Explorer UI 拡張機能を使用している場合は、設定 testExplorer.useNativeTesting をオンにして、新しいネイティブ UI に切り替えることができます。次のイテレーションでは、この設定の普及を増やし、パートナー拡張機能チームとの採用を開始する予定です。

ターミナルプロファイル contributions

この API により、拡張機能はターミナルプロファイルシステムに貢献できるようになります。拡張機能がこれを機能させるには、いくつかのことを行う必要があります。まず、package.json でプロファイルを contribution します。

"contributes": {
  "terminal": {
    "profiles": [
      {
        "title": "Profile from extension",
        "id": "my-ext.terminal-profile",
        "icon": "lightbulb"
      }
    ]
  },
}

次に、新しい onTerminalProfile アクティベーションイベントで拡張機能をアクティブ化します。

"activationEvents": [
  "onTerminalProfile:my-ext.terminal-profile"
]

最後に、アクティベーションイベントでプロバイダーを登録します。

vscode.window.registerTerminalProfileProvider('my-ext.terminal-profile', {
  provideProfileOptions(token) {
    return {
      name: 'Profile from extension',
      shellPath: 'cmd.exe'
    };
  }
});

提案された API が有効になっている場合、拡張機能によって contribution されたプロファイルがプロファイルリストに表示されるはずです。

Extension contributed profile is displayed in the profiles list

ターミナルオプションでの iconPath のサポート

標準の iconPath タイプは、ターミナルのタブに表示されるターミナルのアイコンを設定するために、TerminalOptions および TerminalExtensionOptions でサポートされています。

readonly iconPath?: Uri | { light: Uri; dark: Uri } | ThemeIcon;

Pseudoterminal のタイトルの変更

新しいイベント Pseudoterminal.onDidChangeName により、Pseudoterminal ベースのターミナルの制御が可能になりました。

const writeEmitter = new EventEmitter<string>();
const nameEmitter = new EventEmitter<string>();
const pty = {
  onDidWrite: writeEmitter.event,
  open: () => writeEmitter.fire('Type to change the title of the terminal'),
  close: () => {
    /* noop*/
  },
  handleInput: (data: string) => nameEmitter.fire(data)
};
const terminal = vscode.window.createTerminal({
  name: `My Terminal`,
  pty
});
terminal.show();

ファイルシステムプロバイダーがファイルを読み取り専用として宣言できるようにする

ファイルシステムプロバイダーは、FileStat の新しい permissions プロパティに FilePermission.Readonly の値を設定することで、個々のファイルを読み取り専用としてマークできるようになりました。読み取り専用ファイルは編集できません。

注: すべてのファイルを読み取り専用として扱う必要がある場合は、registerFileSystemProvider を呼び出すときに既存の isReadonly オプションを使用できます。

asExternalUri でワークスペース URI をサポートする

既存の vscode.env.asExternalUri API は、ワークスペース URI の処理をサポートするようになりました。これにより、拡張機能の作成者は、特定のワークスペースを直接開くシステム全体の URI を作成できます。

例

const uri = await vscode.env.asExternalUri('file:///Users/john/work/code');

結果の uri はオペレーティングシステムで開くことができ、VS Code はそのワークスペースを開きます。

エンジニアリング

Electron サンドボックスサポートの進捗状況

このマイルストーンでは、VS Code ウィンドウを Electron のサンドボックスおよびコンテキスト分離機能を有効にする準備を継続しました。

具体的には

  • レンダラーで使用されるより多くのコードから Node.js 依存関係を削除しました。
  • webview の使用を完全に停止し、カスタムビューとエディターに iframe に切り替えることを引き続き検討しました。

ドキュメント

Build 2021 での VS Code

Microsoft Build 2021 デベロッパーイベントを見逃した場合でも、オンデマンドでセッションを視聴できます。Build 2021 での Visual Studio Code ブログ記事をご覧ください。VS Code ユーザーにとって興味深いと思われるセッションのリストをまとめました。

What's New in VS Code Build 2021 session on YouTube

ブラウザーのデバッグ

新しいトピック VS Code でのブラウザーのデバッグ では、Edge および Chrome ブラウザーの組み込みデバッグサポートについて説明しています。VS Code を構成して、新しいブラウザーデバッグセッションを起動 (デバッグ: リンクを開く コマンドを使用) するか、実行中のブラウザーにアタッチすることができます。

PyTorch

VS Code 内で PyTorch 機械学習フレームワークを使用する方法に関する新しいトピックがあります。VS Code での PyTorch サポート の記事では、Jupyter Notebooks を PyTorch および TensorFlow データ型で拡張する方法を学ぶことができます。

PyTorch logo

注目すべき修正

  • 71966: しばしばウィンドウ全体がハングする
  • 85332: Windows: ファイル削除でフリーズする
  • 95077: ターミナルの「単語」リンクプロバイダーが折り返しをサポートしていない
  • 108804: シェル環境の解決を待たずにウィンドウを開く
  • 120004: VS Code の統合ターミナルでの奇妙な文字間隔
  • 125035: デバッグコンソールフィルターテキストをリロード間で保持する必要がある
  • iOS/iPadOS: iOS/iPadOS プラットフォームに対していくつかの修正が行われました。

謝辞

最後になりましたが、今月 VS Code に貢献してくださった以下の皆様に、心から感謝申し上げます。

Issue tracking への貢献

vscode への貢献

vscode-css-languageservice への貢献

vscode-eslint への貢献

vscode-js-debug への貢献

vscode-languageserver-node への貢献

  • @yanmofeixi: クライアントが準備できていないエラーに詳細情報を追加 PR #764

vscode-pull-request-github への貢献

vscode-vsce への貢献

language-server-protocol への貢献

monaco-languages への貢献

monaco-typescript への貢献