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

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ウェイマージエディターの使用を選択する

受け取ったすべてのマージエディターのフィードバックを確認し、エクスペリエンス全体について検討した結果、競合が検出されたときに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のマージアルゴリズムとVS Codeのマージアルゴリズムが完全に一致しなかったため、すべての場合に機能するわけではありませんでした。

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

ベースビュー

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

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

ツリービューの検索コントロールを垂直方向に移動できるようになり、その背後にある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

Editor

オートスクロール動作の改善

以前は、選択してドラッグすると、エディターはディスプレイの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は、Extensionsビューの更新セクションの最近更新されたセクションに、過去7日間に更新された拡張機能を表示するようになりました。

Recently Updated section in the Extensions view

注意が必要な拡張機能

VS Codeは、Extensionsビューのデフォルトのインストール済みセクションのトップに、注意が必要な拡張機能をソートして表示するようになりました。これには、保留中の更新がある拡張機能や、更新または無効化され、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

空きポート

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

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

シェル統合の改善

シェル統合に以下の改善が加えられました

  • 最近のコマンドを実行および最近のディレクトリに移動は、内容がある場合 (または確実に判断できない場合) は行をクリアするようになりました。
  • いくつかのビルドツールと競合する可能性があった、bashスクリプトの$PREFIX環境変数の使用を削除しました。
  • $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」

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

はじめに

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

以下のビデオでは、ユーザーが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 Codespaceなどのターゲット開発環境に自動的に移行されます。

以下のビデオでは、ユーザーがWeb版VS Codeを使用中に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に名称変更しました。マーケットプレイスの拡張機能識別子やドキュメントなどのリンクは変更されていないため、これらの2つの拡張機能の現在の使用に問題が生じることはありません。

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

名称変更とともに、これらの拡張機能の機能と修正に関する作業も継続されました。Remote Developmentリリースノートで詳細を確認できます。

Dev Container Features

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

GitHub Pull Requests and Issues

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

  • 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 Actionsが追加されました。

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

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

ローカライズ

拡張機能は、VS Codeがサポートする13の言語に完全にローカライズされました。また、新しいローカライズAPIを使用してローカライズされた最初の拡張機能でもあり、デスクトップとウェブの両方でローカライズが機能します。

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) を手動で作成する必要がありました。これは、ユーザーがVS Codeを離れてPATを作成し、適切な権限で作成されていることを確認し、コピーしてVS Codeに貼り付ける必要がある面倒なプロセスでした。

もうその必要はありません。GitHub Enterprise Serverのログインフローはgithub.comのログインフローと同一になり、ユーザーはPATを作成することなくGitHub Enterprise Serverにログインできます。このエクスペリエンスを実際に試すには、マーケットプレイスからGitHub Pull Requests and Issues拡張機能を取得し、github-enterprise.uri設定をGitHub Enterprise Server URIに設定して、拡張機能を試してみてください。新しいエクスペリエンスを示すビデオは次のとおりです。

テーマ: パンダテーマ（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 #116740にコメントしてフィードバックをお寄せください。

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

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

Settings Profiles indicator

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

Settings Profiles menu

設定プロファイルの同期

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

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

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拡張機能。この拡張機能は、マーケットプレイスで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"
}

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

Disconnected Status bar message

これは想定される動作です。一時プロファイルには拡張機能が含まれていないため、リモート開発拡張機能も欠落しているためです。リモートシナリオの場合、空の名前付きプロファイルを作成し、それにリモート開発拡張機能を追加してから、--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拡張機能の以下のサンプル画像のような、新しいよりシームレスなコードアクションとリファクタリングが可能になると考えています。

WorkspaceEditによるコンテンツを含むファイルの作成

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

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

await vscode.workspace.applyEdit(edit);

寄稿されたウェブビューコンテキストメニュー

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

ウェブビューに新しいコンテキストメニュー項目を追加するには、まずmenusの新しいwebview/contextセクションに新しいエントリを追加します。各貢献はcommand (項目名もここから取得されます) とwhen句を受け取ります。when句には、コンテキストメニューが拡張機能のウェブビューにのみ適用されることを確認するために、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が通常ウェブビューのコンテキストメニューに追加するコピーと貼り付けのエントリを非表示にする特別なコンテキストです。

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

Custom context menus showing in a webview

ウェブビューのアクティブテーマの新しいテーマ変数

ウェブビューの新しいdata-vscode-theme-idデータ属性は、現在アクティブなテーマのIDを格納します。これは、テーマのフルネームを追跡していた (そしてローカライズされていた可能性のある) 現在非推奨のdata-vscode-theme-name属性を置き換えます。

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

ウェブビューで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メニューに貢献されたコマンドは、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ノートブックレンダラー

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

この実験的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

これにより、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チームは、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モジュールで認識されるため、文字列を抽出して単一のプロセスでローカライズできます。

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のクロスオリジン分離を有効にするための変更を行いました。これにより、SharedArrayBufferなどの新しい強力な機能が利用可能になります。VS Code自体だけでなく、拡張機能やウェブビューもこの恩恵を受けます。

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

これを試すには

  • 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回の呼び出しに削減できます。

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

最高のパフォーマンス修正はコードを削除して実行しないことですが、それは明らかにスケーラブルな解決策ではありません。もう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 開いている最近の項目と「はじめに」ページの最近のリスト間の同期を改善しました。
  • 156777 プロセスエクスプローラーを開いたままにすると5MB/分のメモリリークが発生する
  • 159862 macOS Catalinaでフルスクリーンモード時に信号機ボタンの表示がずれる
  • 161305 他のウィンドウ設定を表示しているときに「ウィンドウ: タイトルバースタイル」リンクが機能しない

ありがとうございます

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

問題追跡

問題追跡への貢献者

プルリクエスト

vscodeへの貢献者

vscode-css-languageserviceへの貢献者

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

debug-adapter-protocolへの貢献者

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