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

2019年11月 (バージョン 1.41)

Update 1.41.1: このアップデートでは、以下の問題が修正されています。

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

Visual Studio Code 2019年11月リリースへようこそ。このバージョンには、皆さんに気に入っていただけるであろう多くの更新が含まれています。主なハイライトは以下の通りです。

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

Insiders: 新機能をいち早く試したいですか？夜間ビルドのInsidersをダウンロードして、最新の更新をいち早くお試しいただけます。Visual Studio Codeの最新ニュース、アップデート、コンテンツについては、Twitter @codeでフォローしてください！

ワークベンチ

エクスプローラーのコンパクトフォルダー

ファイルエクスプローラーで、単一の子フォルダーがコンパクトな形式で表示されるようになりました。この形式では、単一の子フォルダーは結合されたツリー要素に圧縮されます。これは、たとえばJavaのパッケージ構造に役立ちます。

設定 explorer.compactFolders がこの動作を制御します。デフォルトでは、この設定はオンになっています。

File Explorer compact folders

差分ビューの左側を編集

編集可能な2つのエディターを比較する場合 (例: ファイルエクスプローラーから2つのファイルを比較したり、グローバル検索と置換を実行したりする場合)、左側も編集可能になり、保存できるようになりました (⌘S (Windows, Linux Ctrl+S))。

Diff view left hand side edit

注: ⌘S (Windows, Linux Ctrl+S)を押すのが面倒な場合は、自動保存 (ファイル > 自動保存) を有効にできます。

ピークエディターからの保存

ピークビューを表示して入力すると、埋め込みエディターにフォーカスがある場合、⌘S (Windows, Linux Ctrl+S)で変更を保存できるようになりました。

Saving in a Peek view

問題パネル

その他のフィルター

問題パネルに、さらに多くの事前定義済みフィルターが追加されました。問題の種類 (エラー、警告、情報) で問題をフィルターしたり、現在アクティブなファイルに限定された問題を表示したりできるようになりました。

Problems panel filters

テーマ: GitHub Sharp Dark, フォント: FiraCode

ステータスバーに現在の問題を表示

VS Codeで、現在の問題メッセージをステータスバーに表示するように設定できるようになりました。これにより、選択した問題の概要を、追加のキーボード操作やマウス操作なしでアクティブなファイルで確認できます。

注: この機能を有効にするには、problems.showCurrentInStatus 設定を有効にする必要があります。

Current problem displayed in the Status bar

テーマ: GitHub Sharp Dark, フォント: FiraCode

柔軟なフィルターボックスレイアウト

問題パネルのフィルターボックスが、パネルの位置とサイズに合わせて位置を調整するようになりました。

Problems panel filter box adjustable layout

テーマ: GitHub Sharp Dark, フォント: FiraCode

フォントレンダリングの改善 (Windows, Linux)

前回のマイルストーンでElectron 6にアップデートした際、多くのユーザーからフォントレンダリングが劣化したという報告がありました。具体的には、以前ほどフォントが滑らかに表示されなくなりました。私たちはすぐにエディターでこの問題に対処し、修正は1.40のリカバリーリリースで提供されました。しかし、ワークベンチの他の領域では、まだ理想的ではないフォントレンダリングに悩まされていました。

このリリースでは、ワークベンチのより多くの部分 (WindowsおよびLinux向け) でフォントレンダリングを改善しました。以下のスクリーンショットは、ビフォーアフターの比較を示しています (違いを示すためにズームインしています)。特に、ワークベンチの多くのツリー要素とリスト要素はグレースケールアンチエイリアシングを使用してレンダリングされていましたが、現在はサブピクセルアンチエイリアシングでレンダリングされています。

変更前 (左) と変更後 (右)

Improved font rendering before and after

ワークベンチのさらに多くの部分でフォントレンダリングを改善する予定です。進捗状況は、このテキストレンダリング問題のクエリで確認できます。

リモートシナリオにおけるファイル読み書きパフォーマンスの高速化

ファイルシステムがリモートであり、レイテンシが高いシナリオ (たとえば、低速な接続でブラウザーでVS Codeを使用している場合や、同じリージョンにないリモートホストに接続している場合) では、ファイル (テキストエディターから) の読み書きが高速になるはずです。読み書きにストリームベースの実装に切り替えたことで、通信オーバーヘッドが大幅に削減されました。

検索

入力中に検索結果を更新

全文検索では、入力中に結果が更新されるようになりました。これは、複雑な正規表現クエリを作成するようなシナリオで特に役立ち、クエリに関する迅速なフィードバックが正規表現の記述に役立ちます。

ここでは、TypeScriptのOptional Chaining構文を採用するための正規表現検索と置換クエリを作成する際に、即座のフィードバックが役立ちます。

Search result updates on type

テーマ: Noctis Hibernus, フォント: Hasklig

注: この機能は、search.searchOnType を false に設定することで無効にできます。また、入力と検索の間の遅延は search.searchOnTypeDebouncePeriod で調整でき、デフォルトは300ミリ秒です。

検索結果にカーソルを追加

テキスト検索のすべてのマッチにカーソルを追加するコマンドを追加しました。検索ビューでファイルの検索結果にフォーカスがある状態で、⇧⌘L (Windows, Linux Ctrl+Shift+L)を押すと、その1つのファイル内のすべてのマッチを同時に編集できます。これは、検索ウィジェットを使って単一のエディター内で検索するときに使用するキーボードショートカットと同じです。

Add cursors to search results

デフォルトですべての検索結果を展開

以前は、全文検索で単一のファイルから10件を超える結果が返された場合、結果ツリーで折りたたまれて表示されていました。しかし、これでは特定の検索結果を見つけるのが難しい場合があったため、今回のリリースではすべての結果が展開されて表示されるようになります。

search.collapseResults を auto に設定すると、以前の動作に戻すことができます。

エディター

ミニマップでのエラー、警告、およびコンテンツ変更の装飾

ミニマップ (コードの概要) で、エラーと警告がインラインでハイライト表示されるようになりました。これらの装飾の色は、新しいテーマカラー minimap.errorHighlight と minimap.warningHighlight で変更できます。

以下では、ミニマップが微妙なカンマのタイプミスをハイライトしているのがわかります。

Minimap error and warning decorations

コンテンツ変更の装飾もミニマップのガターに表示されます

Minimap content change decorations

コンテンツ変更の色は以下で変更できます

  • minimapGutter.addedBackground
  • minimapGutter.modifiedBackground
  • minimapGutter.deletedBackground

ソース管理の装飾の表示は、scm.diffDecorations 設定で変更できます。この設定には以下の値があります。

  • all - ソース管理の差分装飾をすべての場所に表示します。
  • gutter - 左側のエディターガターのみに表示します。
  • minimap - ミニマップガターのみに表示します。
  • overview - 概要ルーラーのみに表示します。
  • none - 差分装飾を表示しません。

コードナビゲーションの代替コマンド

以前のVS Codeでは、既に定義がある場所で定義へ移動を選択しても何も起こりませんでした。このリリースでは、代わりに代替コマンドを実行できるようになりました。たとえば、定義へ移動を参照へ移動の実行にマッピングできます。

これは、editor.gotoLocation.alternativeDefinitionCommand 設定でカスタマイズされます。たとえば、定義へ移動の代替を宣言へ移動に、またその逆に設定できます。以前の動作を希望する場合は、この設定を空のままにすることができます。

ピーク、移動、およびすべて検索コマンド

各ピークコマンドには、移動の対応するコマンドが追加されました。たとえば、実装をピークと実装へ移動の両方があります。ピークビューは現在のエディターを変更せず、ソースコードをその場で素早く確認できます。

以下のビデオでは、実装をピークを使用して、ICommandService インターフェースのすべての実装をピークビューで確認する方法を示しています。

Peek Implementations command

テーマ: GitHub Sharp, フォント: FiraCode

対照的に、実装へ移動はナビゲーション用であり、実装に素早く移動できます。

以下のビデオ ("editor.gotoLocation.multipleImplementations": "goto" 設定を使用) では、F12を繰り返し押すことで、ICommandService インターフェースのすべての実装に移動します。

Go to Implementations command with F12

テーマ: GitHub Sharp, フォント: FiraCode

最後に、すべての参照を検索コマンドと同様に、すべての実装を検索が追加されました。これは、実装をエディターの横に安定したリストとして表示します。これは、たとえばインターフェースのすべての実装に影響するリファクタリングを実行する際のTODOリストとして使用できます。

Find All Implementations in the Side bar

テーマ: GitHub Sharp, フォント: FiraCode

ブレッドクラムとアウトラインビューの言語固有のフィルタリング

前回のマイルストーンでは、アウトラインビューとブレッドクラムナビゲーションから、変数などの特定の型をフィルターする機能を追加しました。今回のリリースではこの機能を改良し、言語固有のフィルタリングを可能にしました。たとえば、TypeScriptの変数は表示せず、JavaScriptの変数は表示するといったことができます。

以下では、value 定数がJavaScriptファイルのアウトラインビューに表示されるが、TypeScriptバージョンには表示されない様子が確認できます。

Language-specific filter for Outline view

テーマ: GitHub Sharp, フォント: Fira Code

macOSでのIntelliSenseキーボードショートカット

IntelliSenseは通常Ctrl+Spaceでトリガーされます。しかしmacOSでは、複数の入力ソースが設定されている場合、このキーボードショートカットはオペレーティングシステムによって占有されます。これはしばしば混乱を招き、ユーザーはIntelliSenseが壊れていると考える原因となります。

これに対処する方法が2つあります

  • macOS用に新たに追加されたAlt+Escapeキーボードショートカットを使用します。
  • macOSの環境設定の環境設定 > キーボード > ショートカット > 入力ソースで、Ctrl+Spaceによる入力ソースの切り替えを無効にします。

macOS Keyboard Shortcuts Input Sources option

スクリーンリーダー出力

スクリーンリーダーが一度に読み上げることができるエディターの行数を制御する新しい設定 editor.accessibilityPageSize が追加されました。デフォルトの10を超える数値の場合、パフォーマンスに影響があることに注意してください。

スクリーンリーダーのすべて読み上げコマンドを使用する場合、editor.accessibilityPageSize を100または1000に設定することをお勧めします。次のマイルストーンでは、この設定のデフォルト値を変更することを検討します。

新しいブラケットマッチングオプション

カーソルがブラケットのどちらかの側にある場合にのみ一致するブラケットをハイライト表示するという古い動作を得るために、"editor.matchBrackets": "near" を設定できるようになりました。デフォルトは always で、現在のカーソル位置を囲む一致するブラケットをハイライト表示します。

新しい自動インデントオプション

設定 editor.autoIndent は、さまざまな値を取れるようになりました。この設定は、Enterキーを押す、Tabキーを押す、または行をインデントおよびアンインデントするなど、複数の機能に影響します。この設定は、より厳密になっていく「スライダー」のように考えることができます。

  • "none": Enterキーを押すと、\nのみが挿入されます。
  • "keep": Enterキーを押すと、現在の行のインデントが維持されます。
  • "brackets": 上記すべてに加えて、言語固有のブラケットに関する特別なロジック。
  • "advanced": 上記すべてに加えて、onEnterRules を介して定義された言語固有のルールを尊重します。
  • "full" (デフォルト): 上記すべてに加えて、indentationRules を介して定義された言語固有のルールを尊重します。

コードアクションメニューのキーボードショートカット

コードアクションとリファクタリングのメニューに、カスタムキーバインディングが存在する場合、それが表示されるようになりました。

A keybinding for extract constant

統合ターミナル

最小コントラスト比

ターミナルで色を扱うアプリケーションは厄介な場合があり、テキストには以下の色を使用できます

  • デフォルトのフォアグラウンドカラー
  • ターミナルテーマで定義された16色のパレット
  • 240色の固定色のセット
  • 任意のRGBカラー (1600万色)

問題は、アプリケーションがデフォルトの背景色や前景色が何であるか、またアプリケーションが使用する色と良いコントラストがあるかどうかを知らないことです。この問題を解決するために、ターミナルは、指定されたコントラスト比を満たすようにテキストの前景色の色を動的に変更できるようになりました。

フォアグラウンドカラーを1から21までの希望のコントラスト比に設定します

// 4.5 is recommended for baseline website accessibility
"terminal.integrated.minimumContrastRatio": 4.5

ターミナルの色は、コントラスト比が満たされるか、前景が#000000または#ffffffになるまで輝度を増減させます。

Terminal minimum contrast ratio setting

テーマ: Sapphire, フォント: Hack

新しい実験的WebGLレンダラー

ターミナルに新しいWebGLベースのレンダラーが利用可能になりました。これは、従来のキャンバスベースのアプローチと比較して、最大900%*のパフォーマンス向上を誇ります。

この設定で新しいレンダラーの使用を選択できます

"terminal.integrated.rendererType": "experimentalWebgl"

速度の向上は多くの要因によるものですが、主なハイライトは以下の通りです。

  • WebGLを使用すると、WebプラットフォームのCanvasRenderingContext2D APIを介するのではなく、GPUとより直接的にやり取りできます。
  • レンダラーはほとんど数値と型付き配列を扱い、これらは非常に高速です。不要なガベージコレクションを避けるため、オブジェクトと配列の作成も最小限に抑えられています。
  • すべての文字がテクスチャアトラスにキャッシュされるようになり、限られたスタイルセットのASCII文字のみだった以前とは異なります。これにより、同じ文字の繰り返し描画がはるかに高速になります。

キャンバスレンダラーでは、ユーザーのハードウェア/環境によってフレームのレンダリングが大きく異なることが観察されました。各フレームは通常1ミリ秒から40ミリ秒かかりましたが、ハードウェアの問題が要因となる極端なケースでは200ミリ秒を超えることもありました。これまでのところ、WebGLははるかに一貫しており、通常0.2ミリ秒から2ミリ秒の範囲に収まっています。

WebGL frames are much faster

信頼性は、これが統合されれば改善されると期待している点の一つです。キャンバスレンダラーでは、GPU/キャンバスに問題がある場合、ブラウザーは賢くCPUでのレンダリングにフォールバックしようとしますが、DOMベースのレンダラーがあるため、そのようなことは決して望ましくありません。WebGLでは、期待通りに動作するか、または厳密に失敗するはずです（WebGLコンテキストが取得できない場合）。その場合は、DOMレンダラーにフォールバックできます。

レンダリングにかかる時間が大幅に短縮されるため、CPUは入力データの解析に集中できるようになり、その結果、より多くのフレームがレンダリングされ、コマンドの実行が高速化されます。以下のパフォーマンスデータは、vscodeリポジトリ内でls -lRを実行した際に生成されたものです。

Commands run faster on the WebGL renderer

新しいレンダラーは、キャンバスレンダラーの厄介なバグも修正しています。これは、文字がセルサイズより大きい場合に側面がクリップされるというものです。この問題は、Linuxで特定のフォントとアンダースコアを使用した場合に最も頻繁に観察されました。

* ベンチマークに関する詳細情報はxtermjs/xterm.js#1790で確認できます。

ソース管理

Git: git.ignoredRepositoriesにおける相対パス

git.ignoredRepositories 設定が相対パスをサポートするようになりました。これは、ワークスペース設定を構成する際に、VS Codeで特定のレポジトリを無視したい場合に便利です。

Git: FileSystemProviderの採用

Git拡張機能は、FileSystemProvider APIを使用するようになりました。これは、特定のエンコーディング問題を修正するだけでなく、Gitリポジトリからファイルの古いバージョンをより高性能かつ信頼性の高い方法で公開します。

言語

HTMLミラーカーソル

VS Codeは、HTMLタグを編集する際に「ミラーカーソル」を追加するようになりました。この動作は、デフォルトでオンになっている html.mirrorCursorOnMatchingTag 設定で制御されます。

この機能は、カーソルがHTMLタグ名範囲内に入ると、一致するタグにマルチカーソルを追加することで動作します。マルチカーソルモードと同様に、単語単位での削除や選択が可能です。カーソルがタグ名範囲外に移動すると、ミラーカーソルは削除されます。

特殊なケースとして、カーソルが開始タグの末尾にあるときにスペースを入力した場合が挙げられます。たとえば、<div|></div|>のようにdivの末尾にある場合です。この場合、VS Codeは閉じタグ名の後の挿入されたスペースを削除し、ミラーカーソルモードを終了するため、HTML属性の編集を続けることができます。

HTML mirror cursor

テーマ: Nord, フォント: Input Mono

HTMLタグの名前変更

HTMLの開始/終了タグペアの名前を変更するには、F2を使用できるようになりました。

HTML rename tag

自動補完されるCSSプロパティのランク付け

CSSの自動補完は、プロパティを人気度でランク付けするようになりました。

CSS suggestions ranked by popularity

使用状況データはChromeStatus.orgから取得されています。

Sassモジュールのサポート

Sassは最近、新しいモジュールシステムを導入しました。

SCSSファイルにおけるSassモジュールの構文ハイライトと、言語機能のサポートを追加しました。言語機能には以下が含まれます。

  • @use と @forward の自動補完。
  • @use と @forward パスのパス補完。
  • sass:math や sass:color などのSassの組み込みモジュールの自動補完。
  • @use と @forward インポートパスのドキュメントリンク。

Sass module support

JSON

大きなJSONファイルでのパフォーマンス問題を避けるため、JSON言語サポートは、折りたたみ領域とドキュメントシンボル（アウトラインビューとブレッドクラム用）の計算数に上限を設けるようになりました。デフォルトでは、上限は5000アイテムですが、json.maxItemsComputed 設定でこの上限を変更できます。

JSON large file warning

TypeScript 3.7

VS CodeはTypeScript 3.7.3を搭載するようになりました。このメジャーアップデートには、Optional Chaining、Nullish Coalescing、Assertion Functionsを含むTypeScript言語の改善と、JavaScriptおよびTypeScriptの両方のための新しいツール機能がいくつか含まれています。いつものように、このリリースには多くの重要なバグ修正も含まれています。

TypeScript 3.7の機能については、TS 3.7ブログ投稿で詳しく読むことができます。

JavaScriptおよびTypeScriptのOptional Chainingサポート

TypeScript 3.7のおかげで、VS CodeはJavaScriptとTypeScriptの両方でOptional Chainingをすぐにサポートするようになりました。これには、構文ハイライトとIntelliSenseが含まれます。

Optional chaining and nullish coalescing

さらに、オプションプロパティの補完を受け入れると、VS Codeは自動的に ?. を挿入できます。

Selecting a completion on a potentially undefined value automatically inserts an optional chain

?. の自動挿入は、strict null checkingが有効になっていることに依存します。自動 ?. 挿入は、"typescript.suggest.includeAutomaticOptionalChainCompletions" または "javascript.suggest.includeAutomaticOptionalChainCompletions" 設定で無効にできます。

TypeScriptのインターフェース抽出リファクタリング

新しいインターフェースに抽出リファクタリングを使用すると、インライン型をインターフェースにすばやく抽出し、再利用できるようになります。

Selecting the new 'extract interface' refactoring

以下では、「keyes」から「Neural」インターフェースが抽出されたことがわかります。

After extracting the 'Neural' interface out of 'keyes'

JavaScriptおよびTypeScriptのセミコロンフォーマッタオプション

新しいjavascript.format.semicolonsおよびtypescript.format.semicolonsフォーマット設定により、フォーマッタがJavaScriptおよびTypeScriptファイル内のセミコロンをどのように処理するかを制御できます。

有効なセミコロンフォーマット設定値は以下の通りです。

  • ignore - セミコロンを追加または削除しません (デフォルト)。
  • insert - ステートメントの最後にセミコロンを挿入します。
  • remove - 不要なセミコロンを削除します。

未呼び出し関数チェック

条件式で関数を呼び出すのを忘れた場合、VS Codeが警告を発するようになりました。

次のTypeScriptのスニペットを考えてみましょう。

import * as fs from 'fs';

fs.stat('/path/to/file', function(err, stats) {
  if (stats.isDirectory) {
    handleDirectory(stats);
  }
});

上記の例は、Node.jsのfs.stat APIを使用してファイルに関する情報を取得しています。しかし、バグがあります！.isDirectoryは実際にはプロパティではなく関数です！これは、関数isDirectoryが定義されておりtrueと評価されるため、意図したディレクトリだけでなく、すべてのファイルでhandleDirectoryが呼び出されることを意味します。

VS Code can alert when you forget to call a function

この診断は、strict null checkingが有効になっている場合にのみ表示されることに注意してください。

デバッグ

デバッグ START ビュー

新しいデバッグSTARTビューを導入し、新しいワークスペースでデバッグを開始および構成しやすくしました。アクティブなファイルに基づいて適切なデバッグ拡張機能を選択し、アプリケーションのデバッグまたは実行を可能にします。より詳細なデバッグおよび実行構成には、引き続きlaunch.jsonファイルを構成するのが最善です。

以下では、Express JavaScriptアプリケーションのデバッグを素早く開始し、より詳細な制御が必要な場合にlaunch.jsonファイルを作成する様子がわかります。

Debug Start view

CALL STACKビューでのインラインアクションとしてのフレームの再開

フレームを再起動アクションの発見性を向上させるため、CALL STACKビューにホバー時に表示されるインラインアクションが追加されました。フレームの再起動は、ブレークポイントにヒットした後に前のソースコードを再実行する便利な方法です。デバッグ拡張機能がフレームの再起動をサポートしていない場合、このアクションは表示されません。

Restart frame button

デバッグコンソールにInputとOutputを表示

デバッグコンソールでの入力と出力をより明確に区別するために、左側にInputを示す>とOutputを示す<の装飾を追加しました。

Debug console input and output decorations

インラインブレークポイント表示

新しい設定 debug.showInlineBreakpointCandidates は、デバッグ中にインラインブレークポイント候補の装飾がエディターに表示されるかどうかを制御します。デフォルトでは、それらは表示されます。

プレビュー機能

プレビュー機能はリリース準備ができていませんが、使用できる程度には機能しています。開発段階での皆様の早期フィードバックをお待ちしております。

検索エディター

今回のマイルストーンでは、検索結果を専用のエディターに表示する作業を開始しました。これにより、検索結果を表示するスペースが増え、複数の検索結果コレクションを同時に維持できるようになります。

今回のリリースでは、検索エディターで以下のことができます。

  • 定義へ移動ファミリーのコマンド (定義をピーク、定義を横に開くを含む) を使用して、結果に移動します。
  • 検索を再実行して結果リストを更新します。
  • 結果を囲むソースコード行を表示します。
  • 結果をディスクに永続化して、後で参照したり、ソース管理で追跡したりできます。

今後のリリースでも、機能の追加と使いやすさの向上を継続します。

Search Editor

テーマ: A Touch of Lilac, フォント: Hasklig

注: search.enableSearchEditorPreview を true に設定することで、この機能をプレビューできます。

呼び出し階層ビュー

呼び出し階層APIがStableで利用可能になり、言語拡張機能の作成者がその実装に忙しく取り組んでいるため、呼び出し階層ビューを追加しました。これは呼び出し階層をピークビューを補完し、すべての参照を検索やすべての実装を検索と同じサイドバービューを共有します。言語拡張機能が呼び出し階層APIをサポートすると、コンテキストメニューまたはコマンドパレットから呼び出し階層を表示を選択してビューを表示できるようになります。

Call Hierarchy view

テーマ: GitHub Sharp, フォント: FiraCode

呼び出し階層ビューを使用すると、シンボルからの呼び出し元とシンボルの呼び出しをドリルダウンできます。アクティブなエディターで呼び出しをハイライト表示し、任意の子からビューの親を再設定でき、以前の実行履歴を保持します。

JavaScriptデバッガー

Node.jsとChrome用の新しいデバッガーに取り組んでいます。夜間ビルドの拡張機能js-debug-nightlyをインストールし、設定を更新して以下を追加することで、ドロップインの代替として使用できます。

{
  "debug.chrome.useV3": true,
  "debug.node.useV3": true
}

新しいデバッガーを使用するために、既存の起動構成を変更する必要はありません。

このデバッガーには、Webワーカーのデバッグとステップ実行機能など、さまざまな新機能が追加されています。

An animation showing stepping through postMessage calls to and from a webworker

テーマ: Earthsong、フォント: Fira Code

...追加の設定やフラグなしでnpmスクリプトをデバッグ...

An animation dispatching the "run npm script" command, selecting "npm start", and then hitting a breakpoint in an executed script

...その他にも！問題が発生した場合は、問題を報告してください。

拡張機能への貢献

リモート開発

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

1.41の機能ハイライトには以下が含まれます。

  • Dev Containers: サンプルリポジトリ (vscode-remote-try-pythonなど) をコンテナーで試すのがより簡単になりました。
  • Dev Containers: コンテナー作成時のパフォーマンスが向上し、devcontainer.jsonの新しいオプションが追加されました。
  • WSL: Surface Pro XなどのWindows 10 ARMベースPCでのサポート。
  • リモートエクスプローラーで、利用可能なビューを特定のリモートタイプに限定できるようになりました。

Remote Developmentリリースノートで、新しい拡張機能の機能とバグ修正について学ぶことができます。

また、VS Codeでコンテナーを検査するという最近のブログ投稿を読んだり、更新されたVS CodeでC++とWSLを使用するチュートリアルを試すこともできます。

ESLint

ESLint拡張機能の改善

  • ESLint 6.xのサポートが向上 - ほとんどの場合、ESLint 6.xを使用する際に作業ディレクトリを設定する必要はありません。
  • TypeScript検出の改善 - ESLint内でTypeScriptが正しく構成されるとすぐに、VS Codeのeslint.validate設定による追加構成は不要になります。HTMLおよびVue.jsファイルについても同様です。
  • Glob作業ディレクトリのサポート - 複雑なフォルダー構造を持ち、eslint.workingDirectoriesを介して作業ディレクトリをカスタマイズする必要があるプロジェクトでは、すべてのプロジェクトフォルダーをリストする代わりにグロブパターンを使用できるようになりました。たとえば、code-*はcode-で始まるすべてのプロジェクトフォルダーにマッチします。さらに、拡張機能はデフォルトで作業ディレクトリを変更するようになりました。この機能は、新しい!cwdプロパティで無効にできます。
  • 保存時の自動修正の改善 - 保存時の自動修正は、VS Codeの「保存時のコードアクション」インフラストラクチャの一部となり、1回の処理で可能なすべての修正を計算します。これは、editor.codeActionsOnSave設定を介してカスタマイズされます。この設定は、ESLint固有のプロパティsource.fixAll.eslintをサポートします。また、拡張機能は一般的なプロパティsource.fixAllも尊重します。

以下の設定は、ESLintを含むすべてのプロバイダーで自動修正をオンにします。

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

対照的に、この構成ではESLintに対してのみ有効になります。

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

また、以下の方法でESLintを選択的に無効にすることもできます。

    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": false
    }

vscode-scss

vscode-scss拡張機能は、SCSS変数、ミックスイン、および関数のクロスファイル言語サポートを提供します。今回のマイルストーンでは、新しいリリース0.8.0の開発を支援しました。

新バージョンでは以下の点が改善されています。

  • より良いインポートパス解決
  • 自動補完されたカラー変数の色プレビュー
  • パフォーマンスの向上

拡張機能作成

Figmaデザインツールキット

拡張機能開発者が拡張機能のエクスペリエンスをより良く設計できるように、Figmaデザインツールキットを作成しました。ツールキットへのアクセス方法と使用方法に関する説明が記載されているGitHubのツールキットリポジトリをチェックしてください。

以下は、含まれているコンポーネントの一部例です。

Figma design toolkit components

すべてのコンポーネントはサイズ変更可能で編集可能です。

Editing Figma components

問題が発生したり、特定のコンポーネントに関するリクエストがある場合は、ツールキットリポジトリで इशues を作成してください。そうすれば、私たちはそれらのリクエストを分類し、追跡できます。

デバッグアイコンの色トークン

デバッグビュー用に新しいカラー・トークンのセットを追加しました。

デバッグツールバー

  • debugIcon.startForeground
  • debugIcon.continueForeground
  • debugIcon.disconnectForeground
  • debugIcon.pauseForeground
  • debugIcon.restartForeground
  • debugIcon.stepBackForeground
  • debugIcon.stepIntoForeground
  • debugIcon.stepOutForeground
  • debugIcon.stepOverForeground
  • debugIcon.stopForeground

Debug toolbar colors

テーマ: Min Dark, フォント: Input Mono

デバッグブレークポイント

  • debugIcon.breakpointForeground
  • debugIcon.breakpointDisabledForeground
  • debugIcon.breakpointUnverifiedForeground
  • debugIcon.breakpointStackframeForeground
  • debugIcon.breakpointCurrentStackframeForeground

Debug breakpoint colors

テーマ: Min Dark, フォント: Input Mono

ワークスペースファイルイベント

ファイルやフォルダーが変更されたときに発生する新しいイベントがあります

  • vscode.workspace.on[Will|Did]CreateFile
  • vscode.workspace.on[Will|Did]RenameFile
  • vscode.workspace.on[Will|Did]DeleteFile

これらのイベントは、エクスプローラーから、または拡張機能がvscode.workspace.applyEdit(WorkspaceEdit) APIを介してファイルを作成、名前変更、または削除した場合に発生しますが、ディスク上でファイルが変更された場合や、vscode.workspace.fs APIを介してファイルが変更された場合には発生しません。

これらのイベントの考えられるユースケースは、ファイルの名前を変更する前にファイルの内容を更新したり、ファイルの削除/作成後にプロジェクトファイルを更新したりする言語サーバーです。

SnippetString

SnippetString 型に選択要素のビルダーメソッドが追加されました。

厳密なgetWordRangeAtPosition

TextDocument.getWordRangeAtPosition APIはより厳密になり、空文字列にマッチする無効な正規表現を無視する代わりに、エラーをスローするようになりました。

extensionKindの非推奨の文字列型

拡張機能の作成者は、package.jsonのextensionKindプロパティを使用して、リモートの場合に拡張機能をどこで実行すべきかを示すことができます。リリース (1.40) では、この値は文字列または配列のいずれかでした。今回のリリースから、このプロパティは配列値のみをサポートし、文字列の使用は非推奨となりました。詳細については、Remote Developmentドキュメントを参照してください。

DAPソースをURIに変換

VS Code拡張APIは、エディターで開くことができるリソースを参照する際にドキュメントURIを使用しますが、Debug Adapter ProtocolはSourceディスクリプタに基づいています。今回のマイルストーンでは、これら2つの世界を結びつけるAPIを追加しました。debug.asDebugSourceUri関数は、DAP SourceオブジェクトからURIを作成します。これにより、DAP SourceをVS Codeエディターで簡単に開けるようになります。

export async function openDAPSource(
  session: vscode.DebugSession,
  source: DebugProtocol.Source
) {
  const uri = vscode.debug.asDebugSourceUri(source, session);
  vscode.window.showTextDocument(vscode.workspace.openTextDocument(uri));
}

提案された拡張API

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

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

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

CodeAction.disabled

VS Codeでは、拡張機能がコードアクションを使用してリファクタリング機能を実装することを推奨しています。しかし、ユーザーがどのリファクタリングが拡張機能によってサポートされているかを発見したり、特定の選択に対して特定のリファクタリングが利用できない理由を理解したりするのは難しい場合があります。CodeAction.disabled APIの提案は、拡張機能がリファクタリングをより発見しやすくするのに役立つことを目指しています。

CodeActionの提案された.disabledプロパティは、特定のコードアクションが不可能である理由を説明する人間が読める文字列です。以下に、弊社のCodeActionサンプル拡張機能で.disabledを使用する例を示します。

import * as vscode from 'vscode';

export class Emojizer implements vscode.CodeActionProvider {

    public provideCodeActions(document: vscode.TextDocument, range: vscode.Range): vscode.CodeAction[] | undefined {
        const action = new vscode.CodeAction(`Convert to ${emoji}`, vscode.CodeActionKind.Refactor.append('emojize'));

        if (!this.isAtStartOfSmiley(document, range)) {
            // Tell the user why our action is not available
            action.disabled = 'Selection is not currently on a :)';
            return [action];
        }

        action.edit = new vscode.WorkspaceEdit();
        action.edit.replace(document.uri, new vscode.Range(range.start, range.start.translate(0, 2)), '😀');
        return action;
    }

    ...
}

ユーザーが無効なコードアクションをキーバインディングを通じて適用しようとすると、VS Codeは.disabledエラーメッセージをユーザーに表示します。

Showing the '.disabled' error in the editor

さらに、発見性を高めるために、無効なコードアクションはリファクタリングおよびソースアクションのコンテキストメニューで薄く表示されます。

A '.disabled' Code Action in the Refactor menu

無効なアクションは、トップレベルの電球メニューには表示されないことに注意してください。

あなたの拡張機能がコードアクションを使用している場合、CodeAction.disabledが有用であり、実装可能であると思われるかどうかをお知らせください。

カスタムエディターの編集機能

今回のイテレーションでは、カスタムエディターの提案に取り組み続けました。念のためお伝えすると、カスタムエディターは特定のファイルタイプに対してVS Codeの通常のテキストエディターの代わりに使用できるWebViewベースのビューです。VS Code 1.41現在、カスタムエディターはVS Codeの元に戻す/やり直し機能と保存機能と統合できるようになり、ビジュアルエディターやWYSIWYGエディターとしての使用を含む多くの興味深いユースケースが可能になりました。

現在のAPI提案はvscode.proposed.d.tsで見つけることができ、テキストおよびバイナリファイル用のカスタムエディターの使用方法を示す非常にシンプルな拡張機能サンプルもいくつか作成しました。

カスタムエディターにご興味がある場合は、現在の提案に関するフィードバックを共有し、実装可能かどうかをお知らせください。

セマンティックトークンプロバイダー

セマンティックトークンプロバイダーの新しい提案APIを追加しました。この新しいAPIにより、拡張機能は、エディターがTextMateベースの構文ハイライトを強化するために使用する追加のトークン情報を提供できます。

各セマンティックトークンは、トークンタイプと任意の数のトークン修飾子で範囲を注釈付けします。たとえば、タイプvariableと修飾子memberおよびmodificationは、メンバー変数への書き込みアクセスを記述します。その後、トークンのタイプと修飾子を使用してエディターにスタイルを追加します。

スタイル設定は、カラーテーマとユーザー設定の両方で構成できます。

    "editor.tokenColorCustomizationsExperimental": {
        "variable.member": {
            "foreground": "#35166d"
        },
        "*.modification": {
            "fontStyle": "underline"
        }
    }

この機能にご興味がある場合は、現在の提案に関するフィードバックをいただき、実験と早期実装を奨励したいと思います。

完全なサンプルはvscode-extensions-samplesリポジトリで利用できます。

Language Server Protocol

LSPを介した呼び出し階層ビューの提案サポートが追加されました。

ブラウザーのサポート

FirefoxおよびSafariのサポートの改善 (macOS & iPadOS)

このマイルストーンでは、FirefoxまたはSafariを使用する際のブラウザーでVS Codeを実行するエクスペリエンスの向上に注力しました。両方のブラウザーをサポートするための多くの問題を修正しました (Firefox、Safari)。Firefoxでは、アップストリームのブロックによりまだ完全なキーボードショートカットサポートはありません。追跡イシュー #85252で詳細を確認できます。

また、iPadOSのSafariで基本的なVS Code機能を有効にするために、多くの問題を修正しました。コアUI要素はタッチデバイスとポインタデバイスからアクセスできるようになりました。しかし、事前定義されたキーバインディング（EscapeおよびFunctionキー）、ホバー、タッチフレンドリーなUI/UXに関連する主要なブロックがまだあります。詳細については、イシュー #85254を参照してください。

ブラウザで利用可能なその他の機能

前回のマイルストーンでは、ブラウザでVS Codeを実行する設定のために、リポジトリからyarn webを実行するサポートを導入しました。この設定は、ブラウザでの問題テスト用であり、開発用ではありません。

今回のマイルストーンでは、テスト可能な機能をさらに追加しました

  • デバッグ
  • 検索
  • タスク
  • 問題

新しい機能が動作している様子を示すビデオはこちらです。

VS Code running in a browser

注: この設定は本格的な開発には使用しないでください。目的は、コミュニティが変更をVS Codeに貢献し、ブラウザでの全体的なエクスペリエンスを向上させることを可能にすることです。

エンジニアリング

yumリポジトリでInsidersが利用可能に

Insidersビルドがyumリポジトリで利用可能になり、aptリポジトリと同様に自動的に公開されます。ウェブサイトの指示に従ってリポジトリを設定し、sudo dnf install code-insidersを使用してインストールしてください。

Monaco Editorの継続的ビルド

今回のイテレーションでは、Monaco Editorに継続的ビルドとテストパイプラインを追加しました。VS CodeリポジトリのメインブランチからMonaco Editorのコアをビルドし、潜在的なバグや予期せぬ破壊的変更をできるだけ早く検出するために健全性テストを実施しています。

注目すべき修正点

  • 51039: 他のタブで左側のエディターを閉じると、差分エディターが閉じる
  • 83746: Web: コンポジット & ビュー (アクティビティバー、パネル) をドラッグ＆ドロップできない
  • 80026: launch.jsonの灰色属性が紛らわしいので、削除してください
  • 83449: アクセシビリティ: アクセシビリティモードでのCtrl+Right (CursorWordAccessibilityRight) は、次の単語の末尾ではなく先頭にジャンプすべきである
  • 83753: console.debug.wordWrapを無効にすると、改行と空白が除去される
  • 85086: search.usePCRE2 が無効になっている場合、グローバル検索で後方参照がサポートされない
  • 36219: Git: 「選択範囲をステージ」コマンドでエンコーディングがUTF-8に変更される

ありがとうございます

最後に、そしてもちろん最も重要なこととして、Visual Studio Codeをさらに良くするために協力してくれた以下の方々に、心からの感謝を申し上げます！

問題追跡への貢献者

vscodeへの貢献者

language-server-protocolへの貢献者

vscode-css-languageserviceへの貢献者

debug-adapter-protocolへの貢献者

vscode-chrome-debug-coreへの貢献

vscode-vsceへのコントリビューション

localizationへの貢献

800人を超えるCloud + AI LocalizationコミュニティメンバーがMicrosoft Localization Community Platform (MLCP) を使用しており、そのうち約100人以上がVisual Studio Codeに積極的に貢献しています。新しい翻訳の提供、翻訳への投票、またはプロセス改善の提案など、皆様の貢献に感謝いたします。

以下は貢献者のスナップショットです。貢献者名のリストを含むプロジェクトの詳細については、プロジェクトサイトhttps://aka.ms/vscodelocをご覧ください。

  • ボスニア語 (ラテン文字、ボスニア・ヘルツェゴビナ): Sead Mulahasanović, Ismar Bašanović, Adnan Rizvan.
  • デンマーク語: Lasse Stilvang.
  • オランダ語: Lemuel Gomez, Gideon van de Laar.
  • 英語 (イギリス): Martin Littlecott, Alonso Calderon, Daniel Imms, Kamalsinh Solanki.
  • フィンランド語: Tuula P.
  • フランス語: Antoine Griffard, Thierry DEMAN-BARCELÒ, Edouard Choinière, Joel Monniot, Rodolphe NOEL, Alain BUFERNE, Xavier Laffargue, DJ Dakta.
  • ドイツ語: Pascal Wiesendanger, Jakob von der Haar, jan-nitsche, Michael Richter.
  • ギリシャ語: Valantis Kamayiannis, Θοδωρής Τσιρπάνης.
  • ヘブライ語: Ariel Bachar.
  • ヒンディー語: Kiren Paul, Niraj Kumar, Preeti Madhwal, Jaadu Jinn, Mahtab Alam.
  • ハンガリー語: József Cserkó, Kiss Attila Csaba, Krisztián Papp.
  • 簡体字中国語: Yizhi Gu, Tingting Yi, Justin Liu, Charles Dong, Peng Zeng, Tony Xia, 斌 项, Yixing Zheng, paul cheung, 普鲁文, Sheng Jiang, 钟越, Joel Yang, 一斤瓜子, Zhiqiang Li, Yiting hu, Alexander ZHANG, 张锐, Libing Yang, ZHENGCHENG CHEN, 光宇 朴, 石岩 詹, 舜杰 杨, WJ Wang, Siam Chen.
  • 繁体字中国語: Winnie Lin, 船長, Alan Tsai, TingWen Su.
  • インドネシア語: Eriawan Kusumawardhono, Arif Fahmi, Laurensius Dede Suhardiman, Christian Elbrianno.
  • イタリア語: Alessandro Alpi, Luigi Bruno.
  • 日本語: Takayuki Fuwa, 内田 貴康, 内田 恭平, 牧野 浩一, 天明 雅和, 戸倉 綾.
  • 韓国語: Hongju.
  • ラトビア語: Andris Vilde.
  • ノルウェー語: Frode Aarebrot, Anders Stensaas, Thomas Ødegård, Thomas Isaksen.
  • ポーランド語: Makabeus Orban, Wojciech Maj, Kacper Łakomski, Oskar Janczak, Szymon Seliga, Mateusz Redynk, Franx Bar.
  • ポルトガル語 (ブラジル): Marcelo Fernandes, Albert Tanure, Arthur Lima, Nylsinho Santos, Pudda, Matheus Vitti Santos, Rodrigo Crespi, Roberto Fonseca, Felipe Nascimento.
  • ポルトガル語 (ポルトガル): Francisco Osorio, Luís Chaves, Ricardo Sousa Vieira, João Fernandes.
  • ルーマニア語: LaServici, Dan Ichim.
  • ロシア語: Vadim Svitkin.
  • セルビア語 (キリル文字): Dusan Milojkovic.
  • スペイン語: José María Aguilar, Gustavo Gabriel Gonzalez.
  • タミル語: MUTHU VIJAY, Sankar Raj, Kadhireshan S, Pandidurai R, Madhu Chakravarthy, Madhu Maha.
  • トルコ語: Mehmet Yönügül, mehmetcan Gün, Misir Jafarov, Fırat Eşki, Gökberk Nur, Safa Selim.
  • ウクライナ語: Arthur Murauskas, Oleksandr Krasnokutskyi.
  • ベトナム語: Dat Nguyen, Vương, Dao Ngo, Van-Tien Hoang, ng-hai.