VS Codeのエージェントモードを拡張するには、を試してください！

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

Update 1.57.1: このアップデートでは、これらの問題に対処しています。

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

ダウンロード: Windows: x64 Arm64 | Mac: ユニバーサル 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 のウェルカムページのリフレッシュに取り組んできました。このイテレーションから、新しいウェルカムページ (Getting Started) がすべてのユーザーに対してデフォルトで有効になることを発表できることを嬉しく思います。この新しいエクスペリエンスでは、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 - 拡張機能が提供するウォークスルーをインストール時に自動的に開くかどうか。

既存のウェルカムページを完全に廃止するまで、新しいページはGetting Startedと呼ばれます。

リモートリポジトリ

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

簡単にまとめると、リモートリポジトリ拡張機能を使用すると、GitHub リポジトリをローカルにクローンしたり、ローカルに保持したりすることなく、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 icons while debugging with more controls デバッグ中

ウェブビューのコンテキストメニュー

VS Code は、Markdown プレビュー、リリースノート、拡張機能詳細ページなど、ウェブビュー内にシンプルなコンテキストメニューを表示する機能をサポートするようになりました。

A context menu in a 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 を設定することでドロップダウンに戻すことができます。このオプションは今後もサポートされる予定です。

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

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

  • defaultProfile は、VS Code の起動時にターミナルが復元される場合に尊重され、タスクとデバッグに使用されます。
  • 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+ (現在は Insider のみ) にアップデートすると、このヒューリスティックは無効になり、行折り返しは Windows Terminal と同様に正しく機能するはずです。

タスク

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

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

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 の変更ログで確認できます。

Edge Developer Tools の統合

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

Debugger inspect button

以下の短いビデオでは、「Inspect」ボタンを選択し、Edge DevTools の要素間を移動する方法を示します。

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

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

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

長らく要望されていた機能として、JavaScript デバッガーがソースマップにおける名前変更された識別子をサポートするようになりました。これは、ミニファイされたコードをデバッグする際に特に役立ちます。

ブレークポイントで一時停止したスクリーンショット。ミニファイされたコードが実行されていますが、変数、ウォッチ、デバッグコンソールビューには、元の名前で変数にアクセスできることが示されています。 テーマ: 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 代替テキスト}。

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

import 文での補完

JavaScript と TypeScript の自動インポートは、提案を受け入れると自動的にインポートを追加します。VS Code 1.57 では、インポート文自体を記述しているときにも動作するようになりました。

Auto imports in an import statement

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

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

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

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はワークスペース信頼セキュリティ機能をサポートします。
  • 開発コンテナでの環境変数検出の改善。

新しい拡張機能の機能とバグ修正については、リモート開発リリースノートをご覧ください。

拡張機能作成

ノートブックAPI

ノートブックAPIのほとんどを完成させました。APIは3つの独立した部分で構成されています。

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

シンプルなノートブックシリアライザとエコーコントローラの例。シリアライザは、空のファイルの特殊な処理で 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 ファイルのノートブックタイプを静的に登録しています。また、VS Code は、このようなノートブックが開かれるたびに 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 がウェブビュー内部で公開する API の型定義を追加します。

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

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

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

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

ウェブビューの配列バッファ転送の改善

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

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

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

したがって、既存の拡張機能には既存の動作を残し、新しい拡張機能にはより正しい動作に移行させることにしました。これは、拡張機能の package.json 内の engines 値を調べて行われます。

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

拡張機能が VS Code 1.57 以降をターゲットとする場合、型付き配列は受信側で再作成され、ウェブビューへの大きな型付き配列の転送ははるかに効率的になります。

デバッグセッションの 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 ツールチップがある場合、そのツールチップには [これはリンクです](command:workbench.action.quickOpenView) の形式のコマンドを含めることができます。これは、コマンドリンクが Markdown でサポートされている他のすべての場所と同じ形式に従います。

提案された拡張API

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

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

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

テスト

今回のイテレーションでは、テストAPIの最初の部分を完成させる予定でしたが、他の多くの開発中の機能のため延期されました。今回のイテレーションではテストAPIに破壊的変更はありませんでしたが、エディターエクスペリエンスの改善は継続しました。例えば、Peekビューは分割ビューを獲得し、現在および過去のテスト実行結果を閲覧できるようになりました。

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

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

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

ターミナルプロファイルの貢献

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

"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 が有効になっている場合、拡張機能が提供するプロファイルがプロファイルリストに表示されるはずです。

Extension contributed profile is displayed in the profiles list

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

標準の iconPath 型が TerminalOptions および TerminalExtensionOptions でサポートされ、ターミナルアイコンを設定できるようになりました。これはターミナルのタブに表示されます。

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

疑似ターミナルのタイトル変更

新しいイベント 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 開発者イベントを見逃した方も、オンデマンドでセッションを視聴できます。VS Code ユーザーにとって興味深いと思われるセッションのリストをまとめた「Visual Studio Code at Build 2021」ブログ記事をご覧ください。

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 に貢献してくださった以下の皆様に、心からの感謝を申し上げます。

問題追跡への貢献者

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への貢献