🚀 VS Code で !

2022年7月 (バージョン 1.70)

Update 1.70.1: この更新では、これらのissueに対処しています。

Update 1.70.2: この更新では、これらのissueに対処しています。

Update 1.70.3: このアップデートは Windows 7 ユーザーのみが利用可能で、Windows 7 をサポートする最後のリリースです。

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

Visual Studio Code 2022 年 7 月リリースへようこそ。このバージョンには多くのアップデートが含まれており、きっと気に入っていただけると思います。主なハイライトをいくつかご紹介します。

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

リリースパーティーを見る: VS Code チームが新機能について議論する様子を聞いてみましょう。イベントの録画は、YouTube チャンネルでご覧いただけます。

Insiders: 新機能をいち早く試してみたいですか? 夜間の Insiders ビルドをダウンロードして、最新の更新プログラムが利用可能になり次第お試しください。

ワークベンチ

タイトルバーのカスタマイズが容易に

カスタムタイトルバー (Windows、macOS、Web でのデフォルト) を使用している方は、タイトルバーにインタラクティブなコンテンツが増えていることに気づいたかもしれません。これらの要素を個別に非表示にする設定はすでにありますが、タイトルバーを右クリックしてコンテキストメニューにアクセスすることで、メニューバー (macOS デスクトップには表示されません)、コマンドセンター、およびレイアウトコントロールを切り替えることができるようになりました。

title bar context menu

Windows ユーザーがシステムコンテキストメニューを期待している場合でも、ウィンドウの左上隅にある VS Code アイコンを右クリックするか、Alt+Space を押すことでメニューをトリガーできます。Alt+Space でトリガーする場合の動作を決定するためにマウス位置が使用されるため、カスタムメニューはタイトルバーの上に置かれている場合に表示されます。

system context menu

Linux ユーザーの場合、issue #156397 により、タイトルバーの空きスペースではコンテキストメニューは開きません。非表示にしたいタイトルバーの項目を右クリックする必要があります。

メニューバーの折りたたみ機能の改善

コマンドセンターの追加に伴い、スペースを確保するためにメニューバーをハンバーガーメニューに縮小しようとしました。ユーザーからのフィードバックを受けて、メニューのほとんどが折りたたまれるまで、古いメニューバーの折りたたみ動作に戻し、その後にのみハンバーガーメニューに切り替えるようにしました。

macOS タイトルバーのズーム機能のアクセシビリティ

コマンドセンターのエクスペリエンスを向上させる取り組みの一環として、macOS のタイトルバーにインタラクティブなコンポーネントが存在する場合、アクセシビリティを向上させるために、タイトルバーが UI の残りの部分と一緒にズームするようになりました。

選択範囲の折りたたみ

コマンド [選択範囲から手動折りたたみ範囲を作成] (⌘K ⌘, (Windows、Linux Ctrl+K Ctrl+,)) は、現在選択されている行から折りたたみ範囲を作成し、それを折りたたみます。この範囲は 手動 折りたたみ範囲と呼ばれ、折りたたみプロバイダーによって計算された範囲の上に配置されます。

手動折りたたみ範囲は、コマンド [手動折りたたみ範囲を削除] (⌘K ⌘. (Windows、Linux Ctrl+K Ctrl+.)) で再度削除できます。

手動折りたたみ範囲は、プログラミング言語で折りたたみがサポートされていない場合に特に役立ちます。

折りたたみ範囲の保持

VS Code は、折りたたみ範囲が折りたたみプロバイダーによって計算された範囲の一部でなくなった場合でも、折りたたみ範囲を保持するようになりました。典型的な例は、ユーザーがファイルをコメントアウトしたり、文字列リテラルを開始したり、すべての範囲を作成できなくなる構文エラーを作成したりする場合です。このような折りたたみ範囲は、「復元された」範囲になります。これらは、折りたたみプロバイダーが同じ場所の範囲を返した場合、またはコマンド [手動折りたたみ範囲を削除] を使用した場合に削除されます。

折りたたみコントロールの非表示

ガターの折りたたみコントロールは、設定 "editor.showFoldingControls": "never" で非表示にできるようになりました。折りたたみ範囲は、折りたたみコマンドとショートカットを使用して展開および折りたたむことができます。

3 ウェイマージエディターの改善

新しい 3 ウェイマージエディターの改良を続け、このリリースでデフォルトで有効にしました。マージエディターは、ソース管理ビューで競合しているファイルをクリックすると開くことができます。

ハイライトには、一方の側のすべての変更を受け入れる新しいコマンド、改善されたコンテキストメニュー、強化された差分色、および競合と非競合の変更の強調表示が含まれます。

また、マージコンフリクトの精度を向上させるために、代替の差分アルゴリズムの調査を開始しました。差分エディターまたはマージエディターで最適ではない変更のハイライトまたは配置が発生した場合は、これらのケースを GitHub issue tracker に記録したいと思います。

コマンドラインオプション merge

コマンドラインオプションを使用して、VS Code でマージエディターを起動できるようになりました。

-m --merge <path1> <path2> <base> <result> Perform a three-way merge by providing paths for two modified versions of a file, the common origin of both modified versions, and the output file to save merge results.

これにより、たとえば .gitconfig でこれを構成すると、Git のマージツールとして VS Code を使用できるようになります。

[merge]
  tool = code
[mergetool "code"]
  cmd = code --wait --merge $REMOTE $LOCAL $BASE $MERGED

検索ファイル装飾

検索ビューの検索結果に、ファイルの問題とソース管理情報を表現するために、右側にファイル装飾と色が表示されるようになりました。これは、ファイルエクスプローラーにすでに表示されているファイル装飾と同様です。

Search file decorations

複数選択検索

検索ビューも複数選択をサポートするようになりました。選択範囲内の 1 つの結果に対して実行するアクション (たとえば、無視または置換) は、他の選択された項目にも実行されます。

ツリー検索コントロール

ファイルエクスプローラーなどのツリービューで、検索コントロールがサポートされるようになりました。ツリー内で ⌥⌘F (Windows、Linux Ctrl+Alt+F) を押すと、検索コントロールがポップアップ表示されます。検索コントロールを使用して、一致する要素を強調表示したり、[フィルター] ボタンを切り替えて、検索語句に一致しないすべての要素を非表示にしたりできます。

注: ファイルエクスプローラーにフォーカスがある状態で ⌥⌘F (Windows、Linux Ctrl+Alt+F) を呼び出すときにエディターで検索コントロールを開くことに慣れている場合は、キーバインドをそれに応じて構成できます。

{
  "key": "cmd+f", // "ctrl+f" on Windows/Linux
  "command": "-list.find",
  "when": "listFocus && listSupportsFind"
}

新しいファイルによる任意のファイル作成

[ファイル] > [新しいファイル...] ([ようこそ] ページの [新しいファイル...] リンク) エクスペリエンスが改善され、任意のファイル作成が可能になりました。クイック入力ボックスにファイル名を入力して、ディスクにファイルを作成できるようになりました。

A input box with test.js inputted into it and the entry New File(test.js) selected

ターミナル

デフォルトで有効になっているシェル統合

前回のリリースでプレビューから移行したシェル統合の自動挿入が、デフォルトで有効になりました。サポートされているシェルセットアップ (ほとんどの bash/zsh/pwsh 構成) では、変更なしで動作するはずで、コマンド装飾が表示されるはずです。

When shell integration is enabled, blue, red and grey circles appear next to commands run in the terminal

テーマ: Sapphire Theme

注: Windows では、シェル統合サポートのために PowerShell 7 (pwsh) が必要になります。https://aka.ms/PSWindows からインストールできます。

シェル統合機能が自動的に点灯しない場合は、手動インストールを設定する必要があります。これは今回のリリースで簡略化されました。

terminal.integrated.shellIntegration.enabled 設定が true に設定されている場合、自動挿入が有効になります。この機能を無効にするには、これを settings.json ファイルに追加します。

"terminal.integrated.shellIntegration.enabled": "false"

これにより、VS Code のシェル統合挿入のみが無効になります。無効になっている場合でも、セットアップで VS Code が理解できる他のターミナルに対してシェル統合が有効になっている場合は、それらをまだ選択できます。コマンドまたはスクロールバーの装飾が気に入らない場合は、表示のみを無効にすることができますが、シェル統合がもたらす追加機能は引き続き利用できます。

簡略化されたシェル統合手動インストール

以前の手動インストールは、いくつかの手順が必要で、プラットフォームとシェルに固有のものでした。新しい手動インストールでは、code CLI を使用してシェル統合スクリプトを取得し、クロスプラットフォームで動作し、リモートウィンドウに接続されている場合でも動作します。つまり、ドットファイルで同期でき、動作するはずです。

# Manual install on bash
[[ "$TERM_PROGRAM" == "vscode" ]] && . "$(code --locate-shell-integration-path bash)"

他のシェルのシェル統合をインストールする方法の詳細については、ターミナルシェル統合を参照してください。

シェル統合の構成オプションの追加

新しい設定 terminal.integrated.shellIntegration.decorationsEnabled を使用すると、gutter、overviewRuler、またはそのどちらにもコマンド装飾を表示できます。簡単にアクセスできるように、装飾をクリックしたときのコンテキストメニューの [コマンド装飾の構成] を介してこの設定を変更できます ([表示/非表示の切り替え] を選択してオプションドロップダウンを表示します)。

The command decoration context menu contains the new option Configure Command Decorations

ドロップダウンからデフォルト、成功、またはエラーアイコンを構成することもできます。

デフォルトの色とアイコンのタブ設定

デフォルトのアイコンとターミナルタブの色は、terminal.integrated.tabs.defaultIcon および terminal.integrated.tabs.defaultColor を使用してフォルダーごとに設定できます。

PowerShell の拡張キーバインド

シェル統合のおかげで、Ctrl+Space などの追加の PowerShell キーバインドがあります。これらは、VT エンコードが欠落していたため、以前は不可能でした。pwsh でシェル統合が動作している場合、次のキーバインドが動作するはずです。

  • Ctrl+Space - Windows のみで MenuComplete がデフォルト。
  • Alt+Space - SetMark がデフォルト。
  • Shift+Enter - AddLine がデフォルト。
  • Shift+End - SelectLine がデフォルト。
  • Shift+Home - SelectBackwardsLine がデフォルト。

これは、通常これらのキーバインドが不可能な Linux/macOS を含むすべてのプラットフォームに適用されます。デフォルトは、Set-PSReadLineKeyHandler を使用して pwsh プロファイルでいつでもリセットできます。期待される追加のキーバインドがある場合は、お知らせください。

逆方向検索の代替としての最近のコマンドの実行

シェル統合が有効になっている場合、最近のコマンドの実行は、シェルの逆方向検索 (Ctrl+R) のクロスシェル ドロップイン代替として機能することを目指しています。コマンドをトリガーするときのデフォルトである新しい連続検索モードがあります。これは、ほとんどのシェルで Ctrl+R のように動作し、ファジー検索に切り替えるオプションがあります。

新しい inTerminalRunCommandPicker コンテキストキーが利用可能です。これにより、Ctrl+R のようなキーバインドを次の一致に移動するように設定できます。たとえば、次のキーバインドは、シェルの逆方向検索のかなり完全な代替となり、Ctrl+Alt+R は古い動作へのフォールバックとなります。

{ "key": "ctrl+r",     "command": "workbench.action.terminal.runRecentCommand", "when": "terminalFocus" },
{ "key": "ctrl+alt+r", "command": "workbench.action.terminal.sendSequence", "args": { "text": "\u0012"/*^R*/ }, "when": "terminalFocus" },
{ "key": "ctrl+r",     "command": "workbench.action.quickOpenNavigateNextInViewPicker", "when": "inQuickOpen && inTerminalRunCommandPicker" },
{ "key": "ctrl+c",     "command": "workbench.action.closeQuickOpen", "when": "inQuickOpen && inTerminalRunCommandPicker" },

複数行コマンドは、必要に応じて改行記号を表示するようになり、ブラケット付き貼り付けモードも使用するようになります。つまり、サポートシェルに対して貼り付けられたかのように扱われます。これは通常、個別に実行するのではなく、すべて同じプロンプトに追加されることを意味します。

Run recent command now shows the "Return Symbol" Unicode character (⏎, U+23CE) to visualize new lines

その他のシェル統合の改善

シェル統合への小さな改善点を以下に示します。

  • コマンドナビゲーションの視覚的フィードバックが改善され、「フォーカスボーダー」が短時間表示され、次にガターに永続的な長方形が表示されて、バッファー内の位置を強調表示するのに役立ちます。

    A solid rectangle the color of your theme's focus color now appears to the left of the command being navigated to

  • 新しい workbench.action.terminal.copyLastCommand コマンドを使用して、最後のコマンドの出力をコピーするためのキーバインドを許可できます (ショートカット: Ctrl/Cmd+Shift+Up、Ctrl/Cmd+C、Escape、Ctrl/Cmd+End)。

  • Bash シェル統合

    • より多くの $PROMPT_COMMAND 形式がサポートされています。
    • bash-preexec ヘルパーがすでに使用されている場合でも、シェル統合はさらに適切に動作するはずです。

レンダリングの改善

GPU アクセラレーションが有効になっている場合のターミナルレンダリングに対して、いくつかの改善が行われました。

  • 半円 Powerline シンボルがカスタムレンダリングされるようになりました。前回のリリースの矢印記号と同様に、これらは隣接するセルとシームレスにブレンドされ、行の高さが使用されている場合でもセルの高さまで拡張されるはずです。

    Semi-circle Powerline symbols now render without needing to configure a font

  • 角の丸いボックス描画文字 (╭, ╮, ╰, ╯) で、よりスムーズな曲線を使用するようになりました。

    These round corner symbols now render as perfect 1/4 circles

  • 背景色が変更された場合のグリフのクリッピングが改善されました。これは、npm が警告を出力するときによく見られました。

    Wide characters like W would sometimes escape the background of a cell. For example, when the background of the text was yellow, the W in "WARN" could show unexpected yellow pixels in the top left. The After image shows that it is now fixed

  • 上記のクリッピングの問題と同様に、一部のグリフのアンチエイリアスが他の文字と重なり、視覚効果を低下させるという問題がありました。この問題は、上記の背景の例を使用すると最も簡単に説明できます。Work の k 内のピクセルも、他の方向のセルの境界を逸脱する可能性があります。このピクセルは、背景とほぼ同じ色であるため削除されるため、グリフにはまったく表示されなくなります。

    A pixel in could overlap with the cell to the right, in this case that pixel may not be rendered at all if the difference in color and the background is small

ソース管理

アクションボタンの改善

ユーザーからのフィードバックに基づいて、ソース管理アクションボタンの改良を続けました。

  • [変更の同期] アクションボタンは、ローカルブランチがリモート追跡ブランチよりも進んでいるか遅れているかの確信度が高い場合にのみ表示されます。
  • [コミット] アクションボタンは、スマートコミット設定を考慮しながら、変更されたリソースのリストに基づいてのみ有効になります。
    • git.enableSmartCommit
    • git.suggestSmartCommit
    • git.smartCommitChanges
  • [コミット] アクションボタンのアイコンは、ブランチ保護設定に基づいて更新されます。
    • git.branchProtection
    • git.branchProtectionPrompt

改善されたリベースコンフリクトの解決

このマイルストーンでは、マージコンフリクトを解決するときのリベースフローの小さな問題をいくつか修正しました。ユーザーは、すべてのマージコンフリクトを解決した後、ソース管理ビューの [コミット] ボタンを使用してリベース操作を続行できるようになりました。

コミット入力フィールドのスペルチェック

このマイルストーンでは、コミット入力フィールドでのスペルチェックをサポートするために必要なすべての拡張機能 API が利用可能であることを確認しました。2 つの人気のあるスペルチェック拡張機能の作成者に連絡を取り、コミット説明テキストのスペルチェックを提供するために拡張機能を更新する方法を示すプルリクエストを送信しました。

デバッグ

JavaScript デバッグ

JavaScript/TypeScript プログラムをデバッグするための起動構成を作成するときに、"console": "integratedTerminal" を設定して、ターミナルでプログラムを実行できます (プロセスが直接生成されるのではなく)。数か月前、launch.json 構成の "args" がシェルに対して部分的にエスケープされているが、完全にはエスケープされていないことに気付きました。これは、プログラムに引数を渡そうとすると、シェルで特別な動作が誤ってトリガーされる可能性があることを意味していました。これをクリーンアップしてから、シェルにとって特別な意味を持つ文字を含む引数を設定することは便利なことであり、一部のユーザーはこの動作に依存していることに気付きました。

正しい修正について議論し、この動作はオプトインであるべきであり、Debug Adapter Protocol (DAP) の変更が必要であると判断しました。この変更を DAP に加え、VS Code と js-debug に実装しました。他のデバッグアダプターもすぐに追随するはずです。

Node 起動構成で新しい動作を使用する方法を次に示します。

{
    "type": "node",
    "console": "integratedTerminal",
    ...

    // If you pass args as a single string, the characters will not be escaped for the terminal,
    // so the command in backticks will be evaluated, and output will be redirected to "outfile".
    // The user is responsible for knowing the type of shell that this will be run in,
    // and doing any escaping necessary.
    "args": "`echo hello` > outfile",

    // If you pass args as an array, the characters will be escaped for the terminal,
    // so that the program receives them verbatim.
    "args": ["`echo hello` > outfile"]
}

デバッグセッションのピッカー

デバッグ中に、コマンドパレットで [デバッグ: デバッグセッションを選択] を実行できるようになりました。これにより、アクティブなデバッグセッションのピッカーが表示され、個々のデバッグセッションを検索およびフィルター処理するために使用できます。各ピッカー項目の説明には、該当する場合は、それを生成したセッションが表示されます。

ピッカーで項目を選択すると、[呼び出しスタック] ビューでデバッグセッションがフォーカスされます。デバッグアクション (たとえば、一時停止、ステップ、再起動、停止) は、フォーカスされたデバッグセッションで実行されます。セッションを選択すると、セッションのデバッグコンソールも表示されます。

タスク

[タスクの実行] コマンドのフィルターサポート

[タスク: タスクの実行] (workbench.action.tasks.runTask) アクションは、タスク名とタイプによるフィルター処理をサポートしており、タスクを選択して実行するためのより簡潔で構成可能な方法を提供します。

例:

{
  "key": "ctrl+h",
  "command": "workbench.action.tasks.runTask",
  "args": {
    "task": "VS Code - Build",
    "type": "npm"
  }
}

改善された自動タスクフロー

信頼されたワークスペース機能により、VS Code は自動タスクを実行するためのフローを簡略化できます。デフォルトでは、フォルダーが信頼されている場合は自動タスクが実行され、それ以外の場合はフォルダーごとに 1 回プロンプトが表示されます。この動作は、自動タスクを実行する前に常に (on) または決して (off) プロンプトを表示するように、task.allowAutomaticTasks 設定 (デフォルトは auto) で構成できます。

言語

JSON のフォーマット時に改行を保持

JSON ドキュメントで 1 行をフォーマットするときに、初期行位置を保持できるようになりました。たとえば、1 行に値を含む配列は、フォーマット後も同じ行にこれらの値を保持します。JSON ファイル内の余分な改行 (改行) も保持されます。この機能を有効にするには、設定エディターで [JSON] > [フォーマット: 行を保持] オプションを設定します。

ノートブック

最近失敗したセルに移動

最後に実行したセルが失敗した場合、そのセルにジャンプするボタンが追加されました。[ノートブック: 最近失敗したセルに移動] を実行して、同じアクションを実行することもできます。

これは、セルグループを実行し、どのセルが失敗してグループの実行を停止したかを知りたい場合に役立ちます。

ノートブック Markdown プレビュー添付ファイルレンダリング

Jupyter ノートブック内で埋め込まれた base64 画像をレンダリングできるようになりました。

Jupyter ノートブックに貼り付けられ、![image alt-text](attachment:image.png) を介して参照される画像は、VS Code ノートブック内で意図したとおりにレンダリングされるようになりました。

次の Markdown ソースコード

Notebook Markdown cell source code with image link

次のようにレンダリングされます。

Notebool Markdown cell preview with attachment rendered

ノートブックリンクの共有

[共有] サブメニューの [vscode.dev リンクをコピー] コマンドで、ノートブックリンクがサポートされるようになりました。

VS Code for the Web

表示言語の設定

拡張機能ビューの言語パック拡張機能で使用可能な [表示言語の設定] ボタンを使用して、ブラウザーの表示言語を設定できるようになりました。

Set Display Language button on a language pack in the Extensions view

設定すると、現在設定されている言語パック拡張機能の [表示言語をクリア] ボタンを使用して、表示言語をクリアできます。

Clear Display Language button on the current language pack in the Extensions view

拡張機能への貢献

Python

始め方エクスペリエンス

Python 拡張機能のウォークスルーでは、ユーザーが必要な場合に Python のインストールと選択にスムーズに移行できるようになりました。Python がインストールされていない場合、Microsoft Store または適切なウォークスルータイルが開き、ユーザーは表示された手順を自動実行できます。インタープリターに関連するプロンプトは、ユーザーアクションがインタープリターを必要とする場合にのみ表示され、起動時には表示されません。また、UI プロンプトが改善され、エラーと提案された変更についてより正確になりました。

Python in-product Get started walkthrough

ステータスバーのインタープリター情報

新しい設定 python.interpreter.infoVisibility が追加されました。これは、選択されたインタープリターに関する情報をステータスバーに表示するタイミングを制御します。デフォルトでは、インタープリター情報は Python 関連ファイルが開かれた場合 (onPythonRelated) にのみ表示されます。always に設定すると、選択されたインタープリターが開かれているファイルに関係なく表示される古い動作に戻すことができます。選択されたインタープリターが無効な場合を示す警告ステータスが追加されました。

Interpreter information in the Status bar

自動デバッグ構成

Python 拡張機能は、現在のプロジェクトを分析し、追加の変更を必要としないデバッグ構成を提供する自動デバッグ構成をサポートするようになりました。

この拡張機能は、Django、Flask、FastApi プロジェクト、および単純な Python ファイルを認識します。

自動デバッグ構成と最近の改善点の詳細をご覧ください。

試験的な拡張機能: WWBD

Python 環境ワークフローのアイデアのサンドボックスとして機能する WWBD という名前の新しい試験的な Python 拡張機能があります。現在のところ、仮想環境用の [環境を作成] コマンドがあり、単一のコマンドでユーザーが新しい仮想環境をセットアップできるかどうかを確認できます (詳細とその他の拡張機能については、WWBD 拡張機能ページを参照してください)。プロジェクトリポジトリの アイデアカテゴリ で、conda サポートを含む、検討されている他のアイデアについて読むことができます。

Jupyter

プロット画像をクリップボードにコピー

Jupyter 拡張機能で、セル出力のプロットをクリップボードにコピーできるようになりました。正しいプレゼンテーションが選択されていることを確認してください。現在、PNG 出力のみがサポートされています。

Select image/png when copying plot to the clipboard

正しいプレゼンテーションタイプを設定したら、右上にあるクリップボードにコピーボタンを選択します。

Copy plot button

Web 拡張機能

次の機能が Jupyter 拡張機能の Web バージョンに移植されました。

  • プロットビューアー
  • データフレームビューアー

機能を試してみたい場合は、ローカルマシンから Jupyter を起動します。

jupyter notebook --no-browser --NotebookApp.allow_origin_pat=https://.*\.vscode-cdn\.net

次に、vscode.dev 内から [Jupyter: 接続用の Jupyter サーバーを指定] コマンドを使用して接続します。

詳細 (およびコメント) については、このディスカッション項目を参照してください。

インタラクティブウィンドウの復元

設定 interactiveWindow.restore をオンにすると、VS Code ウィンドウの再読み込み間でインタラクティブウィンドウセッションを復元できるようになりました。

制限事項: 生のカーネル状態は、ウィンドウの再読み込み間で永続化されません (詳細については、このディスカッション項目を参照してください)。リモート Jupyter サーバーを使用している場合、インタラクティブウィンドウは再読み込み時に以前のカーネルセッションに接続されます。

.env ファイルからの環境変数の読み込み

.env ファイルからの環境変数の読み込みに対して、.env ファイルの変更の検出など、多くの修正が行われました。Python カーネルは、設定 python.envFile で定義されたファイルから環境変数を読み込むようになりました。

GitHub Pull Requests and Issues

GitHub Pull Requests and Issues 拡張機能の進捗状況がさらに進んでいます。この拡張機能を使用すると、プルリクエストと Issue の作業、作成、管理を行うことができます。このリリースのハイライトは次のとおりです。

  • ビューアーの最後のレビュー以降のプルリクエストへの変更のみを表示する新しいボタンがあります。
  • ソース管理ビューの新しい [コミット & プルリクエストの作成] アクションを使用すると、Git コミットを実行して、ワンステップで [PR の作成] ビューに移動できます。
  • githubPullRequests.pullRequestDescription 設定を使用して、PR 説明のソーステキストを構成できます。

その他のハイライトについては、拡張機能の 0.48.0 リリースの変更ログを確認してください。

リモート開発

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

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

プレビュー機能

エディタースティッキースクロール

スクロール中にユーザーがどのスコープにいるかを示す UI を表示できるようになりました。「スティッキースクロール」UI は、エディターの先頭がどのクラス/インターフェース/名前空間/関数/メソッド/コンストラクターにあるかを示し、ドキュメント内の場所を把握するのに役立ちます。editor.experimental.stickyScroll.enabled 設定でスティッキースクロールを有効にします。

<video src="/assets/updates/1_70/sticky-scroll.mp4" autoplay loop controls muted title=""Sticky scroll" showing the source code scope for a TypeScript file">

TypeScript 4.8 のサポート

このアップデートには、まもなくリリースされる TypeScript 4.8 のサポートが含まれています。TypeScript チームが現在取り組んでいる内容の詳細については、TypeScript 4.8 イテレーション計画を参照してください。

TypeScript 4.8 のナイトリービルドの使用を開始するには、TypeScript Nightly 拡張機能をインストールしてください。

設定プロファイル

私たちは、コミュニティから最も要望の多かった機能の 1 つである、VS Code での設定プロファイルのサポートにここ数ヶ月取り組んできました。この機能は、Insiders リリースで workbench.experimental.settingsProfiles.enabled 設定を介してプレビュー利用可能です。ぜひお試しいただき、VS Code リポジトリで Issue を作成するか、issue #116740 にコメントしてフィードバックをお寄せください。

このマイルストーンでは、VS Code for the Web での設定プロファイルのサポートも追加しました。insiders.vscode.dev と同じ workbench.experimental.settingsProfiles.enabled 設定を使用して試すことができます。

テーマ: Light Pink

タスクの再接続

ウィンドウのリロード時に、task.experimental.reconnection を有効にすることで、ウォッチタスクを再接続できるようになり、拡張機能の変更や VS Code のバージョンアップデート後の作業への復帰が迅速になります。

コードアクション

私たちは、VS Code でのコードアクションのエクスペリエンスを向上させるために取り組んできました。コードアクションには、リファクタリング、ソースアクション、およびクイックフィックスが含まれます。

新しい試験的なコードアクションコントロールは、コンテキストメニューからリファクタリングまたはソースアクションを選択するか、電球アイコンから、またはクイックフィックスを介して開くことができます。editor.experimental.useCustomCodeActionMenu 設定で試してみてください。VS Code リポジトリで Issue を作成するか、issue #152913 にコメントしてフィードバックをお寄せください。

コードアクションのリファクタリングプレビューも、新しいコードアクションコントロールからアクセスできます。有効になっている項目にカーソルを合わせると、プレビューの表示方法が表示されます。コードアクションの選択や、選択のプレビューのためのカスタムキーバインディングがサポートされています。

このマイルストーンでは、クイックフィックス（⌘. (Windows, Linux Ctrl+.)）を含むコードアクションのカスタムキーバインディングのサポートも追加しました。keybindings.json に、希望するキーボードショートカットで次のスニペットを追加することで試すことができます。

[
  {
    "key": "ctrl+k",
    "when": "codeActionMenuVisible",
    "command": "focusPreviousCodeAction"
  },
  {
    "key": "ctrl+j",
    "when": "codeActionMenuVisible",
    "command": "focusNextCodeAction"
  }
]

VS Code for the Web とデスクトップを横断する Edit Sessions

Edit Sessions の作業が継続されています。これにより、VS Code for the Web またはデスクトップを横断してリポジトリでの作業を継続する際に、コミットされていない変更を持ち込むことができます。主なハイライトは次のとおりです。

  • Edit Sessions 機能をオフにすると、クラウドから保存されているすべての Edit Sessions を削除できるようになりました。
  • Microsoft 認証でのサインインがサポートされるようになりました。
  • Edit Sessions の場所がわからない場合は、Edit Sessions: Show Edit Sessions コマンドを使用して、すべての Edit Sessions を表示できます。

Edit Sessions を試すには、設定で workbench.experimental.editSessions.enabled を設定し、Edit Sessions: Store Current Edit Session コマンドを使用し、プロンプトが表示されたら GitHub または Microsoft 認証でサインインします。次に、別のマシンまたは VS Code インスタンスのリポジトリで Edit Sessions: Resume Latest Edit Session コマンドを使用して、すべての変更されたファイルの作業内容をワークスペースに復元します。Edit Sessions: Sign Out コマンドを使用すると、いつでも Edit Sessions からサインアウトできます。

Edit Sessions のエクスペリエンスを反復して改善し続ける中で、ぜひお試しいただき、issue #141293 にコメントでフィードバックをお寄せください。

拡張機能の作成

'when' 句のための 'not in' 演算子

when 句には、配列またはオブジェクト型の値を持つ別のコンテキストキー内でコンテキストキーの値を動的に検索できる演算子 in がすでに存在します。これの否定となる新しい演算子 not in を追加しました。詳細については、when 句コンテキストのドキュメントを参照してください。

htmlLanguageParticipants contribution point

新しい contribution point である htmlLanguageParticipants を使用すると、HTML のような言語が、コード補完、ホバー、アウトラインなど、すべての HTML 言語サーバー機能を継承したいことを宣言できます。これは、完全な言語サーバーを実装したくないプログラミング言語拡張機能に役立ちます。

例としては、組み込みの handlebars 拡張機能があり、package.json の htmlLanguageParticipants に自身を追加するようになりました。

"contributes": {
  "htmlLanguageParticipants": [
     {
       "languageId": "handlebars"
      }
    ]
}

Quarkus 拡張機能は、すでにこの contribution point を採用しています。埋め込みの Qute HTML テンプレート言語の追加提案で HTML 機能を強化します。

エディター API へのドロップ

テキストエディターのドロップ API を使用すると、拡張機能は、ファイルやその他のコンテンツのテキストエディターへのドロップを処理できます。これらのドロップイベントは、VS Code 内から（VS Code のエクスプローラーからテキストエディターへのファイルのドラッグなど）、またはオペレーティングシステムから VS Code へのファイルのドロップによって生成される場合があります。

エディターにファイルをドロップするには、ユーザーは kbsytyle(Shift) を押しながらドラッグし、ファイルをファイル内の特定の場所にドロップできます。この時点で、拡張機能はドロップされたデータをどう処理するかを選択できます。

この API の簡単な使用例については、エディター拡張機能のサンプルへのドロップをご覧ください。

提案された API

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

  1. 試したい提案を見つけ、その名前を package.json#enabledApiProposals に追加します。
  2. 最新の vscode-dts を使用し、vscode-dts dev を実行します。対応する d.ts ファイルがワークスペースにダウンロードされます。
  3. これで、提案に対してプログラミングできます。

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

Webview コンテキストメニュー

新しい webview コンテキストメニューの提案により、高度な webview は、ユーザーが webview 内を右クリックしたときに表示されるコンテキストメニューを簡単にカスタマイズできます。この新しい contribution point は VS Code の通常のコンテキストメニューを使用するため、カスタムメニューはエディターの他の部分に適切に適合します。Webview は、webview のさまざまなセクションに対してカスタムコンテキストメニューを表示することもできます。

この新しい API を試すには、contribWebviewContext 提案を有効にする必要があります。

"enabledApiProposals": [
  "contribWebviewContext"
]

新しいコンテキストメニュー項目を webview に追加するには、新しい webview/context セクションの下の menus に新しいエントリを追加します。各 contribution は、command（タイトルもここから取得されます）と when 句を受け取ります。when 句には、コンテキストメニューが拡張機能の webview にのみ適用されるように、webview == 'YOUR_WEBVIEW_VIEW_TYPE' を含める必要があります。

"contributes": {
  "menus": {
    "webview/context": [
      {
        "command": "catCoding.yarn",
        "when": "webview == 'catCoding'"
      },
      {
        "command": "catCoding.insertLion",
        "when": "webview == 'catCoding' && webviewSection == 'editor'"
      }
    ]
  },
  "commands": [
    {
      "command": "catCoding.yarn",
      "title": "Yarn 🧶",
      "category": "Cat Coding"
    },
    {
      "command": "catCoding.insertLion",
      "title": "Insert 🦁",
      "category": "Cat Coding"
    },
    ...
  ]
}

webview 内では、data-vscode-context データ属性（または JavaScript で dataset.vscodeContext）を使用して、HTML の特定の領域のコンテキストを設定することもできます。data-vscode-context 値は、ユーザーが要素を右クリックしたときに設定するコンテキストを指定する JSON オブジェクトです。最終的なコンテキストは、ドキュメントルートからクリックされた要素までをたどることによって決定されます。

<div data-vscode-context='{"webviewSection": "container", "mouseCount": 4}'> 

<div class="main" data-vscode-context='{"webviewSection": "main", "mouseCount": 4}'>
  <h1>Cat Coding</h1>

  <textarea data-vscode-context='{"webviewSection": "editor", "preventDefaultContextMenuItems": true}'></textarea>
</div>

たとえば、この HTML を考えてみましょう。

  • ユーザーが textarea を右クリックすると、次のコンテキストが設定されます。
  • webviewSection == 'editor' — これは、親要素からの webviewSection をオーバーライドします。
  • mouseCount == 4 — これは、親要素から継承されます。

preventDefaultContextMenuItems == true — これは、VS Code が通常 webview コンテキストメニューに追加するコピーと貼り付けのエントリを非表示にする特別なコンテキストです。

Custom context menus showing in a webview

ユーザーが <textarea> 内を右クリックすると、次のように表示されます。

ビューのサイズ

"contributes": {
    "views": {
        "github-pull-request": [
            {
                "id": "github:createPullRequest",
                "type": "webview",
                "name": "Create Pull Request",
                "size": 2
            },
            {
                "id": "github:compareChanges",
                "name": "Compare Changes",
                "size": 1
            }
        ]
    }
}

ビューのサイズ提案により、拡張機能は contribution するビューに重みを指定できます。

サイズは、CSS プロパティ flex-grow と同様に機能します。上記の例では、"size": 2 のビューは、"size": 1 のビューの 2 倍のサイズになります。size プロパティは、ビューコンテナーが同じ拡張機能によって contribution されている場合にのみ尊重されます。

拡張可能な HTML Notebook レンダラー

組み込みの Notebook レンダラーは、拡張機能が HTML コンテンツのレンダリングをカスタマイズできる試験的な API を公開するようになりました。この API は現在、HTML コンテンツの初期レンダリング後に呼び出される単一のフックである postRender を公開しています。

"contributes": {
  "notebookRenderer": [
    {
      "id": "vscode-samples.my-custom-html-extension",
      "displayName": "My custom html renderer extension",
      "entrypoint": {
        "extends": "vscode.builtin-renderer",
        "path": "./out/main.js"
      }
    }
  ]
}

この試験的な API の使用を試すには、拡張機能が vscode.builtin-renderer API を拡張する必要があります。

import type { RendererContext } from 'vscode-notebook-renderer';

export async function activate(ctx: RendererContext<void>) {
  const htmlRenderer = await ctx.getRenderer('vscode.builtin-renderer');
  if (!htmlRenderer) {
      throw new Error(`Could not load 'vscode.builtin-renderer'`);
  }

  htmlRenderer.experimental_registerHtmlRenderingHook({
    // Invoked after the HTML content for `outputItem` has been rendered to `element`
    postRender(outputItem: OutputItem, element: HTMLElement): HTMLElement | undefined {
      // You can either modify `element` or return a replacement element
    }
  });
}

レンダラーは、vscode-builtin-renderer にレンダリングフックを登録できます。

デバッグアダプタープロトコル

この新しい API を試して、ご感想をお聞かせください！

RunInTerminalRequest の argsCanBeInterpretedByShell

エンジニアリング

RunInTerminalRequest は、新しいプロパティである argsCanBeInterpretedByShell をサポートしています。これは、コマンド args の特殊なシェル文字をエスケープせずに残す必要があるかどうかをクライアントに伝えます。これは、ターミナルで起動し、シェルによって解釈されるべき文字を含む起動構成をユーザーが記述できるようにするためです。

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

このマイルストーンでは、デフォルトで Electron の サンドボックスを有効にすることに向けて大きな進歩がありました。8 月に Insiders 向けにサンドボックスを有効にし、最終的には Stable VS Code でデフォルトにすることを目指しています。

興味のある方は、設定で "window.experimental.useSandbox": true を構成すると、サンドボックスモードが有効になります。何も変更に気付かないはずですが、問題が見つかった場合は、お知らせください。

Markdown Language Server

今回のイテレーションでは、Markdown を記述するための VS Code のツールの多くを、ライブラリと Language Server に抽出しました。これには、パス補完、ドキュメントアウトライン、および診断のためのツールが含まれます。

VS Code の組み込み Markdown 拡張機能は、すでにこの新しい Language Server を使用するように切り替えましたが、動作に違いは感じられないはずです。この切り替えにより、Markdown ツールが独自のプロセスに移動するため、パフォーマンスが向上するはずです。Language Server に移行したことで、試験的な Markdown リンク診断のパフォーマンスも向上しました。

  • 私たちの願いは、他のツールやエディターもこれらの新しいパッケージから恩恵を受け、さらにはそれらに貢献できることです。皆様と一緒に、すべての人にとってより良い Markdown ツールを構築できます！ご興味のある方は、関連プロジェクトをご確認ください。
  • Markdown Language Service — Markdown を扱うためのツールを提供する TypeScript ライブラリ。

Markdown Language Server — Language Server を使用して構築された Markdown 用の Language Server。

Debian パッケージの依存関係

ドキュメントと拡張機能

Debian パッケージの依存関係は、ハードコードではなくスクリプトによって生成されるようになりました。これにより、依存関係が欠落していると一部のマシンでプログラムがランタイム時にクラッシュする原因となっていた、2016 年に提出された Issue が解決しました。

Development Container CLI

Banner from the Development Containers Specification website

Development Container コマンドラインインターフェース（CLI）のトピックが、CLI の最新バージョンに合わせて更新されました。Development Container CLI を使用すると、Development Container をビルドおよび実行でき、Development Containers Specification のオープンソースのリファレンス実装です。

Azure Developer CLI (azd)

Azure Developer CLI extension

Azure Developer CLI と、それを補完する VS Code 拡張機能がパブリックプレビューになりました。Azure Developer CLI (azd) は、ローカル開発環境から Azure への移行にかかる時間を短縮します。ワークフローの主要な段階（コード、ビルド、デプロイ、監視、繰り返し）に対応する、開発者に優しいコマンドを提供することで実現します。

Azure Developer CLI は、アプリケーションを Azure で起動および実行するために必要なすべてを含む 拡張可能なテンプレート を使用します。テンプレートには、ベストプラクティス、アプリケーションコード、再利用可能な Infrastructure as Code アセットが含まれています。さらに、テンプレートは「Hello World!」をはるかに超えるエンドツーエンドのシナリオをカバーしています。

ありがとうございました

Azure Developer CLI を使用すると、アプリケーションを初期化、プロビジョニング、およびデプロイできます。さらに良いことに、'azd up' を使用すると、1 つのステップでそれを行うことができます！サポートされている azd コマンドのリストについては、Developer CLI リファレンスを参照してください。

最後になりましたが、VS Code のコントリビューターの皆様に心から感謝申し上げます。

Issue の追跡

Simon Chan (@yume-chan)

プルリクエスト

vscode-generator-code への貢献

vscode-js-debug への貢献

vscode-json-languageservice への貢献

monaco-editor への貢献