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

2022年6月 (バージョン 1.69)

アップデート 1.69.1: このアップデートでは、これらの問題が解決されています。

アップデート 1.69.2: このアップデートでは、これらの問題が解決されています。

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

Visual Studio Code の2022年6月リリースへようこそ。このバージョンには、気に入っていただけるであろう多くの更新が含まれています。主なハイライトの一部を以下に示します。

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

リリースパーティーを見る: VS Code チームが新機能の一部を議論する様子を聞いてください。イベントの録画は、YouTubeチャンネルで見つけることができます。

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

Workbench

3ウェイマージエディター

このリリースでは、3ウェイマージエディターの作業を継続しました。この機能はgit.mergeEditorをtrueに設定することで有効になり、将来のリリースではデフォルトで有効になります。

マージエディターを使用すると、Gitのマージの競合を素早く解決できます。有効にすると、ソース管理ビューで競合するファイルをクリックすることでマージエディターを開くことができます。Theirs (相手の変更) または Yours (自分の変更) の変更を受け入れて結合するためのチェックボックスが利用可能です。

すべての言語機能はマージエディターで利用可能です（診断、ブレークポイント、テストを含む）。そのため、マージ結果のあらゆる問題について即座にフィードバックを得ることができます。

結果も直接編集できます。チェックボックスが期待通りに更新されることに注目してください。

マージエディターを閉じたり、マージを受け入れたりする際に、すべての競合が解決されていない場合、警告が表示されます。

マージエディターは単語レベルのマージをサポートしており、変更が重ならない限り、両方の変更を適用できます。挿入順序が重要な場合は、入れ替えることもできます。いつでも、競合を手動で解決することも可能です。

皆様からのフィードバックをお待ちしております。マージの競合を共有するには、コマンド マージエディター (Dev): JSONから入力、ベース、結果のコンテンツをコピー を使用し、その内容をGitHubの課題に貼り付けてください。

コマンドセンター

コマンドセンターは改善され、試用できる状態になりました。window.commandCenter 設定で有効にしてください。

コマンドセンターは通常のタイトルバーに代わり、プロジェクト内のファイルを素早く検索できます。メインセクションをクリックすると、最近のファイルと検索ボックスを含むクイックオープン ドロップダウンが表示されます。

The Command Center and its hover message atop the window

テーマ: GitHub Theme

コマンドセンターには、右側に「?」経由でクイックアクセスオプションを表示するボタンもあります。左側には、エディター履歴を移動するための Go Back (戻る) および Go Forward (進む) ボタンがあります。

設定エディターの変更インジケーター

設定エディターは、設定に言語オーバーライドがある場合に表示されるようになりました。補足として、言語オーバーライドは常に非言語固有のオーバーライドよりも優先されるため、特定の種類の設定ファイルの動作に設定の値が影響しないように見える場合、その設定に言語オーバーライドがある可能性があります。

インジケーターテキストは、より明確で簡潔になるように変更されました。以下の短いビデオは、新しい Modified elsewhere (他で変更済み) インジケーターを示しています。インジケーターにカーソルを合わせると、該当する場合に言語オーバーライドを示すホバーが表示されます。ビデオでは後に、テキスト Default value changed (デフォルト値が変更されました) を含む新しいデフォルトオーバーライドインジケーターが示されています。

テーマ: Light Pink

集中モード

新しい集中モードを有効にすると、エラー以外のすべての通知ポップアップが非表示になります。進捗通知は、ステータスバーに自動的に表示されます。非表示の通知は、引き続き通知センターで表示できます。

Do Not Disturb mode shown in the Status bar and Notification center

集中モードを切り替えるには、通知センターを開き（ステータスバーの右側にあるベルのアイコンを選択）、スラッシュのベルアイコンをクリックします。集中モードは、ステータスバーのスラッシュのベルアイコンで示されます。

ライトテーマとダークテーマの切り替え

新しいコマンド 設定: ライト/ダークテーマの切り替え を使用すると、お好みのライトテーマとダークテーマを切り替えることができます。ライトテーマの場合、コマンドはダークテーマに切り替わり、その逆も同様です。

ハイコントラストテーマの場合、コマンドはハイコントラストのまま、反対のカラーテーマの好みのハイコントラストテーマに切り替わります。

好みのテーマは、以下の設定によって定義されます。

  • workbench.preferredDarkColorTheme
  • workbench.preferredLightColorTheme
  • workbench.preferredHighContrastColorTheme
  • workbench.preferredHighContrastLightColorTheme

ミニマップのコンテキストメニュー

VS Code のミニマップは、エディターの横にソースコードファイルの概要を高いレベルで表示します。これまで 表示: ミニマップの表示/非表示 コマンドを使用してミニマップの表示を切り替えたり、エディター > ミニマップ: 有効 (editor.minimap.enabled) 設定でミニマップを完全に無効にしたりすることができました。このリリースでは、ミニマップを簡単に表示または非表示にするためのコンテキストメニューが追加されました。

Minimap context menu

サイズ (editor.minimap.size)、スケール (editor.minimap.scale)、スライダー (editor.minimap.showSlider) の設定で外観を調整することもできます。ミニマップが非表示になっている場合でも、サイドのガターを右クリックすることでコンテキストメニューを表示できます。

共有メニュー

ファイル > 共有 サブメニューから vscode.dev リンクをコピー コマンドを使用すると、開いている GitHub リポジトリの vscode.dev リンクを素早く取得できます。共有 サブメニューは、エディターのコンテキストメニューからも利用できます。

ターミナル

シェル統合

PowerShell、bash、zsh のシェル統合は、1月リリース以来プレビュー版でしたが、プレビューが終了しました！1.70 リリースでは、デフォルトで有効にする予定です。

シェル統合機能を有効にするには、設定エディターで ターミナル > 統合 > シェル統合: 有効 をチェックするか、settings.json で値を設定します。

"terminal.integrated.shellIntegration.enabled": true

シェル統合により、VS Code のターミナルはシェル内で何が起こっているかをより深く理解し、より多くの機能を有効にすることができます。シェル統合の目標の1つは、設定不要で動作する ことでした。これは、設定が有効になっているときに、シェル引数や環境変数を通じてシェル統合スクリプトをシェルセッションに自動的に「注入」することで実現されました。サブシェルや一部の複雑なシェル設定ではこれが機能しない場合がありますが、より高度なケース向けには手動インストールルートも用意されています。

以下は、シェル統合が現在提供している機能の概要です。

コマンドデコレーションと概要ルーラー

シェル統合は、ターミナル内で実行されたコマンドの終了コードを取得する機能を持っています。この情報を使用して、コマンドが成功したか失敗したかを示すために、行の左側にデコレーションが追加されます。これらのデコレーションは、エディターと同様に、スクロールバーの概要ルーラーにも表示されます。

Blue circles appear next to successful commands, red circles with crosses appear next to failed commands. The color of the circles appears in the scroll bar

デコレーションは、コマンドの再実行のようなコンテキストアクションをサポートできます。

Clicking a successful command decoration shows a context menu containing items: Copy Output, Copy Output as HTML, Rerun Command and How does this work?

コマンドデコレーションは、以下の設定で構成できます。

  • terminal.integrated.shellIntegration.decorationIcon
  • terminal.integrated.shellIntegration.decorationIconSuccess
  • terminal.integrated.shellIntegration.decorationIconError

コマンドナビゲーション

シェル統合によって検出されたコマンドは、コマンドナビゲーション機能 (Ctrl/Cmd+Up、Ctrl/Cmd+Down) に供給され、より信頼性の高いコマンド位置を提供します。この機能により、コマンド間の素早い移動と、その出力の選択が可能になります。

最近のコマンドを実行

ターミナル: 最近のコマンドを実行 コマンドは、さまざまなソースからの履歴をクイックピックに表示し、シェルの逆検索 (Ctrl+R) と同様の機能を提供します。最近のコマンドは、現在のセッションの履歴、このシェルタイプの前回のセッション履歴、および共通のシェル履歴ファイルから取得されます。

The "run recent command" command shows a Quick Pick with commands ran previously that can be filtered similar to the Go to File command

コマンドのその他の機能

  • 現在のセッションセクションには、クイックピックの右側にクリップボードアイコンがあり、コマンド出力がエディターで開きます。
  • Alt キーを押しながらターミナルにテキストを書き込むと、実行せずに書き込めます。
  • 前回のセッションセクションに保存される履歴の量は、terminal.integrated.shellIntegration.history 設定によって決定されます。

現在、最近のコマンドを実行 にはデフォルトでキーバインドが割り当てられていませんが、例として、以下のキーバインドで Ctrl+Space にフックアップできます。

{
    "key": "ctrl+space",
    "command": "workbench.action.terminal.runRecentCommand",
    "when": "terminalFocus"
},

最近のディレクトリに移動

最近のコマンド実行機能と同様に、ターミナル: 最近のディレクトリに移動 コマンドは、訪問したディレクトリを追跡し、それらへの素早いフィルタリングとナビゲーション (cd) を可能にします。

<video src="/assets/updates/1_69/terminal-si-go-to-dir.mp4" autoplay loop controls muted title="「最近のディレクトリに移動」コマンドは、以前に移動したディレクトリのクイックピックを表示し、いずれかを選択すると「cd path」を実行します。">

Alt キーを押しながらターミナルにテキストを書き込むと、実行せずに書き込めます。

現在の作業ディレクトリの検出

シェル統合は、現在の作業ディレクトリが何であるかを教えてくれます。この情報は、これまではWindowsでは多くのハックなしには判別不可能であり、macOSとLinuxではポーリングが必要で、パフォーマンスには良くありませんでした。

現在の作業ディレクトリは、相対リンクの解決、最近実行されたコマンドのディレクトリの表示、および分割された現在の作業ディレクトリ "terminal.integrated.splitCwd": "inherited" 機能のサポートに使用されます。

シェル設定に対するサポートの拡大

このリリースでは、bash-preexec との統合を改善し、powerlevel10k の基本的なサポートを追加し、シェル統合が機能しないケースをより多く検出し、機能を適切に無効化しました。この分野では、今後も長期的な改善が期待されます。

SetMark シーケンスのサポート

ターミナルは、iTerm2 によって作成されたシーケンス 'OSC 1337 ; SetMark ST' をサポートするようになり、行の左側とスクロールバーにマークを追加できるようになりました。

When the sequence is written to the terminal, a small grey circle will appear to the left of the command, with a matching annotation in the scroll bar

テーマ: Sapphire Theme

スクリプトでこれをトリガーする方法の例をいくつか示します。

  • bash: echo -e 'Mark this line\x1b]1337;SetMark\x07'
  • pwsh: Write-Host "Mark this line`e]1337;SetMark`a"

単純なPowerlineグリフのカスタムレンダリング

ターミナルでGPUアクセラレーションが有効になっている場合、4つの一般的な角括弧の Powerline シンボルが、ボックス描画文字やブロック文字と同様にカスタムレンダリングされるようになりました。これにはいくつかの利点があります。

  • サブピクセルアンチエイリアシングは使用されず、両側に不快な赤や青の輪郭が生じて「パワーライン」が途切れることはありません。
  • これらの文字は、パッチ適用済みのフォントをインストールすることなく動作します。
  • 行の高さがこれらの文字に影響します。

以前

Line height would not be respected, leading to a Powerline symbol with a different height to adjacent cells. Additionally, a blue outline could appear when sub-pixel anti-aliasing was used

以後

Line height is now respected and greyscale anti-aliasing is used for improved rendering

VS Codeからのメッセージの一貫したフォーマット

以前は、プロセスではなく VS Code によって直接書き込まれたターミナル内のメッセージは、いくつかの異なるフォーマットを使用していました。これは、大きなフォーマットとより控えめなフォーマットで全体的に一貫するようになりました。

Loud formatting starts the line with an asterisk with the inverted style, followed by a message using a blue background

Subtle formatting starts the line with an asterisk with the inverted style, followed by a message using the default background

アクセシビリティの改善

このイテレーションでは、ターミナルはアクセシビリティに関していくつかの改善点がありました。

  • より多くのリンクが、ターミナル: 検出されたリンクを開く... コマンドでデフォルトで利用可能になり、残りのターミナルバッファを検索する機能も追加されました。
  • ターミナル: 最近のコマンドを実行 コマンドで、Alt キーを押しながら結果のコマンドを実行せずにテキストを入力できるようになりました。
  • ターミナルでの検索について、スクリーンリーダーによるアナウンスが改善されました。
  • ナビゲーションモード (Ctrl+Up) で、修飾キーなしで上と下を使用できるようになりました。
  • ナビゲーションモード (Ctrl+Up) で、ページ単位でスクロールするためにページアップとページダウンを使用できるようになりました。

プロセスの再接続と復元機能の改善

ターミナル永続化は、UX と信頼性の面でいくつかの改善を受けました。

  • 以前は、ウィンドウを n 回リロードすると、n 個のセッション復元メッセージが表示されました。今後は、セッション復元メッセージは、特定のセッションに入力があった場合にのみ表示されるはずです。
  • 以前は日付を含んでいたセッション復元メッセージは、ノイズを減らすために単に「履歴が復元されました」に短縮されました。
  • 環境を変更したい拡張機能 (例えば、自動 Git 認証をサポートするため) をユーザーに通知する「環境変数収集」機能が、リロードをまたいで動作するようになりました。

タスク

装飾

数回のイテレーション前、ターミナルのナビゲーションを改善するために、シェル統合機能のおかげで、ターミナルバッファと概要ルーラーに装飾を追加しました。装飾は現在、コマンドナビゲーション機能 (Ctrl/Cmd+Up, Ctrl/Cmd+Down) でジャンプできるタスクのポイントもマークします。

開始/停止タスクの場合、タスクの開始点の隣に装飾が表示され、実行の終了コードがあればそれに応じてスタイルが適用されます。

A task fails and an error decoration is added. A task succeeds and a success decoration is added

監視タスクの場合、各コンパイルで最初に報告された問題の隣に装飾が表示されます。

A watch task's first error is marked with a decoration

アイコンと色のサポート

タスクに Codicon の id とターミナル ANSI の color プロパティを持つ icon を設定できるようになりました。例:

{
  "label": "test",
  "type": "shell",
  "command": "echo test",
  "icon": { "id": "light-bulb", "color": "terminal.ansiBlue" }
}

The task custom icon appears in the terminal tabs list

kind プロパティが test に設定されているタスクは、デフォルトで beaker アイコンを使用します。

ソース管理

Git リポジトリのコミット「アクションボタン」

1.61 リリースでは、Git リポジトリに Publish (発行) および Sync Changes (変更を同期) の「アクションボタン」が追加されました。このマイルストーンでは、プライマリアクションとセカンダリアクションのセットを持つ Commit (コミット) ボタンを追加しました。セカンダリアクションは git.postCommitCommand 設定で制御でき、コミット後にプッシュまたは同期を行うこともできます。

コミット 「アクションボタン」の追加に伴い、ソース管理ビューに表示されるGitアクションボタンを制御するために使用できる新しい設定 git.showActionButton が追加されました。ソース管理プロバイダーを実装する拡張機能によって提供されるすべてのアクションボタンの表示をグローバルに無効にするには、一般的な scm.showActionButton 設定を引き続き使用できます。

エディターを使ったコミットメッセージの作成

このマイルストーンでは、コミット入力ボックスにメッセージが提供されていない場合に、フルテキストエディターを使用してコミットメッセージを作成できるようになりました。この新しいフローを使用するには、コミットメッセージを入力せずに Commit (コミット) ボタンをクリックします。

これで、エディターでコミットメッセージを作成できます。コミットメッセージを受け入れてコミット操作を完了するには、エディタータブを閉じるか、エディターツールバーの Accept Commit Message (コミットメッセージを承認) ボタンを選択します。コミット操作をキャンセルするには、テキストエディターの内容をクリアしてエディタータブを閉じるか、エディターツールバーの Discard Commit Message (コミットメッセージを破棄) ボタンを選択します。

この新しいフローを無効にして、クイック入力コントロールを使用する以前の体験に戻すには、git.useEditorAsCommitInput 設定を切り替えます。設定を変更した後、変更を有効にするには VS Code を再起動する必要があります。

統合ターミナルで実行される git commit コマンドに同じフローを使用するには、git.terminalGitEditor 設定を有効にします。設定を有効にした後、ターミナルセッションを再起動する必要があります。

ブランチ保護インジケーター

前回のマイルストーンでは、特定のブランチを保護するように設定できる git.branchProtection 設定を追加しました。このマイルストーンでは、保護されているブランチに対して、ステータスバーとブランチピッカーに視覚的なインジケーター（ロックアイコン）が追加されました。

ステータスバー

The branch protection icon is shown in the Status bar

ブランチピッカー

The branch protection icon is shown in the branch picker

デバッグ

ステップインターゲットUIの改善

一部のデバッガーでは、行で一時停止したときに特定の関数呼び出しに直接ステップインできます。今回のイテレーションでは、このためのUIを改善しました。

  • ソース行のターゲット領域を右クリックし、Step Into Target (ターゲットにステップイン) を選択すると、ターゲット領域が存在する場合、自動的にそこにステップインします。
  • コマンドパレットで新しいコマンド デバッグ: ターゲットにステップイン が利用可能になり、⌘F11 (Windows、Linux Ctrl+F11) のキーボードショートカットで利用できます。

デバッグコンソールのナビゲーション

クイックアクセスメニューからのコンソールアクセス

デバッグコンソールの一覧を表示するためのクイックアクセスメニューが利用できるようになりました。メニューでコンソール名を選択すると、下部パネルに表示されます。ここでは、コンソール名を検索・フィルタリングできます。

テーマ: GitHub Dark Dimmed

このクイックアクセスメニューにアクセスするには、3つの異なる方法があります。

  • クイックオープンメニュー (⌘P (Windows、Linux Ctrl+P)) で ? と入力し、デバッグコンソールを表示するオプションを選択します。

  • デバッグ: デバッグコンソールを選択 コマンドを使用します。

  • クイックオープンメニューで debug consoles (末尾のスペース文字を含む) を手動で入力します。

ビューメニューからのコンソールアクセス

既存のビューメニュー内からもデバッグコンソールの一覧にアクセスできます。クイックオープンメニューで view (末尾のスペースを含む) と入力し、デバッグコンソール パネルヘッダーまでスクロールすると、利用可能なデバッグコンソールの一覧が表示されます。

コンソール間の切り替え

⇧⌘[ (Windows、Linux Ctrl+PageUp) を使用して前のデバッグコンソールに移動し、⇧⌘] (Windows、Linux Ctrl+PageDown) を使用して次のコンソールに移動できるようになりました。

ロード済みスクリプトの検索とフィルタリング

以前は、実行とデバッグ メニューのツリービュー内でしかロードされたスクリプトを表示できませんでした。新しい デバッグ: ロード済みスクリプトを開く... コマンドを使用すると、スクリプトを検索してナビゲートできるようになりました。これは ファイルへ移動... コマンドと同様に機能しますが、ロードされたスクリプトにナビゲートできます。

JavaScriptデバッグ

ソースマップの切り替え

コールスタックビューのタイトルの🧭羅針盤アイコンをクリックすることで、ソースマップを簡単にオン/オフできるようになりました。ソースマップがオフになっている場合でも、ソースコードに設定されたブレークポイントは機能しますが、コンパイル済みコード内の同等の位置に移動され、デバッガーはソースコードではなくコンパイル済みコードをステップ実行します。

テーマ: Codesong

ソースマップがオフの場合、デバッグツールバーに同様のボタンが表示され、オンに戻すことができます。切り替え状態はワークスペースに永続化されます。

toString() 変数プレビュー

変数やプロパティにカスタムの toString() メソッドがある場合、それが呼び出され、変数 ビューやホバーでプレビューがレンダリングされます。これは、優れた文字列表現を持つ複雑な型に対する一般的なオブジェクトプレビューの改善です。

たとえば、VS Code の Range には toString メソッドがあり、一目で内容を把握しやすくなっています。

Displaying the toString() method output in the Variables view

ステップインターゲットのサポート

JavaScript デバッガーが ステップインターゲット をサポートするようになり、コードの行にある関数呼び出しに簡単にステップインできるようになりました。

Step Into Targets dropdown

これは デバッグ: ターゲットにステップイン コマンド (⌘F11 (Windows、Linux Ctrl+F11)) または行を右クリックすることでアクセスできます。

JavaScriptデバッグにおけるバインドされていないブレークポイント警告アイコン

TypeScript/JavaScriptプロジェクトをデバッグしていて、ソースマップの設定やブレークポイントのバインドに問題がある場合、VS CodeはブレークポイントビューにJavaScriptデバッガーのブレークポイントトラブルシューティングツールへのリンクを含むヒントメッセージを表示するようになりました。エディターで灰色のブレークポイントアイコンにホバーすると、このヒントも表示されます。

hovering the breakpoint warning icon

このヒントを表示するためのAPIが最終決定されたら、他のデバッガーも独自の適切なメッセージでヒントを表示できるようになります。

Editor

プレビュー付きリファクタリング

以前は、リファクタリングによって適用される変更を確認する方法がありませんでした。リファクタリングの体験を改善するために、コマンドパレットからアクセスできる プレビュー付きリファクタリング コマンドが追加されました。プレビュー付きリファクタリング... は リファクタリング... コマンドと同様に機能しますが、リファクタリングプレビューパネルを開きます。ユーザーはリファクタリングプレビューを選択して、エディターでリファクタリングプレビューのより大きなビューを開くことができます。このイテレーションでは、主にリファクタリングによるコード変更のプレビューに焦点を当て、将来の機能とカスタムコードアクションメニューコントロールが続く予定です。

Refactor preview panel showing a refactoring that results in two changes

プレビュー付きリファクタリング... がワークベンチにペインを開き、リファクタリングプレビューエディタービューを開きます。

言語

Markdownでの山括弧リンクのサポート

Markdownでは、スペースやその他の特殊文字を含むリンク先を記述するために山括弧を使用できます。

[Some link](<path to file with spaces.md>)

このイテレーションでは、山括弧リンクのサポートを改善し、エディタで正しくハイライトされ、クリック可能になりました。

Emmetのインライン補完設定

Emmetに新しい設定 emmet.useInlineCompletions が追加され、ファイル内でインライン補完が可能になりました。今のところ、HTMLとCSSファイルの編集でのみこの設定を有効にすることをお勧めします。

以下の短いビデオは、すべてのエントリで editor.quickSuggestions 設定が off に設定された状態で録画されました。

言語インジケーターでのJSON通知

表示される折りたたみ範囲、ドキュメントシンボル、または色デコレータが多すぎる場合、VS Code は通知を使用せず、JSON 言語インジケーターを使用してユーザーに通知するようになりました。

JSON notifications from the Status bar JSON language indicator

HTMLの最終改行フォーマッター設定の変更

html.format.endWithNewline 設定は、files.insertFinalNewline のために削除されました。

files.insertFinalNewline はすべてのプログラミング言語に適用されます。言語ごとに異なる設定が必要な場合は、言語スコープを使用できます。

{
  "[html]": {
    "files.insertFinalNewline": true
  }
}

ノートブック

ノートブック内での拡張機能の推奨事項のサポート

ノートブックの利用開始体験を改善するため、必要な拡張機能がインストールされていない場合に、拡張機能の推奨フローを更新し、ノートブックウィンドウから直接拡張機能をインストールできるようにしました。これにより、拡張機能がインストールされていない状態から VS Code 内で実行可能なセルを利用するまでの手順が大幅に削減されます。このイテレーションでは、Python Jupyter ノートブックでこの体験が有効になり、今後、より多くのノートブックタイプや言語に対応する予定です。

A Quick Pick depicting two entries. The top entry is selected that has a light bulb to its left and says 'Install suggested extensions Python + Jupyter'

コメント

エディターコメントの切り替え

新しいコマンド コメント: エディターコメント機能を切り替える は、コメント範囲ガターデコレーション、行ホバーの「+」記号、およびすべてのエディターコメントウィジェットを含む、すべてのエディターコメント機能を切り替えます。Zenモードでは、コメント機能は自動的に無効になります。

複数行コメントのドラッグ

「コメントを追加」の「+」ボタンをドラッグして、複数行コメントを追加できるようになりました。

Enterprise

WindowsにおけるUpdateModeグループポリシー

VS Code は、Windows レジストリベースのグループポリシーをサポートするようになりました。これにより、システム管理者は管理するマシンにポリシーを作成し、展開できます。

最初にサポートされる VS Code ポリシーは UpdateMode で、これは update.mode 設定を上書きし、新しいバージョンがリリースされたときに VS Code が自動的に更新されるかどうかを制御します。

詳細については、エンタープライズ ドキュメントの Windows のグループポリシーを参照してください。

Web 用 VS Code

テーマテスターが組み込みテーマをサポート

テーマテスターは、vscode.dev のルートであり、カラーテーマをインストールせずに紹介したり試したりするために使用できます。これは、マーケットプレイスのテーマ拡張機能で拡張機能IDとテーマ名を指定することで利用できました。例えば、GitHubテーマ拡張機能 (拡張機能ID github.github-vscode-theme) の「GitHub Dark Default」テーマを見るには、次のURLで vscode.dev を起動します。

https://vscode.dev/editor/theme/github.github-vscode-theme/GitHub%20Dark%20Default

Color theme tester with vscode.dev showing GitHub Theme extension GitHub Dark Default

テーマテスターは、VS Code に組み込まれているテーマでも使用できるようになりました。拡張機能 ID のプレースホルダーとして vscode.theme-defaults を使用し、テストしたいテーマ名を指定します。

例えば、「High Contrast Light」テーマをテストするには、以下のURLを使用します。

https://vscode.dev/editor/theme/vscode.theme-defaults/Default%20High%20Contrast%20Light

拡張機能の部分的なローカライズ対応

前回のイテレーションでは、vscode.dev でコア製品によって提供される文字列のローカライズを導入しました。今回のイテレーションでは、さらに多くの文字列、特に拡張機能マニフェストで拡張機能によって提供される静的文字列を含めています。拡張機能によって提供されるローカライズが必要なその他の文字列 (ソースコードで宣言された文字列) もまだ残っているため、次回のイテレーションでその作業を継続します。

表示言語の設定コマンド

一部のユーザーにとって、ブラウザで使用される言語を設定することは不可能です。これを回避するため、Web 用 VS Code には 表示言語の設定 コマンドが追加され、ブラウザに設定されているデフォルト言語を上書きできるようになりました。

さらに、表示言語の設定をクリア コマンドを使用して、このオーバーライドを削除できます。

VS Code Server (プライベートプレビュー)

VS Code では、ユーザーが最も生産性を高められる環境をシームレスに活用できるようにしたいと考えています。VS Code リモート開発拡張機能を使用すると、Windows Subsystem for Linux (WSL)、SSH 経由のリモートマシン、および開発コンテナー内で VS Code から直接作業できます。これらの拡張機能はリモート環境にサーバーをインストールし、ローカル VS Code がリモートソースコードおよびランタイムとスムーズに連携できるようにします。

現在、スタンドアロンの 「VS Code Server」 のプライベートプレビューを提供しています。これは、リモート拡張機能で使用されるのと同じ基盤となるサーバーに基づいて構築されたサービスであり、インタラクティブな CLI や、SSH 接続を必要としない vscode.dev への安全な接続の促進など、いくつかの追加機能が搭載されています。

The VS Code Server's help menu and a remote VS Code connection

最終的な目標は、プロジェクトがどこに保存されていても、デスクトップ版とWeb版のVS Codeの両方を開くために、現在使用している code CLI を強化することです。これに向けて積極的に取り組んでいますが、VS Code Serverは皆様からのフィードバックを得るためにプライベートプレビューとしてリリースしたいと考えている素晴らしいマイルストーンです。

VS Code Serverの開始方法については、発表時のブログ記事とビデオで詳しく学び、そのドキュメントでさらなる詳細を確認できます。

拡張機能への貢献

ESLint

ESLint 拡張機能のバージョン 2.2.6 がリリースされました。様々なバグ修正に加え、サポートされているすべてのESLint言語でノートブックセル内のLintingがサポートされるようになりました。

ESlint validating notebook cells

Jupyter

IPyWidgets

IPyWidgets が Python 以外のカーネルでもサポートされるようになりました。Common Lisp や IHaskell などです。

リソース（画像、スクリプトなど）の読み込みに関連する多くの IPyWidget の問題が解決され、VegaFusion、ipyleaflet、Chemiscope、mobilechelonian、ipyturtle といったウィジェットのサポートが向上しました。

その他の注目すべき IPyWidget の修正点として、Jupyter Output ウィジェット内で複雑な出力やネストされた出力（インタラクティブな出力を含む）が表示されるようになりました。

Web拡張機能

Jupyter 拡張機能の Web 版におけるより多くのコア機能のサポートに関して、進捗がありました。

今月、以下の機能がWeb拡張機能に移植されました。

  • インタラクティブウィンドウのエクスポート
  • インタラクティブウィンドウのデバッグ
  • インタラクティブウィンドウの折りたたみ可能なセル

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

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

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

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

GitHub Pull Requests and Issues

GitHub Pull Requests and Issues 拡張機能は、プルリクエストとイシューの作業、作成、管理を可能にするもので、さらに進展がありました。このリリースのハイライトは以下のとおりです。

  • プルリクエストでブランチを無視するための新しい設定 "githubPullRequests.ignoredPullRequestBranches" が追加されました。
  • "githubPullRequests.pushBranch" の設定を使用すると、PR を作成する際に Publish branch? ダイアログをスキップできます。
  • 概要 エディターで自動マージチェックボックスが利用可能になりました。

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

プレビュー機能

TypeScript 4.8 のサポート

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

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

Markdownリンクの検証

Markdown ファイルのリンク検証の改善を続けました。この実験的機能は、Markdown ファイル内の画像やヘッダーへの壊れたリンクを検出するのに役立ちます。

多くのバグを修正し、パフォーマンスを改善しただけでなく、機能がより明確になるように設定の一部を改名しました。新しい設定名は次のとおりです。

  • markdown.experimental.validate - すべてのリンク検証機能を有効/無効にします。
  • markdown.experimental.validate.fileLinks.enabled - ローカルファイルへのリンクの検証を有効/無効にします: [link](/path/to/file.md)
  • markdown.experimental.validate.fileLinks.markdownFragmentLinks - ローカルファイルへのリンクのフラグメント部分の検証を有効/無効にします: [link](/path/to/file.md#some-header)
  • markdown.experimental.validate.fragmentLinks.enabled - 現在のファイル内のヘッダーへのリンクの検証を有効/無効にします: [link](#_some-header)
  • markdown.experimental.validate.referenceLinks.enabled - 参照リンクの検証を有効/無効にします: [link][ref]。
  • markdown.experimental.validate.ignoreLinks - 検証をスキップするリンクのリスト。これは、ディスク上には存在しないが、Markdown が公開されると存在するファイルにリンクする場合に役立ちます。

ぜひ試してみて、新機能についてのご意見をお聞かせください！

設定プロファイル

過去数ヶ月間、コミュニティから最も要望の多かった機能の一つである 設定プロファイル の VS Code でのサポートに取り組んできました。このマイルストーンで、この機能が Insiders リリースで workbench.experimental.settingsProfiles.enabled 設定を介してプレビュー可能になったことを発表できることを嬉しく思います。この機能をぜひ試していただき、VS Code リポジトリで課題を作成するか、課題 #116740 にコメントすることでフィードバックをお寄せください。

設定プロファイルは、設定、キーボードショートカット、拡張機能、状態、タスク、スニペットで構成されます。Web、機械学習のような異なる開発環境、Python、Javaのような複数のプログラミング言語の教室、あるいは仕事やデモのような個人的なモードに合わせてVS Codeをカスタマイズし、それらを設定プロファイルとして保存することができます。作業中のプロジェクト、参加している教室、プレゼンテーションを行っている場合に応じて、異なるプロファイルを持つ複数のワークスペース（フォルダー）を同時に開くことができます。

以下は、ウェブ開発環境向けに VS Code をカスタマイズし、そこから設定プロファイルを作成する方法を示しています。

ここでは、開発プロファイルからデモプロファイルに簡単に変更する方法を示します。

次の図に示すように、React プロジェクトを Web 開発プロファイルで、Python クラス プロジェクトを Python クラス プロファイルで同時に開くことができます。

Multiple opened Profiles

設定のギアメニューの 設定プロファイル サブメニューにある 設定プロファイルを削除... アクションを使用して、設定プロファイルを管理および削除できます。

"workbench.colorCustomizations": {
    "statusBarItem.settingsProfilesBackground": "#ce4918",
    "statusBarItem.settingsProfilesForeground": "#e0dfdb",
}

設定のギアメニューの 設定プロファイル サブメニューにある 設定プロファイルを削除... アクションを使用して、設定プロファイルを管理および削除できます。

Removing Settings Profiles

プロファイルごとに VS Code をカスタマイズできますが、アプリケーションレベルでのみカスタマイズできる設定もあります。たとえば、update.mode などのすべてのアプリケーションスコープ設定、言語パック拡張機能、設定同期の有効化、およびワークスペース信頼状態は、アプリケーションレベルで全プロファイルにわたってカスタマイズされます。

Web 用 VS Code とデスクトップ版で編集セッションにアクセス

このマイルストーンで、VS Code の 編集セッション のプレビューを発表します。編集セッションを使用すると、VS Code が利用可能な場所であればどこでも、Web 用 VS Code、デスクトップ版 VS Code、または異なるマシン間で、未コミットの変更をリポジトリで作業を続行する際に持ち運ぶことができます。

たとえば、編集セッションを使用して作業中の変更を転送およびアクセスできます。

  • github.dev のリポジトリから、そのリポジトリのローカルデスクトップクローンへ。
  • Windows デバイス上のリポジトリのクローンから、macOS デバイス上のそのリポジトリのクローンへ。

編集セッションは現在、workbench.experimental.editSessions.enabled 設定の背後でプレビュー中です。この最初のリリースでは、以下のコマンドを使用して作業中の変更を保存および再開できます。

  • 編集セッション: 現在の編集セッションを保存
  • 編集セッション: 最新の編集セッションを再開

編集セッションを開始するには、編集セッション: 現在の編集セッションを保存 コマンドを使用し、プロンプトが表示されたら GitHub または Microsoft 認証でサインインします。その後、別のマシンまたは VS Code インスタンス上のリポジトリで 編集セッション: 最新の編集セッションを再開 コマンドを使用して、変更されたすべてのファイルの作業内容をワークスペースに復元します。編集セッション: サインアウト コマンドを使用すると、いつでも編集セッションからサインアウトできます。

編集セッションの体験を繰り返し改善していく中で、ぜひお試しいただき、課題 #141293 へのコメントを通じてフィードバックをお寄せください。

拡張機能作成

反復可能な vscode.d.ts コレクション型

vscode.d.ts 内のコレクション型を扱いやすくするために、今回のイテレーションでは、それらすべてを反復可能にしました。これにより、これらの型で for...of ループやスプレッドを使用できるようになります。

const data: vscode.DataTransfer = ...;
for (const [mime, item] of data) {
    const str = await item.asString();
    ...
}

新しく反復可能になった型の全セットは次のとおりです。

  • DiagnosticCollection
  • DataTransfer
  • EnvironmentVariableCollection
  • TestItemCollection

拡張可能なノートブックレンダラー

ノートブックレンダラーにより、拡張機能はノートブックでのセルや出力のレンダリングをカスタマイズできます。このイテレーションでは、レンダラーが別のレンダラーを拡張できる、ノートブックレンダラーAPIを拡張しました。これには、VS Codeに組み込まれているレンダラーの一部も含まれます。これにより、拡張機能は完全なレンダラーを再実装することなく、ノートブックレンダリングに新しい機能を追加できます。また、ユーザーが正しくレンダリングされたコンテンツを見るために新しいレンダラーに切り替える必要がないため、より良いユーザーエクスペリエンスが提供されます。

Notebook Extend Markdown Renderer Sampleは、拡張機能がVS Codeの組み込みMarkdownレンダラーを絵文字サポートで拡張する方法を示しています。主要な部分を簡単に見てみましょう！

拡張可能なノートブックレンダラーのAPIは意図的に緩やかに定義されています。まず、拡張機能は新しいノートブックレンダラーを提供する必要があります。既存のレンダラーを拡張しているため、ここでは entrypoint フィールドを使用して、拡張するレンダラーのID (この場合は VS Code の組み込み vscode.markdown-it-renderer) と、読み込むレンダラースクリプトへのパスの両方を指定します。

"notebookRenderer": [
    {
        "id": "sample.markdown-it.emoji-extension",
        "displayName": "Markdown it Emoji renderer",
        "entrypoint": {
            "extends": "vscode.markdown-it-renderer",
            "path": "./out/emoji.js"
        }
    }
]

このレンダラーは、vscode.markdown-it-renderer がアクティブ化されるたびにアクティブ化されるようになります。

次に vscode.markdown-it-renderer を拡張するために、レンダラーは基本レンダラーのメソッドを呼び出すことができます。このメソッドは基本レンダラー固有です。この場合、まず getRenderer を使用して基本レンダラーを取得し、次にその上で extendMarkdownIt を呼び出して、レンダリングに使用する Markdown-It のインスタンスを拡張します。

import type * as MarkdownIt from 'markdown-it';
import type { RendererContext } from 'vscode-notebook-renderer';

interface MarkdownItRenderer {
    extendMarkdownIt(fn: (md: MarkdownIt) => void): void;
}

export async function activate(ctx: RendererContext<void>) {
    // Acquire the base renderer
    const markdownItRenderer = await ctx.getRenderer('vscode.markdown-it-renderer') as MarkdownItRenderer | undefined;
    if (!markdownItRenderer) {
        throw new Error(`Could not load 'vscode.markdown-it-renderer'`);
    }

    // Load our Markdown-It extension
    const emoji = require('markdown-it-emoji');

    // Call the base renderer's extension method (extendMarkdownIt) to augment
    // the Markdown-It with emoji support.
    markdownItRenderer.extendMarkdownIt((md: MarkdownIt) => {
        return md.use(emoji, {});
    });
}

ここで注目すべき重要な点は、extendMarkdownIt が単に基本レンダラーによって返されるメソッドであるということです。他の拡張可能なレンダラーも独自の拡張ポイントを簡単に返すことができます。

VS Code の組み込み Markdown-It レンダラーを拡張する完全な例については、Notebook Extend Markdown Renderer Sample を参照してください。

DataTransfersからの外部ファイルの読み込み

拡張機能は DataTransfer を使用して外部ファイルを読み取ることができるようになりました。これは、ツリーのドラッグアンドドロップAPI、およびエディターへのドロップAPI提案で使用できます。

export class TestViewDragAndDrop implements vscode.TreeDataProvider<Node>, vscode.TreeDragAndDropController<Node> {

    public async handleDrop(target: Node | undefined, sources: vscode.DataTransfer, token: vscode.CancellationToken): Promise<void> {
        // Get a list of all files
        const files: vscode.DataTransferFile[] = [];
        sources.forEach((item) => {
            const file = item.asFile();
            if (file) {
                files.push(file);
            }
        });

        const decoder = new TextDecoder();

        // Print out the names and first 100 characters of the file
        for (const file of files) {
            const data = await file.data();
            const text = decoder.decode(data);
            const fileContentsPreview = text.slice(0, 100);
            console.log(file.name + ' — ' + fileContentsPreview + '\n');
        }

        ...
    }
}

ウェブビューでのハイコントラストライト

Webviewsは、vscode-high-contrast-light CSSクラスを使用してハイコントラストライトカラーテーマをターゲットにできるようになりました。

.vscode-high-contrast-light .error {
    color: red;
}

vscode-high-contrast-light クラスは、ウェブビューの body 要素に自動的に追加されます。

テスト項目のラベルにアイコン

標準の $(icon) 形式の Codicons は、TestItem.label で使用できるようになり、テストエクスプローラービューおよびテスト結果にアイコンを表示できます。

ソース管理入力ボックスの有効化

拡張機能の作者は、enabled プロパティを使用して、ソース管理ビューの入力ボックスの有効化を切り替えることができるようになりました。

JSON単語パターンの変更

すべての言語には、その言語の単語に属する文字を定義する単語パターンが付属しています。JSON は他のすべての言語とは異なり、文字列リテラルの引用符と完全な文字列リテラルコンテンツが含まれていました。現在は他の言語に従い、文字、数字、ハイフンのみが含まれるようになりました。

この変更により、選択範囲の拡大（コマンド：選択範囲を拡大）時の問題が修正され、文字列内の単語補完が可能になり、一部のコード提案の異常が修正されます。

単語パターンに依存していた拡張機能、例えばコード補完のデフォルトの置換範囲に依存していた拡張機能は、すべての補完に対して明示的に置換範囲を指定するように実装を更新する必要があります。

Debug Adapter Protocol

  • Step Into Target (ターゲットにステップイン) 機能のユーザー体験を向上させるため、DAP の StepInTarget 型に追加情報が追加されました。line、column、endLine、endColumn の4つのプロパティにより、ステップインターゲットを対応するソース範囲にリンクできるようになりました。
  • デバッグ対象にプログラム引数を渡すことは、2つの相反する目標によって妨げられます。一部のユーザーは すべての文字 をデバッグ対象に渡せることを望み、他のユーザーは 一部の文字 を基盤となるシェルと対話するために使用したいと考えています。両方のユースケースをより良くサポートするために、DAP の runInTerminal リクエストでプログラム引数内の特殊文字のエスケープを制御する作業を進めています。提案はすでに利用可能です。この DAP の追加に興味のあるデバッグ拡張機能の作者の方々からのフィードバックをお待ちしております。
  • さらに、Debug Adapter Protocol のいくつかのドキュメントの問題に対処しました。これには、「クライアント」と「falsey」という用語に関する明確化、チェックサムと日付文字列のより正確な仕様、および Source.origin の表現の改善が含まれます。

提案されたAPI

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

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

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

貼り付け編集プロバイダー

documentPaste APIの提案を更新し、特に複数のカーソルで作業する際に、より正確に実装しやすくなりました。

改めて、この API を使うと、拡張機能がテキストエディター内でのコピー＆ペーストにフックできます。拡張機能はこれを使って、貼り付け時に挿入されるテキストを修正できます。ドキュメント貼り付け拡張機能サンプルで、更新された API の動作が示されています。

/**
 * Provider that maintains a count of the number of times it has copied text.
 */
class CopyCountPasteEditProvider implements vscode.DocumentPasteEditProvider {
  private readonly countMimeTypes = 'application/vnd.code.copydemo-copy-count';

  private count = 0;

  prepareDocumentPaste?(
    _document: vscode.TextDocument,
    _ranges: readonly vscode.Range[],
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): void | Thenable<void> {
    dataTransfer.set(this.countMimeTypes, new vscode.DataTransferItem(this.count++));
    dataTransfer.set('text/plain', new vscode.DataTransferItem(this.count++));
  }

  async provideDocumentPasteEdits(
    _document: vscode.TextDocument,
    _ranges: readonly vscode.Range[],
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): Promise<vscode.DocumentPasteEdit | undefined> {
    const countDataTransferItem = dataTransfer.get(this.countMimeTypes);
    if (!countDataTransferItem) {
      return undefined;
    }

    const textDataTransferItem = dataTransfer.get('text') ?? dataTransfer.get('text/plain');
    if (!textDataTransferItem) {
      return undefined;
    }

    const count = await countDataTransferItem.asString();
    const text = await textDataTransferItem.asString();

    // Build a snippet to insert
    const snippet = new vscode.SnippetString();
    snippet.appendText(`(copy #${count}) ${text}`);

    return { insertText: snippet };
  }
}

export function activate(context: vscode.ExtensionContext) {
  // Enable our provider in plaintext files
  const selector: vscode.DocumentSelector = { language: 'plaintext' };

  // Register our provider
  context.subscriptions.push(
    vscode.languages.registerDocumentPasteEditProvider(
      selector,
      new CopyCountPasteEditProvider(),
      {
        pasteMimeTypes: ['text/plain']
      }
    )
  );
}

ウェブ上でのWebUSB、WebSerial、WebHIDアクセス

Web拡張機能からWebUSB、Web Serial、WebHIDを使用するための実験的なサポートが追加されました。

これらの API にアクセスするには、まず、拡張機能が以下のいずれかのコマンドを実行して、目的のデバイスへのアクセスを要求する必要があります。

  • workbench.experimental.requestUsbDevice
  • workbench.experimental.requestSerialPort
  • workbench.experimental.requestHidDevice

これらのコマンドは、ユーザーにデバイスの選択を促します。各コマンドは、引数としてデバイスフィルターのリストを受け取ります。例えば：

import * as vscode from 'vscode';

await vscode.commands.executeCommand('workbench.experimental.requestUsbDevice', {
  filters: [
    { vendorId: 0x404 } // Your custom filter or empty if you want users to select any device
  ]
});

コマンドが完了すると、拡張機能は通常の Web API を使用して、ユーザーがアクセスを許可したデバイスにアクセスできます。

const devices = await navigator.usb.getDevices();
// Do something with devices

requestDevice のようにユーザーに UI 要素を表示する必要があるものを除き、通常の Web デバイス API はすべて機能するはずです。

現在、この機能は Web でのみ動作し、Chrome および Edge ブラウザにのみサポートが限定されています。また、この機能はまだ実験段階であるため、設計を繰り返し改良する可能性があることに注意してください。ぜひお試しいただき、フィードバックを共有してください！

エンジニアリング

Electron 18への更新

このマイルストーンで、Electron 18 を VS Code デスクトップにバンドルするための探索を完了しました。Insiders でのセルフホスティングに関わってくださった皆様に感謝いたします。このアップデートには Chromium 100.0.4896.160 と Node.js 16.13.2 が含まれています。

ドキュメント

TypeScriptの編集とリファクタリング

VS CodeでのTypeScriptの編集とリファクタリングに焦点を当てた2つの新しいトピックが追加されました。そこでは、インレイヒント、CodeLens、TypeScriptに特化したフォーマットオプション、そして利用可能なコードリファクタリングなどの特定の機能について学ぶことができます。

注目すべき修正点

  • 109565 キャップスロックで入力ソースを切り替えると、ターミナルが常に大文字を表示する
  • 146491 アクティブ/非アクティブメニュー間の色の違いが失われた
  • 149538 中国でMicrosoftまたはGitHubアカウントにログインできない
  • 149890 アイテムをドラッグして空のツリービューにドロップできない
  • 150934 RPM はバンドルされたライブラリを「提供元」としてリストアップすべきではない
  • 151158 ノートブックを保存する際に、未保存のノートブックで選択されたカーネルを保持する
  • 151664 スクリーンリーダーでコードをステップ実行する際のアナウンスの効率を改善
  • 151739 コメントスレッドに最初に返信する際やコメント編集時に workbench.action.submitComment が機能しない＆混乱する
  • 152067 コメントが展開されている場合にのみコメントスレッド範囲を表示
  • 152141 プロセス終了時にタスクステータスをドロップする
  • 152642 ウォッチ式をワンクリックで削除するボタンを追加

ありがとうございます

最後に、VS Codeの貢献者の皆様に心からの感謝を申し上げます。

Web拡張機能

コードをWeb拡張機能として実行する拡張機能を有効にする拡張機能作成者（以下は2022年6月7日から7月4日までのリスト）

問題追跡

問題追跡への貢献者

プルリクエスト

vscodeへの貢献者

vscode-generator-codeへの貢献者

vscode-js-debugへの貢献者

vscode-pull-request-githubへの貢献者

debug-adapter-protocolへの貢献者

devcontainers/cliへの貢献

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