🚀 VS Codeで!

2022年9月 (バージョン 1.72)

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

Update 1.72.1: このアップデートでは、これらのセキュリティ問題に対処しています。

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

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

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

Insiders: 最新機能をいち早く試したいですか？ナイトリーInsidersビルドをダウンロードして、最新のアップデートをすぐにお試しください。

ワークベンチ

ツールバーからアクションを非表示にする

ツールバーからアクションを非表示にできるようになりました。ツールバーのアクションを右クリックし、その非表示コマンドまたは切り替えコマンドのいずれかを選択します。非表示のアクションは... その他のアクションメニューに移動され、そこから呼び出すことができます。メニューを復元するには、ツールバーボタン領域を右クリックして、メニューのリセットコマンドを選択します。すべてのメニューを復元するには、コマンドパレットからすべてのメニューをリセットを実行します（(⇧⌘P (Windows、Linux Ctrl+Shift+P)）。

以下のビデオでは、GitLens拡張機能のファイル注釈メニューがエディターツールバーから非表示になり、その後メニューのリセットで復元されます。

マージエディター

3ウェイマージエディターの使用をオプトインする

受け取ったマージエディターのフィードバックをすべて見直し、全体的なエクスペリエンスについて検討した結果、競合が検出された場合、デフォルトで3ウェイマージエディターを表示しないことにしました（git.mergeEditor設定は現在falseです）。この決定の理由は、issue #160806に記載されています。

競合のあるファイルの場合、ユーザーはマージエディターで解決を選択して、3ウェイマージエディターを開くことができます。

A screenshot of a file with conflicts, showing the "Resolve in Merge Editor" button

CodeLens UI

ユーザーからのフィードバックによると、チェックボックスにはいくつかのUX上の問題がありました。チェックボックスは発見しにくく、すべての可能な状態を適切に表していないため、混乱を引き起こしていました。今回のイテレーションでは、テキストラベル（受信を承認、現在を承認、両方を承認）を使用するCodeLens UIに切り替えました。

Merge editor before with checkboxes and after with CodeLens

このデザインについては引き続き改善を重ね、受け取るすべてのフィードバックを注意深く監視していきます。

結果ファイルがスクラッチから再計算される

前回のイテレーションでは、マージエディターを競合のあるファイルの代替ビューとして設計しようとしました。競合マーカーを表示する代わりに、別のエディターペインに競合の詳細が表示されていました。この設計には、マージエディターを開いてもディスク上のファイルが変更されず、マージエディターを開く前に行ったユーザーの変更を保持できるという利点がありました。残念ながら、これは混乱を招くだけでなく、すべての場合に機能するわけではありませんでした。なぜなら、私たちのマージアルゴリズムとGitマージアルゴリズムが完全に一致していなかったからです。

今回のリリースでは、競合マーカーのあるファイルがマージエディターで開かれると、最初のステップとして、競合マーカーを挿入せずに、マージアルゴリズムを使用して結果ファイルを再計算します。一方向の競合は自動的に解決され、適切な競合は両方のバージョンの共通の祖先にリセットされ、未処理としてマークされます。

ベースビュー

マージエディターには、個別のベースビューが追加され、任意のサイドを共通の祖先と比較するために使用できます。

ツリービューの検索コントロールの改善

ツリービューの検索コントロールを垂直方向に移動して、その背後にあるUI要素にアクセスできるようになりました。⌥⌘F (Windows、Linux Ctrl+Alt+F)をツリービュー内で押すと、検索コントロールが表示されます。

Tree view Find control supports vertical movement

さらに、ツリービューの検索コントロールは、再度開いたときに最後の検索語句を記憶します。

Tree view Find control remembers last search text

一部のオーディオおよびビデオファイルの組み込みプレビュー

VS Codeは、一部のオーディオおよびビデオファイル形式のプレビューをサポートするようになりました。

Previewing an MP4 video in VS Code

現在、次のオーディオ形式がサポートされています。

  • WAV
  • MP3
  • Ogg
  • FLAC

また、次のビデオ形式をプレビューできます。

  • H.264
  • VP8

ビデオファイルの場合、ビデオトラックとオーディオトラックの両方のメディア形式がサポートされている必要があることに注意してください。たとえば、多くの.mp4ファイルは、ビデオにH.264を使用し、オーディオにAACを使用しています。VS Codeは.mp4のビデオ部分を再生できますが、AACオーディオはサポートされていないため、サウンドは出力されません。オーディオトラックにはMP3を使用する必要があります。

インクリメンタルな命名を無効にする

ファイルエクスプローラーでのインクリメンタルなファイル命名を無効にできるようになりました。explorer.incrementalNaming設定に新しいdisabled値を設定します。この値は、ファイルエクスプローラー内で貼り付け時にファイル名を変更するロジックを無効にします。ファイル名が既に存在する場合、ほとんどのネイティブエクスプローラーと同様に、既存のファイルを上書きするかどうかを尋ねられます。

VS Codeアプリケーションフォルダー内を編集する際の警告

VS Codeアプリケーションフォルダー内のファイルを編集すると、エディターに警告が表示されるようになりました。アプリケーションフォルダー内のファイルを誤って変更することはよくある間違いであり、通常は意図したものではありません。

VS Code warns when editing its application folder files

エディター

自動スクロール動作の改善

選択してドラッグすると、エディターはディスプレイのフレームレート（FPS）に依存する方法でスクロールしていました。そのため、マウスがエディターの端に到達するとすぐにエディターがすばやくスクロールすることがありました。現在、エディターの自動スクロールは、マウスが端に近い場合は1秒あたり約1ビューポートの管理しやすい速度で、マウスがエディターから離れている場合はより速くスクロールします。これはFPSに依存しません。

以下のビデオでは、マウスカーソルがエディターから離れて下に移動するにつれて、スクロール速度が速くなっています。

ホバーの改善

エディターのホバーは、特にマウスがエディターの空の領域を通過するときに、非常に積極的に非表示になっていました。そのため、ホバーに表示される一部のアクションに到達するのが困難でした。現在、ホバーはマウスがその方向に向かって移動している限り表示されたままになります。設定"editor.hover.sticky": falseは以前の動作に戻ります。

右側の「After」ビデオでは、ホバーからクイックフィックスを選択するのがはるかに簡単になっています。

新しいコードアクションのグループ

コードアクションコントロールで、InlineとMoveの2つの新しいグループを使用できるようになりました。

これらのグループは、refactor.inlineとrefactor.moveのコードアクションの種類に対応しています。

新しいコードアクションの色

コードアクションコントロールも、今回のイテレーションでは少し異なって見えることに気付くかもしれません。スタイルは、より適切なテーマの色を使用するように更新されました。最大の変更は、コントロール本体がmenu.*ではなくeditorWidget.*の色を使用するようになったことです。

これらの色については引き続き調整中ですので、特定のテーマでうまく機能しない場合や、色のカスタマイズオプションが不足している場合はお知らせください。

拡張機能

最近更新された拡張機能

VS Codeは、拡張機能ビューの更新の最近更新されたセクションに、過去7日間に更新された拡張機能を表示するようになりました。

Recently Updated section in the Extensions view

注意が必要な拡張機能

VS Codeは、デフォルトのインストール済みセクションの最上部に、注意が必要な拡張機能をソートして表示するようになりました。これには、更新が保留中の拡張機能、または更新または無効化され、VS Codeの再読み込みが必要な拡張機能が含まれます。

Extensions requiring attention are displayed at the top of the Extensions view

アクティビティバーの拡張機能アイコンのバッジには、注意が必要な拡張機能の数が表示されるようになりました。

Extensions badge showing that four extensions require attention

拡張機能の更新を無視する

更新ドロップダウンメニューの更新を無視ボタンをクリックして、拡張機能の更新を無視できるようになりました。これにより、拡張機能は注意が必要な拡張機能リストから削除されます。

Ignore Updates option in Extensions view context menu

このアクションを元に戻すには、同じ更新を無視ボタンのチェックを外します。

Checked Ignore Updates option in Extensions view context menu

拡張機能の特定のバージョンをインストールする（別のバージョンをインストール経由）と、その拡張機能の更新も無視されることに注意してください。

インストール済み拡張機能のソート

インストール済み拡張機能のリストを、インストール数、評価、名前、公開日、および更新日でソートできるようになりました。

Extensions view Sort By menu options

検索

ツリービューとして表示される結果

検索結果をツリーで表示できるようになりました。検索ビューの右上隅にあるリスト/ツリーアイコンをクリックして、リストビューとツリービューを切り替えるだけです。

Search results shown as a tree view

テーマ: Night Owl Light (プレビュー: vscode.dev)

ファイルの装飾設定

検索結果では、ファイルステータスを反映するファイル名バッジと色をオン/オフできるようになりました。設定は、検索 > 装飾: バッジ (search.decorations.badges) および 検索 > 装飾: 色 (search.decorations.colors) です。

Search results file decoration settings

テーマ: Night Owl Light (プレビュー: vscode.dev)

ソース管理

ネストされたGitリポジトリの検出

長年の機能リクエストに対応するため、今回のマイルストーンでは、ネストされたGitリポジトリのサポートを追加するためにリポジトリ検出に変更を加えました。ネストされたリポジトリの場所によっては、git.repositoryScanMaxDepth設定（デフォルトは1レベル）を変更する必要がある場合があります。

パスフレーズ付きSSHキーのサポートを追加

Git操作にパスフレーズ付きのSSHキーが使用される場合、VS Codeはクイック入力コントロールを表示して、SSHキーのパスフレーズを入力できるようにします。パスフレーズはキャッシュされず、Git操作が実行されるたびに入力する必要があります。

チェックアウト前のプル

今回のマイルストーンでは、ブランチの切り替えプロセスを合理化するための新しい設定git.pullBeforeCheckoutを追加しました。この設定が有効になっている場合、送信コミットがない場合は、リモートからプルして、ブランチをチェックアウトする前に早送りします。

リポジトリフェッチの改善

複数のリモートを持つGitリポジトリの場合、フェッチコマンドを呼び出すと、すべてのリモートのリストを含むクイックピッカーが表示されるようになりました。ユーザーは、フェッチする特定のリモートを選択するか、すべてのリモートからフェッチするかを選択できます。

マージの中止コマンド

現在進行中のマージ操作を中止するための新しいコマンド、Git: マージを中止が追加されました。

ターミナル

ターミナルのクイックフィックス

シェル統合によって強化された新機能であるクイックフィックスのロールアウトを開始しています。この機能には、オーディオキューのサポートが付属しています。audioCues.terminalQuickFixで有効にすると、修正が利用可能になったことを音で知らせます。

クイックフィックスは、コマンドがユーザーが実行する可能性の高い一連のアクションにマップされる場合に使用でき、エディターで使用されるのと同じキーバインドCtrl+.またはCmd+.でアクティブ化できます。

以下は、最初にサポートされるクイックフィックスです。

Git類似コマンド

Gitコマンドのタイプミスがあった場合、クイックフィックスは類似のコマンドを提案します。

Run: git status is suggested after git sttatus is mistyped

Gitアップストリームの設定

git pushが実行され、アップストリームリモートがない場合、クイックフィックスはアップストリームリモート引数を使用してプッシュすることを提案します。

Run: git push set upstream is suggested

Git PRの作成

ブランチがリモートに初めてプッシュされるとき、クイックフィックスはPRを作成するためのリンクを開くことを提案します。

An open GitHub PR link action is offered

空きポート

サーバーが既に使用中のポートを使用して起動された場合、クイックフィックスはプロセスを強制終了してポートを解放するアクションを提供します。

A server launch fails with a port 3000 in use error. An action to free port 3000 is offered.

シェル統合の改善

シェル統合に対する次の改善が行われました。

  • 最近使用したコマンドを実行および最近使用したディレクトリに移動は、行にコンテンツがある場合（または信頼性をもって判断できない場合）に、行をクリアするようになりました。
  • 一部のビルドツールと競合する可能性のある$PREFIX環境変数のbashスクリプトの使用法を削除しました。
  • $ZDOTDIR周辺のいくつかのエッジケースを修正するためにzshスクリプトを改良しました。
  • 複数のユーザー間で共有されているマシンでのzshシェル統合の処理を改善しました。

ハイパーリンクのサポート

ターミナルで実行されているアプリケーションから送信されたハイパーリンクがサポートされるようになりました。これにより、URLを指すラベルを表示でき、点線のアンダーラインで表示されます。

Hyperlinks appear in the terminal with dashed underlines, hovering the hyperlink reveals the URL

以下は、https://vscode.dokyumento.jpを指すラベル「VS Code」でリンクを作成する方法の例です。

printf '\e]8;;https://vscode.dokyumento.jp\e\\VS Code\e]8;;\e\\'

またはより一般的には

\x1b]8;; <URL> \x1b\ <Label> \x1b]8;;\x1b\'

VT機能のサポート

このバージョンでは、次のVTエスケープシーケンスのサポートが導入されました。

  • DECRQM: ANSIおよびDECプライベートモードレポート (CSI Ps $ p) - このシーケンスを使用すると、プログラムはターミナルが現在どのモードになっているか（たとえば、折り返しモードやブラケット付き貼り付けモードなど）をクエリできます。
  • DECSCA: 保護属性 (CSI Ps " q) - この属性は、DECSEDおよびDECSELがコンテンツを消去できるかどうかを決定します。

オーディオベル

オーディオベルがターミナルで動作するようになり、terminal.integrated.enableBellで有効にできます。

ターミナルのドキュメント

ターミナルのドキュメントがリファクタリングされ、VS Code Webサイトの独自の目次に移動されました。

現在、次のトピック固有のドキュメントがあります。

  • ターミナルの基本 - VS Code統合ターミナルをすばやく理解します。
  • ターミナルプロファイル - プロファイルを使用してターミナルをカスタマイズする方法を学習します。
  • シェル統合 - VS Codeは、コマンドステータス、履歴、クイックナビゲーションなどの機能を提供できます。
  • 外観 - ターミナルのテキストとカーソルのスタイル、および色を変更します。
  • 高度な機能 - カスタムキーバインド、Unicodeおよび絵文字文字の高度なサポート。

必要なときに適切なドキュメントを簡単に見つけられることを願っています。

タスク

実行タスクエントリのピン留め

タスクをタスク: タスクの実行リストにピン留めして、より迅速かつ簡単にアクセスできるようにすることができます。

Pinned items are the top category in the Run Task list

タスク完了音

タスクは、マルチタスクを可能にし、アクセシビリティを向上させるために、完了時に音を再生します。audioCues.taskCompleted設定でオーディオキューを設定します。

言語

Markdownリンクの検証

Markdownを使用していると、誤って無効なファイルリンクまたは画像参照を追加するのは簡単です。ファイル名に_（アンダースコア）ではなく-（ダッシュ）を使用したことを忘れたり、リンク先のファイルが別のディレクトリに移動されたりする可能性があります。多くの場合、これらの間違いに気付くのは、Markdownプレビューを表示した後、または公開した後だけです。VS Codeの新しいMarkdownリンク検証は、これらの間違いを見つけるのに役立ちます。

開始するには、"markdown.validate.enabled": trueを設定します。VS Codeは、ヘッダー、画像、およびその他のローカルファイルへのMarkdownリンクを分析するようになります。無効なリンクは、警告またはエラーとして報告されます。

A warning shown in the editor when linking to a file that does not exist

VS Codeは、他のMarkdownファイルの特定のヘッダーへの無効なリンクも検出できます。

リンク検証をカスタマイズするために使用できる設定がいくつかあります。

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

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

Markdownのリンク定義への抽出

参照リンクを使用すると、Markdownソースで同じリンクを複数回簡単に使用できます。

This [link][example-link] and [this link][example-link] both point to the same place!

[example-link]: http://example.com

これは、ファイル内の1か所を変更するだけで両方のリンクを更新できるため便利です。

新しいリンク定義への抽出リファクタリングは、既存のMarkdownリンクをリンク定義と参照リンクに変換するのに役立ちます。このリファクタリングは、現在のドキュメント内のリンクのすべての出現箇所を変換します。たとえば、次のMarkdownドキュメントの場合

[Markdown](https://daringfireball.net/projects/markdown/) and you: Adventures in [Markdown linking](https://daringfireball.net/projects/markdown/)!

https://daringfireball.net/projects/markdown/リンクのいずれかでリンク定義への抽出を実行すると、次のようになります。

[Markdown][md] and you: Adventures in [Markdown linking][md]!

[md]: https://daringfireball.net/projects/markdown/

リファクタリングを実行した後、VS Codeはリンク定義の名前を求めるプロンプトを表示します。上記の例では、mdと入力しました。

Markdownでリンク定義を整理する

Markdownファイルの新しいリンク定義を整理するコードアクション (source.organizeLinkDefinitions) は、すべてのリンク定義をファイルの末尾にグループ化し、アルファベット順にソートし、未使用のものを削除します。これは、ソースアクションコマンドを使用して実行できます。

たとえば、次のMarkdownソースの場合

Some [link][example] and an image:

![An image of a cat][cat-gif]

[example]: http://example.com
[cat-gif]: /keyboard-cat.gif
[some unused link]: http://example.com/file2

リンク定義を整理するを実行すると、次のようになります。

Some [link][example] and an image:

![An image of a cat][cat-gif]

[cat-gif]: /keyboard-cat.gif
[example]: http://example.com

未使用のsome unused link定義が削除され、残りの定義がアルファベット順にソートされていることに注目してください。

CSS / LESS / SCSS

CSS言語サポートは、@propertyおよび@layer at-rulesを理解するようになりました。

ノートブック

ノートブックのJavaScript出力がモジュールとして評価されるようになりました

ノートブックのJavaScript出力がモジュールとして扱われるようになりました。これは、出力内で宣言された変数が他の出力にリークしなくなることを意味します（また、const変数の場合は、変数名が競合する他の出力が実行されるのを防ぐ可能性さえあります）。

これは、JavaScript出力内でimportを使用できるようになったことも意味します。

%%javascript
import { myFunction } from './myModules.js';

console.log(myFunction());

ノートブックのアウトラインでサポートされるHTMLヘッダー

MarkdownセルのHTMLヘッダーが検出され、ノートブックのアウトラインビューにレンダリングされるようになりました。

HTML headers in notebook Markdown cells

VS Code for the Web

ブラウザのオムニボックスで「code」

Chrome/Edgeブラウザ拡張機能が追加され、GitHubリポジトリをvscode.devで簡単に開けるようになりました。

始めるには

  1. Chromeウェブストアから拡張機能をインストールします。
  2. ブラウザの検索バーにcode と入力して、オムニボックスをアクティブにします。
  3. 名前でGitHubリポジトリを検索し、Enterキーを押します。候補はブラウザの検索履歴によって入力されるため、目的のリポジトリが表示されない場合は、完全修飾名<owner>/<repo>を入力して開くこともできます（例: microsoft/vscode）。

以下のビデオでは、ユーザーがcode vscodeと入力してvscode.devでmicrosoft/vscodeリポジトリを開いています。

この拡張機能は、以前のVS CodeチームメンバーであるPine Wu氏が作成したGoto GitHub Repo Chrome拡張機能に触発され、多大な感謝を捧げます。

開発環境を切り替えるときに変更を持ち運ぶ

https://vscode.dev/github/microsoft/vscodeなどのGitHubまたはAzure Reposリポジトリを閲覧している場合、Continue Working Onコマンドを使用して、リポジトリで使用する別の開発環境を選択できます。

以前は、仮想ワークスペースにコミットされていない変更がある場合、それらをGitHubまたはAzure Reposにプッシュして、他の場所で表示する必要がありました。今回のマイルストーンでは、Continue Working On機能に編集セッション統合を追加し、コミットされていない変更がGitHub Codespaceなどのターゲット開発環境に自動的に移動するようにしました。

以下のビデオでは、VS Code for the Webを使用しているときに行ったJavaScriptファイルへのユーザーの変更が、新しいGitHub Codespaceを作成して作業を開始するときに適用されています。

今回のリリースでは、コミットされていない変更でContinue Working Onを初めて使用するときに、VS Codeサービスを使用して保留中の変更を保存する編集セッションを使用して、選択した開発環境に編集内容を持ち込むオプションが表示されます。これらの変更は、ターゲット開発環境に適用されると、サービスから削除されます。コミットされていない変更なしで続行することを選択した場合でも、"workbench.editSessions.continueOn": "prompt"設定を構成することで、後でこの設定を変更できます。

Prompt to bring working changes with you when using Continue Working On

VS Code for the Webを使用している場合、Continue Working Onを次の場所で使用すると、コミットされていない変更が持ち運ばれます。

  • GitHub Codespacesの新しいクラウドホスト環境
  • GitHubリポジトリの新しいローカルクローン
  • 同じ仮想GitHubリポジトリを持つローカルVS Codeインスタンス

Remote Repositories拡張機能を使用してデスクトップVS Codeを使用している場合、Continue Working Onを次の場所で使用すると、コミットされていない変更が持ち運ばれます。

  • GitHub Codespacesのクラウドホスト環境（GitHub Codespaces拡張機能経由で利用可能）
  • GitHubリポジトリの新しいローカルクローン
  • コンテナボリューム内のGitHubリポジトリの新しいクローン（Dev Containers拡張機能経由で利用可能）
  • https://vscode.dev
  • リポジトリのクローンを含む既存のローカルフォルダー

Issue Reporting

問題の閾値を7500文字に増加

組み込みの問題レポーターを使用してVS Codeまたは拡張機能の問題を報告する場合、github.comで問題をオープンするために使用されるURLの文字数に制限があります。この制限に達すると、問題の本文にWe have written the needed data into your clipboard because it was too large to send. Please paste.というメッセージが表示されます。残念ながら、一部のユーザーはこのメッセージに気付かず、問題を本文に貼り付けるのを忘れてしまいます。

今回のマイルストーンでは、閾値を7500文字に増やしました。これはなぜなら

  1. URLの文字数に厳しい制限がある特定のブラウザは、サポートされなくなりました (EOL)。
  2. GitHubには、URLの文字数に独自の制限があります。

これにより、URLに含まれる文字数がほぼ3倍になり、ほとんどのユーザーにとって十分なはずであり、クリップボードメッセージが表示される頻度が少なくなります。

実行中の拡張機能エディターで使用される問題レポーター

コマンド開発者: 実行中の拡張機能を表示を使用して実行中の拡張機能エディターを開き、問題の報告ボタンを選択すると、組み込みの問題レポーターが表示されます。以前は、これによりGitHubの問題に移動して貼り付けを求められ、拡張機能リポジトリに多くの不要で質の低い問題が作成されていました。拡張機能の問題の報告ボタンは、組み込みの問題レポーターを介して実行されるようになり、ユーザーは質の高い拡張機能の問題を送信できるようになります。

拡張機能への貢献

リモート開発

リモート開発拡張機能を使用すると、開発コンテナー、リモートマシン、またはWindows Subsystem for Linux（WSL）をフル機能の開発環境として使用できます。

Remote - WSL および Remote - Containers エクステンションの命名に関するフィードバックをお寄せいただきありがとうございます。これらの名前の Remote は、従来からのローカル開発ではなく、「リモート」または「分離された」WSL ディストリビューションまたは開発コンテナーで開発することを意図していました。しかし、これは多くの人が使用する「リモート」とは異なる用法であり、混乱を招く可能性がありました（例えば、開発コンテナーは自分のマシン上にあるのか？など）。

そのため、これらのエクステンションの名前をより明確にするために、名称と製品内コマンドを更新し、WSL および Dev Containers に名称変更しました。Marketplace のエクステンション識別子やドキュメントなどのリンクは変更されていないため、これらの 2 つのエクステンションの現在の使用方法に支障はないはずです。

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

名称変更とともに、これらのエクステンションの機能と修正に関する作業も継続されました。詳細については、Remote Development リリースノートをご覧ください。

Dev Container Features

Dev Container Features を使用すると、事前パッケージ化された機能を開発コンテナーに簡単に追加できます。Git や Docker などのツール、または Go や Java などのプログラミング言語のサポートなど、利用可能な機能のリストを確認し、devcontainer.json に追加できます。機能テンプレートを使用して、独自の機能を作成して公開および共有することもできます。

GitHub Pull Requests and Issues

GitHub Pull Requests and Issues エクステンションにも進展があり、プルリクエストと issue の作業、作成、および管理ができるようになりました。このリリースのハイライトは次のとおりです。

  • GitHub Enterprise Server のサポートの改善。これには以下が含まれます。
    • VS Code 組み込みの GitHub Enterprise Server 認証プロバイダーによる PAT レス認証。
    • Enterprise リポジトリを含むフォルダーを開いたときの自動検出と、セットアップへのオンランプ。
    • GitHub Enterprise Server のバグ修正。
  • ファイルを確認済みにするためのチェックボックス。

その他のハイライトについては、エクステンションの 0.52.0 リリースの変更ログをご覧ください。

GitHub Issue Notebooks

ワークスペース編集

GitHub Issue Notebooks エクステンションは、ノートブック API を紹介するものであり、非常に便利であることがわかりました。この精神に基づき、ワークスペース編集 API の最新の改善を採用しました。次の新しい Code Action があります。

  • セルを新しいノートブックに移動/コピーします。
  • OR ステートメントを使用してセルを分割できます。
  • label:bug のような修飾値をスニペット編集を使用して変数に抽出します。
  • 値セットエラーに対するスニペットベースのクイックフィックス。

Move cell into new notebook and Quick Fix for value set violation

ローカライズ

エクステンションは、VS Code がサポートする 13 の言語で完全にローカライズされるようになりました。また、新しい Localization API を使用してローカライズされた最初のエクステンションでもあります。これは、ローカライズがデスクトップと Web の両方で機能することを意味します。

Jupyter

セルタグとスライドショー編集のサポート

ドキュメントの JSON 形式を開かなくても、ノートブックエディターでセルタグとスライドショーの種類を直接編集できるようになりました。

これにより、papermill 用にノートブックをパラメーター化したり、nbconvert 用にノートブックをカスタマイズしたりできます。

Edit Jupyter notebook cell tags

また、コマンドを通じてノートブックセルのスライドショータイプを直接更新して、ノートブックをプレゼンテーション用のスライドに変えることもできます。

Edit Jupyter notebook slideshow

上記の両方の例は、セルメタデータを編集するために ノートブックワークスペース編集 API を使用しています。他のカスタムセルメタデータの編集をサポートする方法に興味がある場合は、GitHub リポジトリ (cell-tags, slideshow) から詳細を学ぶことができます。

インタラクティブウィンドウのコマンドインタラクションの改善

interactive.input.focus コマンドは、最後に使用したインタラクティブウィンドウの入力ボックスにフォーカスを与えるようになりました。以下の短いビデオでは、コマンドはカスタムキーボードショートカットで使用されています。

Interactive Window navigation using keyboard shortcuts

ノートブックの Delete セルコマンドがインタラクティブウィンドウセルで有効になり、元に戻せるようになりました。

Python ファイルのセル折りたたみ

# %% マーカーで示された Python ファイル内の「セル」をエディターで折りたたむことができるようになりました。

GitHub Enterprise Server 認証のサポート

これまで、GitHub Enterprise Server ユーザーは、VS Code で GitHub Enterprise Server にログインするために（たとえば、GitHub Pull Requests and Issues エクステンションで使用するために）、個人アクセストークン（PAT）を手動で作成する必要がありました。これは面倒なプロセスであり、ユーザーは PAT を作成するために VS Code を離れ、適切な権限で作成されていることを確認し、コピーして VS Code に貼り付ける必要がありました。

もう必要ありません。現在、GitHub Enterprise Server のログインフローは github.com のログインフローと同じであり、ユーザーは PAT を作成する必要なく GitHub Enterprise Server にログインできます。このエクスペリエンスを実際に確認するには、Marketplace から GitHub Pull Requests and Issues エクステンションを入手し、github-enterprise.uri 設定を GitHub Enterprise Server URI に設定して、エクステンションを試してみてください。新しいエクスペリエンスを示すビデオはこちらです。

テーマ: Panda Theme (プレビュー: vscode.dev)

Python

環境の作成コマンド

新しい 環境の作成 コマンドが追加され、VS Code の Python ユーザー向けに仮想環境または conda 環境を自動的に作成します。ユーザーは、コマンドパレットからコマンドをトリガーし、venv で新しい仮想環境を作成するか、Conda 環境を作成するかを選択し、最後にプロジェクトに必要なインタープリターを選択できます。コマンドは、プロジェクトフォルダーにある requirements.txt ファイルで概説されている必要なパッケージもインストールします。この新機能により、環境作成プロセスが合理化され、コーディングのベストプラクティスとしてユーザーが環境を利用することを奨励できることを願っています。

Create new virtual environment with Create Environment command

エクステンション作成者向けの新しい環境 API

Python API は、Python エクステンションによって検出されたユーザーのマシンで利用可能な Python 環境をエクステンションが操作する方法を提供するようになりました。エクステンションは、Python エクステンションがスクリプトを実行するために使用する選択された環境パスにアクセスしたり、優先パスに更新したりするために使用することもできます。

フィードバックは、issue #18888 にお寄せください。API はまだ最終決定されていないため、フィードバックに基づいて後方互換性を提供せずに変更される可能性があることに注意してください。

Python エクステンションテンプレート

Python エクステンションテンプレートは、リンター、フォーマッター、コード分析ユーティリティなど、お気に入りの Python ツール用の Visual Studio Code エクステンションを構築するのに役立ちます。テンプレートは、ツールを VS Code に統合するエクステンションを構築するために必要な基本的な構成要素を提供します。

プレビュー機能

設定プロファイル

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

設定プロファイルインジケーター

VS Code は、アクティビティバーの下部に設定プロファイルインジケーターを表示します。デフォルトでは、プロファイル名の最初の 2 文字がインジケーターに表示されます。短い名前を任意の 2 文字、絵文字、または codicon にカスタマイズすることもできます。codicon は、$(codicon-id) 構文を使用して参照できます。

Settings Profiles indicator

このインジケーターをクリックすると、短い名前を変更 オプションを含むメニューが表示されます。

Settings Profiles menu

設定プロファイルの同期

VS Code は、VS Code インスタンス間で設定プロファイルを同期することをサポートするようになりました。

注: この機能は現在、VS Code の Insiders リリースでのみ利用可能です。

WebAssembly と Web での Python 実行

過去数か月にわたって、WebAssembly (WASM) を VS Code に導入する作業を行ってきました。サポートを有効にするために、次の 2 つのことに取り組みました。

  • エクステンションが WebAssembly コードを実行できるようにするライブラリ。WebAssembly は、ワークスペース内のファイルと VS Code ターミナルに透過的にアクセスできます。これらのライブラリは vscode-wasm リポジトリで開発され、npm に @vscode/sync-api-common, @vscode/sync-api-client, @vscode/sync-api-service, および @vscode/wasm-wasi として公開されています。これらのリポジトリの README ファイルには、ライブラリの使用方法の例が含まれています。
  • Web 用 VS Code (たとえば、vscode.dev および insiders.vscode.dev) で Python ファイルの実行をサポートする VS Code エクステンション。エクステンションは Marketplace で Experimental - Python for the Web として入手できます。1 つの制約は、実行する Python コードが GitHub リポジトリでホストされている必要があることです。

以下のスクリーンショットは、Hello World プログラムの実行を示しています。

Execute Python file in VS Code for the Web

Python WASM: REPL を開始 コマンドを使用して Python REPL を開始することもできます。

Python REPL running in VS Code for the Web

ライブラリとエクステンションの両方が開発中であり、プレビューとして提供されていることに注意してください。WebAssembly Python インタープリターと VS Code 自体に制限があります。インタープリターの主な制限は次のとおりです。

  • pip サポートなし。
  • ソケットサポートなし。
  • スレッドサポートなし。結果として、非同期サポートはありません。

ただし、ソースホイール Python パッケージを含む独自の Python 環境を作成するためのサポートがあります。詳細については、エクステンションの README を確認してください。

VS Code の制限事項は次のとおりです。

  • デバッグサポートなし。Python ファイルのみを実行できます。
  • ネイティブ Python モジュールのサポートなし。

ただし、ご期待ください。これらの制限の一部を解除するための計画があります。

拡張機能の作成

クリーンな環境でのエクステンションデバッグ

エクステンションをデバッグする場合、常に、エクステンションがエクステンションの作成者の開発環境（ユーザー設定とインストールされたエクステンション）で実行されており、エクステンションのターゲットユーザーにとってより適切な環境で実行されていないという問題がありました。

最近導入された「プロファイル」機能を使用すると、エクステンションのデバッグ構成でプロファイルを指定することにより、開発中のエクステンションを別の環境で実行できるようになりました。プロファイル機能を有効にするには、workbench.experimental.settingsProfiles.enabled 設定を有効にします。

次の 2 つのシナリオがサポートされています。

  • エクステンションのデバッグが停止したときに自動的に削除される名前のない「空の」プロファイルを使用して、クリーンな環境でデバッグ します。
  • 開発中のエクステンション専用に作成され、特定ユーザーの設定とエクステンションを含む名前付きプロファイルを使用して、制御された環境でデバッグ します。

このデバッグ構成は、--profile-temp スイッチを使用してクリーンな環境でデバッグする方法を示しています。

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--profile-temp", "--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch"
}

また、これは、以前に作成した「extensionContext」という名前のプロファイルを使用する制御された環境でデバッグするためのデバッグ構成です。

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--profile=extensionContext", "--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch"
}

リモートロケーション（Remote Development エクステンション Dev Containers、SSH、または WSL 経由）でエクステンションをデバッグする場合、--profile-temp フラグを使用すると、このステータスメッセージが表示されることに注意してください。

Disconnected Status bar message

これは、一時プロファイルにはエクステンションが含まれていないため、予想される動作です。つまり、Remote Development エクステンションもありません。リモートシナリオの場合は、空の名前付きプロファイルを作成し、Remote Development エクステンションをそれに追加してから、--profile=.... コマンドラインオプションを使用することをお勧めします。

改善されたワークスペース編集 API

WorkspaceEdit でノートブックを編集する

ワークスペース編集は、vscode.NotebookEdit でノートブックを変更できるようになりました。vscode.NotebookEdit クラスには、ノートブックにセルを挿入、置換、および削除する編集を作成するための静的ファクトリ関数が含まれています。

const currentNotebook = vscode.window.activeNotebookEditor?.notebook;
if (currentNotebook) {
  const edit = new vscode.WorkspaceEdit();

  // Use .set to add one or more edits to the notebook
  edit.set(currentNotebook.uri, [
    // Create an edit that inserts one or more cells after the first cell in the notebook
    vscode.NotebookEdit.insertCells(/* index */ 1, [
      // ... new notebook cell data
    ])

    // Additional notebook edits...
  ]);

  await vscode.workspace.applyEdit(edit);
}

WorkspaceEdit でスニペット編集を実行する

新しい SnippetTextEdit タイプを使用すると、エクステンションは WorkspaceEdit でスニペット編集を実行できます。スニペット編集は通常テキスト編集に似ていますが、ユーザーはプレースホルダーをタブ移動したり、変数を挿入したり、選択要素から選択したりできます。スニペットの詳細については、このガイドを参照してください。

スニペット編集にはコードまたはノートブックエディターが必要であり、単一のエディターのスニペット編集のみをサポートできます。そうしない場合、通常テキスト編集のように動作します。

スニペット編集とワークスペース編集を組み合わせることで、GitHub Issue Notebooks エクステンションのサンプルなど、新しい、よりシームレスな Code Action とリファクタリングが可能になると考えています。

WorkspaceEdit でコンテンツを含むファイルを作成する

WorkspaceEdit を使用してファイルを作成するときに、コンテンツを指定できるようになりました。これを行うには、オプションバッグでコンテンツを渡します。

const edit = new vscode.WorkspaceEdit();
edit.createFile(newFileUri, { contents: new Unit8Array([1, 2, 3]) });

await vscode.workspace.applyEdit(edit);

コントリビューションされた Webview コンテキストメニュー

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

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

"contributes": {
  "menus": {
    "webview/context": [
      {
        "command": "catCoding.yarn",
        "when": "webviewId == 'catCoding'"
      },
      {
        "command": "catCoding.insertLion",
        "when": "webviewId == '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 オブジェクトです。最終的なコンテキストは、ドキュメントルートからクリックされた要素までたどることによって決定されます。

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

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

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

ユーザーが textarea を右クリックした場合、次のコンテキストが設定されます。

  • webviewSection == 'editor' - これは、親要素からの webviewSection をオーバーライドします。
  • mouseCount == 4 - これは、親要素から継承されます。
  • preventDefaultContextMenuItems == true - これは、VS Code が通常 Webview コンテキストメニューに追加するコピーと貼り付けのエントリを非表示にする特別なコンテキストです。

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

Custom context menus showing in a webview

Webview のアクティブテーマの新しいテーマ変数

Webview の新しい data-vscode-theme-id データ属性には、現在アクティブなテーマの ID が格納されます。これは、テーマのフルネーム (ローカライズされている可能性もあります) を追跡していた非推奨の data-vscode-theme-name 属性に代わるものです。

body[data-vscode-theme-id="One Dark Pro"] {
    background: hotpink;
}

Webview で data-vscode-theme-name を使用していた場合は、新しい data-vscode-theme-id 属性に移行してください。

非同期ノートブックレンダラー

ノートブックレンダラー API は、非同期ノートブックレンダラーをより適切にサポートするようになりました。これは以前は暗黙的にサポートされていましたが、renderOutputItem は出力項目のレンダリング中であることを示すために Promise を返すことができるようになりました。renderOutputItem 関数には、レンダリングがキャンセルされた場合に中止される AbortSignal も渡されるようになりました。

renderOutputItem(outputItem: OutputItem, element: HTMLElement, signal: AbortSignal): void | Promise<void>;

レンダラーが非同期処理を実行する場合は、VS Code がレンダラーをより適切にサポートできるように、これらの API 更新を採用してください。

Refactor.move Code Action kind

新しい refactor.move Code Action kind は、コードを移動するリファクタリング (シンボルを新しいファイルに移動したり、ファイル内のコードを並べ替えたりするなど) に使用できます。

エクステンションは以前に refactor.move kind の Code Action を作成できましたが、この kind は公式に文書化され、新しい Code Action コントロールによってサポートされるようになりました。

ビュー/タイトルのアクションに渡される選択されたツリー項目

view/title メニューにコントリビューションされたコマンドは、2 つの引数を受け取ります。1 つ目はフォーカスされたツリーノード、2 つ目はツリー内のすべての選択された項目です。

ツリービュー initialSize コントリビューションの最終決定

package.json でビューをコントリビューションするエクステンションは、initialSize プロパティを使用してビューの初期サイズを設定できます。initialSize は、CSS flex-grow と同様に機能します。

initialSize が適用される時期にはいくつかの制限があります。

  • これは 初期 サイズのみです。ビューがレンダリングされると、initialSize は再度適用されません。
  • エクステンションがビューとビューコンテナーの両方を所有している場合にのみ適用されます。

ツリービュー Badge の最終決定

TreeView には、ビューのビューコンテナーに数値バッジを設定するために使用できるオプションの viewBadge プロパティがあります。

View badge on a view in the Activity bar

バインドされていないブレークポイントの警告アイコン

デバッグエクステンションは、バインドされていないブレークポイントを持つアクティブなデバッグセッションがある場合にヒントメッセージを定義できるようになりました。これは、ブレークポイントビューのヘッダーと、エディターの灰色のブレークポイントアイコンにカーソルを合わせたときに表示されます。js-debug エクステンションでの使用例を次に示します。

Hovering the breakpoint warning icon

このメッセージは、デバッガーコントリビューションの新しい strings プロパティで宣言できます。次に例を示します。

"strings": {
  "unverifiedBreakpoints": "Message text goes here"
}

VS Code コミュニティディスカッション

エクステンション作成者向けの VS Code コミュニティディスカッション サイトが、質問をしたり、他の開発者とつながったり、優れた作品を紹介したりするための集いの場として開設されました。ここでは、VS Code API に関連する お知らせを見つけたり、質問を投稿したり、既存の回答を検索したり、エクステンションのショーアンドテルをチェックしたりできます。

提案されたAPI

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

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

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

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

組み込みの ノートブックレンダラー は、エクステンションが JavaScript コンテンツのレンダリングをカスタマイズできるようにする実験的な API を公開するようになりました。この API は現在、JavaScript コンテンツが評価される前に呼び出される単一のフック preEvaluate を公開しています。

この実験的な API を試すには、エクステンションが vscode.builtin-renderer API を拡張する必要があります。

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

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

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

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

  builtinRenderer.experimental_registerJavaScriptRenderingHook({
    // Invoked before th js has been evaluated
    preEvaluate(outputItem: OutputItem, element: HTMLElement, script: string, signal, signal: AbortSignal): string | undefined | Promise<string | undefined> {
      // You can either modify `element` or return a new script source here
    }
  });
}

この新しい API を試して、ご意見をお聞かせください。

env.shell 変更のイベント

新しいイベント env.onDidChangeShell が、エクステンションホストの検出されたデフォルトシェルである env.shell を補完するために追加されました。

env.onDidChangeShell(newShell => {
  console.log(newShell); // Same value as env.shell
});

ツリー項目のチェックボックス

提案された checkboxState を使用すると、ツリー項目にチェックボックスを追加できます。

Tree items with checkboxes

this.checkboxState = {
  state: vscode.TreeItemCheckboxState.Unchecked,
  tooltip: 'mark file as viewed'
};

API の一部としてのローカライズ

今回のイテレーションでは、エクステンションの文字列をローカライズするのに役立つ新しい API を導入しています。これは、以前にローカライズに使用されていた以前の vscode-nls および vscode-nls-dev モジュールを置き換えるものです。これらは引き続き機能しますが、これ以上の機能は追加されません。新しい API とツールは、使い慣れたものになるように設計されていますが、より使いやすく、より柔軟性も高くなっています。さらに、VS Code API の一部として含めることで、デスクトップ用 VS Code と Web 用 VS Code の両方でエクステンションをローカライズするためのサポートを提供できます。

VS Code エクステンションのローカライズには、4 つの重要な部分があります。

新しい vscode.l10n API

declare module 'vscode' {
  export namespace l10n {
    /**
     * A string that can be pulled out of a localization bundle if it exists.
     */
    export function t(message: string, ...args: any[]): string;
    /**
     * A string that can be pulled out of a localization bundle if it exists.
     */
    export function t(options: {
      message: string;
      args?: any[];
      comment: string[];
    }): string;
    /**
     * The bundle of localized strings that have been loaded for the extension.
     */
    export const bundle: { [key: string]: string };
    /**
     * The URI of the localization bundle that has been loaded for the extension.
     */
    export const uri: Uri | undefined;
  }
}

vscode.l10n 提案された API は、新しい名前空間であり、文字列をローカライズする必要があることを宣言するために使用できる単一の関数 t を提供します。関数は、文字列または message プロパティを持つオブジェクトで呼び出すことができます。関数は、ローカライズされた文字列が存在する場合はそれを返し、存在しない場合は元の文字列を返します。関数は、文字列の書式設定に使用できる引数と、翻訳者にコンテキストを提供するために使用できるコメントもサポートしています。

新しい API の使用例を次に示します。

import { l10n } from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const message = l10n.t('Hello in {0}!', vscode.env.language);
  vscode.window.showInformationMessage(message);
}

この例では、現在の言語のローカライズバンドルが存在する場合、文字列 Hello in {0}! がローカライズされます。{0} は現在の言語 (デフォルトでは en、フランス語の場合は fr、ブラジルポルトガル語の場合は pt-br など) に置き換えられます。ローカライズバンドルが存在しない場合、文字列はそのまま返され、引数で書式設定されます。これらのローカライズバンドルがどこから来たのか疑問に思うかもしれません。次のセクションで説明します。

vscode.l10n API は、ローカライズされた文字列のバンドルまたは文字列のバンドルへの URI へのアクセスも提供します。これは、後で説明するサブプロセスシナリオで使用することを目的としています。

重要: この API を使用する場合は、ローカライズバンドルの場所を明示的に宣言する必要もあります。これは、package.json に l10n プロパティを追加することで行われます。

{
  "main": "./out/extension.js",
  "l10n": "./l10n"
}

l10n プロパティは、ローカライズバンドルを含むフォルダーへの相対パスである必要があります。

@vscode/l10n-dev モジュール

@vscode/l10n-dev モジュールは、ローカライズバンドルを生成するために使用される新しいモジュールです。コマンドラインツールまたはライブラリとして使用できます。どちらも、提供されたソースコードから vscode.l10n.t(..) 呼び出しをスキャンすることにより、ローカライズバンドルを生成するために使用されます。

コマンドラインツールの使用例を次に示します。

npx @vscode/l10n-dev ./src --out ./l10n

これにより、./l10n フォルダーに bundle.l10n.json ファイルが配置されます。そこから、サポートするロケールごとに bundle.l10n.LOCALE.json ファイルを作成できます。たとえば、上記のコマンドで次の bundle.l10n.json ファイルが生成されるとします。

{
  "Hello": "Hello",
  "Hello {0}": "Hello {0}",
  "Hello {0}/This is a comment": {
    "message": "Hello {0}",
    "comment": ["This is a comment"]
  }
}

フランス語をサポートする場合は、bundle.l10n.fr.json ファイルにこれを作成します。

{
  "Hello": "Bonjour",
  "Hello {0}": "Bonjour {0}",
  "Hello {0}/This is a comment": "Bonjour {0}"
}

注: ローカライズされたバンドルにコメントは必要ありません。コメントは、元のバンドルを翻訳する翻訳者にとってのみ役立つためです。

@vscode/l10n-dev モジュールは、XLF ファイルを生成するためにも使用できます。VS Code チームは XLF ファイルを生成し、それを Microsoft の翻訳者に提供します。翻訳者は、翻訳された XLF ファイルを返送してくれます。次に、@vscode/l10n-dev モジュールを使用して、翻訳された XLF ファイルからローカライズされたバンドルを生成します。ローカライズプロセス全体についてより詳細に説明するブログ投稿を書く予定です。

@vscode/l10n モジュール

vscode.l10n API はエクステンションホストでのみ利用可能なため、サブプロセスでは使用できません。このため、サブプロセスでローカライズバンドルをロードするために使用できる新しいモジュールを作成しました。モジュールは @vscode/l10n と呼ばれ、次のように使用できます。

import { l10n } from '@vscode/l10n';

// Load the translations for the current locale
l10n.config({
  uri: process.env.BUNDLE_URI_FROM_EXTENSION
});

// returns the translated string or the original string if no translation is available
l10n.t('Hello World');

アイデアは、サブプロセスをスピンアップする責任があるエクステンション側のコードが、vscode.l10n.contents または vscode.l10n.uri API を使用して、バンドルまたはバンドルの URI をサブプロセスに渡すことです。サブプロセスは、@vscode/l10n モジュールを使用してバンドルをロードし、t 関数を使用して文字列を翻訳できます。@vscode/l10n モジュールで使用される t 関数も @vscode/l10n-dev モジュールでピックアップされるため、文字列を 1 つのプロセスを使用して抽出およびローカライズできます。

package.nls.json ファイル

package.nls.json ファイルに関して変更はありません。ローカライズする必要があるデフォルトの文字列を宣言するために引き続き使用され、package.json の隣にある必要があります。引き続き package.nls.LOCALE.json (LOCALE は de や zh-cn など) を持つことができ、ユーザーが VS Code をそのロケールに設定している場合、そのファイルで宣言された文字列が最初にピックアップされます。簡単な例を次に示します。

package.json

{
  "name": "my-extension",
  "version": "0.0.1",
  "main": "./out/extension.js",
  "l10n": "./l10n",
  //...
  "contributes": {
    "commands": [
      {
        "command": "my-extension.helloWorld",
        // The key is surrounded by % characters
        "title": "%my-extension.helloWorld.title%"
      }
    ]
  }
}

package.nls.json

{
  // That same key from the package.json
  "my-extension.helloWorld.title": "Hello World"
}

package.nls.de.json

{
  // That same key from the package.json
  "my-extension.helloWorld.title": "Hallo Welt"
}

まとめ

確かに消化すべきことがたくさんありますが、これが VS Code エクステンションのローカライズで私たちが進んでいる方向性のアイデアを提供できれば幸いです。

完全な例に興味がある場合は、l10n-sample を確認してください。

質問やフィードバックがある場合は、次の場所でお知らせください。

ログ出力チャネル

vscode.window.createOutputChannel API に、ログ専用の出力チャネルを作成するために使用できる新しい log ブール値オプションが追加されました。

/**
 * Creates a new {@link LogOutputChannel log output channel} with the given name.
 *
 * @param name Human-readable string which will be used to represent the channel in the UI.
 * @param options Options for the log output channel.
 */
export function createOutputChannel(
  name: string,
  options: { readonly log: true }
): LogOutputChannel;

LogOutputChannel は、メッセージをログに記録するための次のメソッドをサポートしています。

trace(message: string, ...args: any[]): void;
debug(message: string, ...args: any[]): void;
info(message: string, ...args: any[]): void;
warn(message: string, ...args: any[]): void;
error(error: string | Error, ...args: any[]): void;

エクステンションによって作成されたログ出力チャネルは、出力ドロップダウンビューに個別のエントリとして表示されます。このログ出力チャネルに書き込まれたメッセージは、VS Code ログメッセージと同じ形式で表されます。

Log Output channel

エンジニアリング

"クロスオリジン分離"に向けて

VS Code デスクトップと vscode.dev のクロスオリジン分離を有効にするために変更を加えました。これにより、共有配列バッファーなどの新しい強力な機能が有効になります。VS Code 自体と、エクステンションおよび Webview もこの恩恵を受けることができます。

クロスオリジン分離は現在、機能フラグの背後にあり、有効にすると、インターネットからリソースをロードするエクステンションと Webview に望ましくない影響を与える可能性があります。詳細については、強力な機能に必要な「クロスオリジン分離」の理由を参照してください。早期にフィードバックをお寄せいただければ幸いです。

これを試すには

  • --enable-coi フラグを使用して VS Code デスクトップを実行します。たとえば、code --enable-coi など。
  • vscode.dev を実行し、vscode-coi クエリを追加します。

クロスオリジン分離が有効になっていることを確認するには、開発者ツールのアプリケーションタブを使用するか、crossOriginIsolated グローバル変数の値を確認します。

Cross Origin Isolation enabled for web

起動パフォーマンスの向上

今回のマイルストーンでは、VS Codeの起動からテキストエディターに点滅するカーソルが表示されるまでの時間を改善するためにエンジニアリング時間を確保しました。私たちは常にパフォーマンス数値を追跡しており、前回のマイルストーンの終わりにわずかな低下が見られたため、それに対処したいと考えました。

これはチーム全体の取り組みであり、全員がソースコード全体にわたる様々な変更に貢献しました。ここでは、いくつかのハイライトを紹介します。

同期的なfs呼び出しの廃止

Node.jsのfs APIの同期的なバリアントは、ファイルシステムリクエストが解決されるまでスクリプトの実行を停止させることを理解しているため、通常は避けています。しかし、いくつかのケースでは、特に起動時のウィンドウのオープンや復元に関して、依然として同期的なfs実行に依存していました。これらの呼び出しをすべて非同期的なバリアントに変更することができ、ファイルシステムリクエストの応答を待つ間も他のスクリプトの実行を継続できるようになりました。

メインエントリポイントのバンドルをさらに強化

VS Codeアプリケーションを構成するメインバンドルは数メガバイトのサイズで、vscode-loaderを使用して単一ファイルとしてバンドルされ、esbuildを使用してminifyされています。しかし、いくつかのケースでは、特に以下のものについてはバンドルに注力していませんでした。

  • 常に最初に呼び出されるElectronメインプロセス内のNode.jsエントリポイント。
  • ウィンドウを開くためのElectronレンダラープロセス内のブートストラップJavaScriptファイル。

これらの2つの領域でのバンドルにより、起動時にJavaScriptファイルを検索するコストを、Electronメインプロセスに対して1回、ウィンドウ自体に対して1回の呼び出しに削減できます。

コードの実行を後のフェーズに移行

最も効果的なパフォーマンス修正は、コードを削除して実行しないことですが、これは明らかにスケーラブルなソリューションではありません。代替案としては、テキストエディターが開いた後など、コードの実行を後のフェーズに遅らせることです。今回のマイルストーンでは、再度さまざまなコンポーネントを見直し、クリティカルな起動パスをブロックしないように、その一部を後のフェーズに移行しました。

内部ツールのドキュメント化

パフォーマンスを分析するために、ブラウザのDev ToolsやOSの検査ツールを多用しています。しかし、VS Codeに組み込まれているツールもいくつかあります。より多くの人々がこれらのツールから恩恵を受けられるように、カスタムツールをPerf Tools for VS Code Developmentでドキュメント化しました。

PRチェックの高速化

プルリクエストに対して、自動ユニットテスト、統合テスト、およびスモークテストを実行しています。これらはすべて並行して実行されますが、各ステップではTypeScriptソースをJavaScriptコードにトランスパイルする必要があります。当初は、これにTypeScriptコンパイラーを使用していました。TypeScriptコンパイラーはJavaScriptを出力しますが、型チェックも行います。後者の型チェックは時間がかかり、テストには実際には必要ありません。テストが遅延していた全体的な時間は約5分でした。その後、TypeScriptコンパイラーAPIを使用するカスタムのトランスパイル専用ソリューションに切り替えました。これにより大幅に高速化されましたが、それでも約2分かかっていました。

今回のマイルストーンでは、さらに高速なSWC (Speedy Web Compiler)に切り替えました。現在では、すべてのTypeScriptソースをトランスパイルするのに約12秒しかかかりません。これは大幅な改善であり、プルリクエストに対するフィードバックをより迅速に得られるようになりました。

注目すべき修正

  • 27799 macOS: OS サービスがエディターから選択されたテキストを取得できない
  • 60821 「最近使った項目」と「始めましょう」ページの最近使ったリスト間の同期を改善しました。
  • 156777 プロセスエクスプローラーを開いたままにすると、5MB/分でメモリリークが発生する
  • 159862 macOS Catalinaで、フルスクリーンモードの場合、交通信号ボタンの表示がずれる
  • 161305 「ウィンドウ: タイトルバーのスタイル」リンクが、他のウィンドウ設定を表示しているときに機能しない

ありがとうございました

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

Issue tracking (問題追跡)

Issue trackingへの貢献

Pull requests (プルリクエスト)

`vscode` への貢献

`vscode-css-languageservice` への貢献

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

`debug-adapter-protocol` への貢献