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

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

アップデート 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をフォローしてください！

Workbench

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

ファイルエクスプローラーでは、単一の子フォルダをコンパクトな形式で表示するようになりました。この形式では、単一の子フォルダが結合されたツリー要素に圧縮されます。例えば、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) を押すのが面倒な場合は、自動保存 (ファイル > 自動保存) を有効にできます。

Peek エディタからの保存

Peek ビューを起動して入力すると、その埋め込みエディタにフォーカスがある場合、⌘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) でフォントレンダリングを改善しました。以下のスクリーンショットは、ビフォーアフターの比較を示しています (違いを示すために拡大)。特に、ワークベンチの多くのツリーおよびリスト要素は、グレースケールアンチエイリアシングを使用してレンダリングされていましたが、サブピクセルアンチエイリアシングでレンダリングされるようになりました。

Before (左) と After (右)

Improved font rendering before and after

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

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

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

検索

入力中に検索結果を更新

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

ここでは、TypeScript のオプショナルチェイニング構文を採用するための正規表現検索と置換クエリを構築するのに、即座のフィードバックが役立っています。

Search result updates on type

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

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

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

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

Add cursors to search results

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

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

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

Editor

エラー、警告、およびコンテンツ変更のミニマップデコレーション

エラーと警告がミニマップ (コード概要) でインラインで強調表示されるようになりました。これらのデコレーションの色は、新しい 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 設定でカスタマイズされます。例えば、「定義へ移動」の代替を「宣言へ移動」にし、その逆も可能です。以前の動作を好む場合は、設定を空にすることができます。

Peek、Go to、Find All コマンド

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

以下のビデオは、実装をピークを使用して、Peek ビューで 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 の変数は表示する、といった設定が可能です。

以下に、JavaScript ファイルでは value 定数がアウトラインビューに表示されるのに、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 文字だけではなくなりました。これにより、同じ文字を繰り返し描画する速度が大幅に向上します。

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

WebGL frames are much faster

信頼性は、これが統合されることで改善が期待される点の1つです。キャンバスレンダラーでは、ブラウザは賢く動作しようとし、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 タグ名範囲に移動すると、一致するタグにマルチカーソルを追加することで機能します。マルチカーソルモードと同様に、単語単位の削除または単語単位の選択を使用できます。ミラーカーソルは、カーソルがタグ名範囲外に移動すると削除されます。

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

HTML mirror cursor

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

HTMLタグの名前変更

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

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 が搭載されました。このメジャーアップデートには、オプショナルチェイニング、Nullish Coalescing、アサーション関数などの TypeScript 言語の改善に加え、JavaScript と TypeScript の両方に対応する新しいツール機能も含まれています。これまでと同様に、このリリースには多くの重要なバグ修正も含まれています。

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

JavaScript および TypeScript におけるオプショナルチェイニングのサポート

TypeScript 3.7 のおかげで、VS Code は JavaScript と TypeScript の両方でオプショナルチェイニングをすぐにサポートします。これには構文ハイライトと IntelliSense が含まれます。

Optional chaining and nullish coalescing

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

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

?. の自動挿入は、厳密な null チェックが有効になっているかどうかに依存します。自動 ?. 挿入は、"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

この診断は、厳密な null チェックが有効になっている場合にのみ表示されることに注意してください。

デバッグ

デバッグ START ビュー

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

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

Debug Start view

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

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

Restart frame button

デバッグコンソールにインプットとアウトプットを表示

デバッグコンソールでの入力と出力の区別を明確にするため、左側に '> ' と '< ' のデコレーションを追加しました。

Debug console input and output decorations

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

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

プレビュー機能

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

検索エディター

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

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

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

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

Search Editor

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

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

呼び出し階層ビュー

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

Call Hierarchy view

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

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

JavaScriptデバッガー

Node.js と Chrome 用の新しいデバッガを開発中です。夜間版拡張機能js-debug-nightlyをインストールし、設定を更新して追加することで、既存のデバッガの代わりとして使用できます。

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

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

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

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

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

拡張機能への貢献

リモート開発

リモート開発拡張機能の作業が続けられています。これにより、コンテナ、リモートマシン、または 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 の検出の改善 - TypeScript が ESLint 内で正しく設定されていれば、VS Code の eslint.validate 設定を介した追加設定は不要になりました。HTML および Vue.js ファイルについても同様です。
  • グローバル作業ディレクトリのサポート - 複雑なフォルダ構造を持ち、eslint.workingDirectories を介して作業ディレクトリをカスタマイズする必要があるプロジェクトでは、すべてのプロジェクトフォルダを列挙する代わりにグローバルパターンを使用できるようになりました。例えば、code-* は code- で始まるすべてのプロジェクトフォルダに一致します。さらに、拡張機能はデフォルトで作業ディレクトリを変更します。この機能は、新しい !cwd プロパティで無効にできます。
  • 保存時の自動修正の改善 - 保存時の自動修正が VS Code の Code Action on Save インフラストラクチャの一部となり、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

問題が発生した場合、または特定のコンポーネントのリクエストがある場合は、ツールキットリポジトリに問題を作成してください。これにより、リクエストのトリアージと追跡を行うことができます。

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

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

デバッグツールバー

  • 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) では、この値は文字列または配列でした。このリリースからは、このプロパティは配列値のみをサポートし、文字列の使用は非推奨となりました。詳細については、リモート開発ドキュメントを参照してください。

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 では、upstream の問題により、まだ完全なキーボードショートカットサポートはありません。詳細は追跡課題 #85252で確認できます。

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

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

前回のマイルストーンで、リポジトリから yarn web を実行してブラウザで VS Code をセットアップするサポートを導入しました。このセットアップは、ブラウザでの問題をテストすることを目的としており、開発用ではありません。

このマイルストーンでは、さらに多くの機能をテストできるようにしました。

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

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

VS Code running in a browser

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

エンジニアリング

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

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

Monaco Editor の継続的ビルド

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

注目すべき修正点

  • 51039: 他のタブで左側のエディターを閉じると、Diff エディターが閉じる
  • 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への貢献

Cloud + AI Localization コミュニティには 800 人以上のメンバーが 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.
  • 日本語: 布和 貴之, 内田 貴康, 内田 恭平, 牧野 浩一, 天明 雅和, 徳倉 彩.
  • 韓国語: 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.
© . This site is unofficial and not affiliated with Microsoft.