に参加して、VS Code の AI 支援開発について学びましょう。

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

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

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

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

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

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

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

Insiders: 新機能をいち早く試したいですか？夜間ビルドのInsidersをダウンロードして、利用可能になり次第、最新の更新を試すことができます。

Workbench

ワークスペースの信頼

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組織のリポジトリは、通常安全に信頼できます。新しいフォルダーを開いたときに最初に表示されるワークスペース信頼プロンプトで、そのフォルダーとそのサブフォルダーを信頼できます。

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

制限モードの場合

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

いつでも次の操作もできます

  • コマンドパレットからWorkspaces: Manage Workspace Trustコマンド (⇧⌘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 - 起動時にワークスペース信頼ダイアログを表示するかどうか。デフォルトは、個別のフォルダーまたはワークスペースごとに一度だけ表示します。
  • 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からインストールする必要があります。

簡単にまとめると、リモートリポジトリ拡張機能を使用すると、リポジトリをローカルにクローンしたり、ローカルに持ったりすることなく、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のタッチバーアイコンの更新

macOSのタッチバーアイコンを更新し、更新されたアイコンスタイルに合わせました。

macOS Touch Bar icons デフォルト表示

macOS Touch Bar icons while debugging with more controls デバッグ中

Webビューのコンテキストメニュー

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

A context menu in a webview

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

このコンテキストメニューが拡張機能のWebビューと競合する場合は、contextmenuイベントでpreventDefaultを呼び出すことで、表示を防止できます。

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

Editor

サジェストプレビュー

新しい設定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が尊重され、タスクとデバッグに使用されます。
  • settings.jsonでiconとdefaultProfileのIntellisenseが機能するようになりました。
  • 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変更履歴に記載されています。

Edge開発者ツール統合

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

Debugger inspect button

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

Demonstration of clicking the "Inspect" icon and clicking through elements in Edge テーマ: Codesong

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

ソースマップにおける識別子のリネームのサポート

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

A screenshot paused at a breakpoint. Minified code is being run, but the variables, watch, and debug console views show that variables can be accessed by the original names. テーマ: 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では、インポートステートメント自体を作成しているときにも機能するようになりました。

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サーバーのログ記録を無効にするよう促すプロンプト

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

TS server logging enabled notification

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

拡張機能への貢献

リモート開発

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

1.57の主な機能は以下の通りです。

  • 転送されたポートの希望するプロトコルを制御します。
  • 転送されたポートの衝突に対するオプションの監視。
  • 開発コンテナーはワークスペース信頼セキュリティ機能をサポートします。
  • 開発コンテナーでの環境変数検出の改善。

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

拡張機能作成

ノートブックAPI

ノートブックAPIの大部分が完成しました。APIは3つの異なる部分で構成されています。

  1. notebooksコントリビューションポイントと組み合わせて、VS Codeがノートブックドキュメントを開き、変更し、保存できるようにするNotebookSerializer API。
  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つの拡張機能からのすべてのステータスエントリを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がWebビュー内で公開するAPIの型定義を追加します。

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

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

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

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

Webビューの配列バッファ転送の改善

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

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

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

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

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

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

デバッグセッションでの親セッション

以前、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に破壊的変更はありませんでしたが、エディター体験の改善は継続して行われました。例えば、ピークビューには分割ビューが追加され、現在および過去のテスト実行結果を閲覧できるようになりました。

Image of a Peek view with a references-style tree shown on the right side of a split view テーマ: 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により、擬似ターミナルベースのターミナルを制御できるようになりました。

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

問題追跡への貢献者

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

© . This site is unofficial and not affiliated with Microsoft.