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

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

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

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

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

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

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

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

Workbench

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

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

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

マージエディター

3-wayマージエディターの使用を選択する

受け取ったマージエディターのフィードバック全体とエクスペリエンス全体を考慮した結果、競合が検出されたときにデフォルトで3-wayマージエディターを表示しないことになりました (git.mergeEditor設定はfalseになりました)。この決定の理由は、issue #160806で確認できます。

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

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

CodeLens UI

ユーザーからのフィードバックによると、チェックボックスにはいくつかのUX上の問題がありました。チェックボックスはあまり発見しにくく、すべての可能な状態を適切に表現しないことで混乱を招いていました。今回のイテレーションでは、テキストラベル (Incomingを承認、Currentを承認、両方を承認) を使用する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

エディター

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

以前は、選択してドラッグする際に、エディターはディスプレイの1秒あたりのフレーム数 (FPS) に依存する方法でスクロールしていました。そのため、マウスがエディターの端に到達するとすぐにエディターが素早くスクロールすることがありました。現在、エディターは、マウスが端に近い場合は1秒あたり約1ビューポートというより管理しやすい速度で自動スクロールし、マウスがエディターから遠い場合はFPSに関係なくより速くスクロールします。

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

ホバーの改善

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

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

新しいCode Actionグループ

Code Actionコントロールで、InlineとMoveという2つの新しいグループが利用可能になりました。

これらのグループは、refactor.inlineおよびrefactor.moveのCode Actionの種類に対応しています。

新しいCode Actionの色

今回のイテレーションでは、Code Actionコントロールの見た目も少し変わっていることに気づくかもしれません。より適切なテーマの色を使用するようにスタイリングが更新されました。最大の変更点は、コントロールの本体が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ウェブサイトの独自の目次内に移動しました。

現在、以下の特定のトピックがあります。

  • ターミナルの基本 - 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ファイル用の新しいリンク定義の整理Code Action (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アットルールを認識するようになりました。

ノートブック

ノートブックのJavaScript出力がモジュールとして評価される

ノートブック内のJavaScript出力がモジュールとして扱われるようになりました。これは、出力内で宣言された変数が他の出力に漏洩しなくなり（そしてconst変数の場合、競合する変数名を持つ他の出力の実行を妨げる可能性もありません）。

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

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

console.log(myFunction());

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

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

HTML headers in notebook Markdown cells

Web 用 VS Code

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

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

はじめに

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

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

この拡張機能は、元VS CodeチームメンバーであるPine Wu氏によって作成されたGoto GitHub Repo Chrome拡張機能に多大なる感謝の意を表し、インスパイアされています。

開発環境を切り替える際に変更を保持する

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

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

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

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

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

Web版VS Codeを使用している場合、作業を続行を使用すると、コミットされていない変更は以下に移動します。

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

デスクトップ版VS Codeをリモートリポジトリ拡張機能とともに使用している場合、作業を続行を使用すると、コミットされていない変更は以下に移動します。

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

問題の報告

問題の文字数制限を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の問題に移動し、貼り付けを求められ、拡張機能リポジトリに多くの不要な低品質な問題が作成されていました。拡張機能の問題を報告ボタンは、組み込みの問題報告機能を経由するようになり、ユーザーは品質の高い拡張機能の問題を送信できるようになりました。

拡張機能への貢献

リモート開発

Remote Development拡張機能を使用すると、開発コンテナー、リモートマシン、または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リリースノートで詳細を確認できます。

開発コンテナーの機能

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

GitHubプルリクエストと課題

プルリクエストと課題の作成、管理、作業を可能にするGitHubプルリクエストと課題拡張機能は、さらに進歩しました。このリリースのハイライトは次のとおりです。

  • GitHub Enterprise Serverのサポートが改善されました。これには以下が含まれます。
    • VS Codeに組み込まれたGitHub Enterprise Server認証プロバイダーによるPAT不要の認証。
    • エンタープライズリポジトリを含むフォルダーを開いた際の自動検出と、セットアップのためのオンボーディング。
    • GitHub Enterprise Serverのバグ修正。
  • ファイルを閲覧済みとしてマークするためのチェックボックス。

拡張機能の0.52.0リリースに関する変更履歴で、その他のハイライトを確認してください。

GitHub Issue Notebooks

ワークスペースの編集

GitHub Issue Notebooks拡張機能は、ノートブックAPIを披露するだけでなく、非常に便利であることが判明しました。この精神に基づき、ワークスペース編集APIの最新の改善を取り入れました。新しいCode Actionsは以下のような機能を提供します。

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

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

ローカライズ

この拡張機能は、VS Codeがサポートする13言語すべてで完全にローカライズされました。また、新しいローカライズ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

対話型ウィンドウのセルでノートブックの削除セルコマンドが有効になり、元に戻せるようになりました。

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に統合する拡張機能を構築するために必要な基本的なビルディングブロックを提供します。

プレビュー機能

設定プロファイル

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

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

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

Settings Profiles indicator

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

Settings Profiles menu

設定プロファイルの同期

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

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

WebでのWebAssemblyと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として利用できます。唯一の制約は、実行したい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"
}

リモートの場所で拡張機能をデバッグする場合（リモート開発拡張機能のDev Containers、SSH、またはWSL経由）、--profile-tempフラグを使用すると、次のステータスメッセージが表示されることに注意してください。

Disconnected Status bar message

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

ワークスペース編集APIの改善

WorkspaceEditによるノートブックの編集

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 Actionsとリファクタリングが可能になると考えています。

WorkspaceEditでコンテンツ付きファイルを作成する

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

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

await vscode.workspace.applyEdit(edit);

Webviewコンテキストメニューの貢献

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

webビューに新しいコンテキストメニュー項目を追加するには、まずmenusの新しいwebview/contextセクションに新しいエントリを追加します。各貢献はcommand（項目のタイトルもここから取得されます）とwhen句を受け取ります。when句には、コンテキストメニューが拡張機能のwebビューにのみ適用されるように、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"
    },
    ...
  ]
}

webビュー内では、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が通常webビューのコンテキストメニューに追加するコピー＆ペーストエントリを非表示にする特殊なコンテキストです。

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

Custom context menus showing in a webview

webビューのアクティブテーマ用の新しいテーマ変数

webビューの新しいdata-vscode-theme-idデータ属性は、現在アクティブなテーマのIDを保存します。これは、現在非推奨のdata-vscode-theme-name属性（テーマのフルネームを追跡していたもの、およびローカライズされていた可能性のあるもの）を置き換えるものです。

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

webビューで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の種類

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

以前から拡張機能はrefactor.move種類のCode Actionを作成できましたが、この種類は公式にドキュメント化され、新しいCode Actionコントロールによってサポートされるようになりました。

選択されたツリー項目がview/titleアクションに渡される

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

ツリービュー initialSizeの貢献が完了

package.jsonでビューを貢献する拡張機能は、initialSizeプロパティを使用してビューの初期サイズを設定できます。initialSizeはCSSのflex-growと同様に機能します。

initialSizeが適用されるタイミングにはいくつかの制限があります。

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

ツリービューバッジが確定

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ノートブックレンダラー

組み込みのノートブックレンダラーが、実験的なAPIを公開するようになり、拡張機能がJavaScriptコンテンツのレンダリングをカスタマイズできるようになりました。この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.shellを補完するために、新しいイベントenv.onDidChangeShellが追加されました。

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

これにより、bundle.l10n.jsonファイルが./l10nフォルダーに配置されます。そこから、サポートしたい各ロケールに対して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チームは、Microsoftの翻訳者に渡すXLFファイルを生成します。翻訳者は翻訳済みの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自体だけでなく、拡張機能やwebビューも恩恵を受けます。

クロスオリジン分離は現在、機能フラグの背後にあり、有効にするとインターネットからリソースを読み込む拡張機能やwebビューに望ましくない影響を与える可能性があります。強力な機能に「クロスオリジン分離」が必要な理由で詳細を読むことができます。早期のフィードバックをお待ちしております。

試すには

  • VS Codeデスクトップを--enable-coiフラグを付けて実行します (例: 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を使用してミニファイされています。しかし、いくつかのケースでは、特に以下の点においてバンドル化に投資していませんでした。

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

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

コードを後のフェーズにプッシュする

最高のパフォーマンス修正はコードを削除して実行しないことですが、これは明らかにスケーラブルな解決策ではありません。代替案は、コードの実行を後のフェーズ、たとえばテキストエディターが開いた後に遅らせることです。今回のマイルストーンでは、様々なコンポーネントを再検討し、クリティカルな起動パスをブロックしないように、それらのいくつかを後のフェーズにプッシュしました。

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

パフォーマンス分析のために、私たちはブラウザの開発者ツールやOS検査ツールを多用しています。しかし、VS Codeに組み込まれたツールもいくつかあります。より多くの人がそれらから恩恵を受けられるように、カスタムツールをVS Code開発のためのパフォーマンスツールに文書化しました。

PRチェックの高速化

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

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

注目すべき修正点

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

ありがとうございます

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

問題追跡

問題追跡への貢献者

プルリクエスト

vscodeへの貢献者

vscode-css-languageserviceへの貢献者

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

debug-adapter-protocolへの貢献者