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

2022年5月 (バージョン 1.68)

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

ダウンロード: Windows: x64 Arm64 | Mac: ユニバーサル Intel シリコン | Linux: deb rpm tarball Arm snap

Visual Studio Code の 2022 年 5 月リリースへようこそ。このバージョンには、皆様に気に入っていただけるであろう多くのアップデートが含まれています。主なハイライトをいくつかご紹介します。

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

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

Workbench

表示言語の構成の改善

表示言語の構成コマンドが更新され、次のものが含まれるようになりました。

  • その言語での言語名。
  • マシンにインストールされていない言語を表示し、いずれかを選択すると自動的にインストールしてその言語を適用する利用可能な言語セクション。

Configure Display Language dropdown with installed and available Language Packs in their language

テーマ: Panda Theme

これにより、利用可能な言語パックの発見に役立つはずです。ご意見をお聞かせください！

問題パネルの表ビュー

このマイルストーンでは、問題パネルの表示モードをツリーと表の間で切り替える新しい機能が追加されました。ツリービューと比較して、表は各問題のソース（言語サービスまたは拡張機能）を表示するため、ユーザーはソースで問題をフィルタリングできます。

Problems panel table view

テーマ: GitHub Dark Dimmed Theme

問題パネルの右上にある表として表示/ツリーとして表示ボタンでビューUIを切り替えるか、問題: デフォルトビューモード設定 (problems.defaultViewMode) でデフォルトのビューモードを変更できます。

Problems panel View at Table button

非推奨の拡張機能

このマイルストーンでは、VS Code で非推奨の拡張機能のサポートが追加されました。拡張機能は、単に非推奨になるか、別の拡張機能の代わりに非推奨になるか、その機能が VS Code に組み込まれる場合に非推奨になります。VS Code は、以下に示すように、拡張機能ビューで拡張機能を非推奨として表示します。

メンテナンスされなくなった非推奨の拡張機能。

Deprecated extension with no maintenance

別の拡張機能の代わりに非推奨になった拡張機能。この場合、VS Code はユーザーがこの拡張機能をインストールすることを許可しません。

Deprecated extension with alternative

その機能が VS Code に組み込まれており、設定を構成することで有効にできる非推奨の拡張機能。

Deprecated extension with builtin to VS Code

VS Code は非推奨の拡張機能を自動的に移行またはアンインストールしません。推奨される拡張機能に切り替えるための移行ボタンが表示されます。

Migrate deprecated extension

テーマ: GitHub Dark Dimmed Theme

注: 非推奨の拡張機能のリストは VS Code によって管理されています。非推奨であるべきと思われる拡張機能がある場合は、このディスカッションでコメントしてご連絡ください。

拡張機能のスポンサーシップ

VS Code では、ユーザーがお気に入りの拡張機能をスポンサーできるようになりました。拡張機能がスポンサーされる可能性がある場合、VS Code は以下のように拡張機能ビューの詳細ページにスポンサーボタンを表示します。

Sponsor extension button on Extensions view Details page

テーマ: GitHub Dark Dimmed Theme

スポンサーボタンをクリックすると、拡張機能のスポンサーURLに移動し、そこでサポートを提供できます。ご自身の拡張機能でこの機能を有効にする方法については、拡張機能のスポンサーシップを参照してください。

.gitignore に基づいてエクスプローラーでファイルを非表示にする

ファイルエクスプローラーが、.gitignore ファイルによって除外されたファイルの解析と非表示をサポートするようになりました。これは、エクスプローラー: Git Ignore を除外する (explorer.excludeGitIgnore) 設定で有効にできます。この設定は、files.exclude と連携して、エクスプローラーから不要なファイルを非表示にします。

注: 現時点では、!package.json のような否定されたグロブは解析できません。

ホバー位置のロック

一部のカスタムホバーは、他の UI 要素 (スクロールバーなど) の存在により、マウスオーバーが困難または不可能でした。ホバーがアクティブなときに Alt キーを押し続けると、「ロック」され、より広い境界線が表示され、ホバー外でのマウス移動による非表示が防止されます。これは主に、ホバーをスクリーン拡大鏡とうまく連携させるためのアクセシビリティ機能ですが、ホバーからテキストをコピーするためにも役立ちます。この機能は、editor.hover.sticky 設定で特に指定されていない限り、エディターホバーは常にマウスオーバーできるため、エディター外でのみ適用されることに注意してください。

設定エディターの改善

設定エディターに、言語固有の設定のデフォルト値上書きインジケーターが表示されるようになりました。設定エディターの検索バーに言語フィルターを追加する（@lang:javascript と明示的に入力するか、検索バーの右側にあるフィルターボタンをクリックして言語オプションを選択する）ことで、言語固有の設定を表示できます。

デフォルト値上書きインジケーターが表示された場合、それは言語固有設定のデフォルト値が拡張機能によって上書きされたことを示します。このインジケーターは、どの拡張機能がデフォルト値を上書きしたかも示します。

テーマ: Light Pink

このイテレーションでは、設定エディターの検索バーに既に検索クエリがある場合に、設定エディター内の一部のリンクが正しくリダイレクトされない動作も修正されました。リンクも適切なスタイル設定になり、ホバー時にさらに明確になります。

<video src="/assets/updates/1_68/settings-editor-working-links.mp4" autoplay loop controls muted title="設定エディターで「font」という単語を検索し、目次でターミナルカテゴリを選択すると、設定 terminal.integrated.fontFamily が表示され、その説明には editor.fontFamily 設定へのリンクが含まれています。このリンクをクリックすると、設定に正しく移動するようになりました。">

テーマ: Light Pink

コメントウィジェットのプライマリボタン

コメントウィジェットは、最初の (最も右の) アクションにプライマリボタンの色を使用します。

Add Comment has the primary button color

ターミナル

一致する背景色を見つける

前回のリリースでは、ターミナル内の検索機能で、すべての一致に境界線を表示する機能が実装されましたが、これはセルの背景を動的に変更するサポートが可能になるまでの一時的な解決策でした。今では、一致をハイライト表示する際にテーマのデフォルトとして色付きの背景が使用され、全体的なエクスペリエンスはエディターと似たものになるはずです。

Find now uses the blue from the editor's find for the active match and the orange for highlights

terminal.findMatchBorder または terminal.findMatchHighlightBorder を採用したテーマ作者の方には、テーマに合致したりコントラストを改善したりできる場合は、terminal.findMatchBackground と terminal.findMatchHighlightBackground への移行をお勧めします。

コントラストと最小コントラスト比の改善

背景色検索機能の追加により、ターミナルが背景色と前景色を扱う際の柔軟性が大幅に向上しました。これにより、ターミナル内のコントラストが改善され、ターミナルの視覚がエディターに近づきました。さらに、テキストの前景色を動的に変更して視認性を向上させる最小コントラスト比機能も追加されました。

  • コントラストが満たされない場合、輝度が反対方向に移動するようになりました。たとえば、純粋な黒 (#_000000) を使用した明るいグレーの背景に暗いグレーのテキストでコントラストが満たされない場合、色は白方向にも移動し、希望のコントラスト比を最もよく満たす値が使用されます。

    Darker grey on lighter dark can now use a light foreground color if needed

  • GPU アクセラレーションが無効になっている場合、選択範囲がテキストの下に描画されるようになり、不透明な色がサポートされます。以前は、半透明で前景の色が薄くなっていました。この変更により、選択範囲の色はエディターと同じ色を使用するようになりました。

    Foreground color are retained in selections

  • Nerd Font のシンボルは、隣接するテキストと調和するように最小コントラスト比が適用されるようになりましたが、Powerline のシンボルと罫線文字は、前景文字のない反転したセルに隣接していることが多いため、最小コントラスト比は適用されません。

    Powerlines no longer have odd colors between the colored sections

  • テーマは、ハイコントラストテーマでデフォルトで使用される固定の選択範囲前景色を指定できるようになりました。

    The dark high contrast theme now uses black as its selection foreground

  • いくつかのバグが修正され、結果として得られる前景色がより正確になりました。

念のためですが、元の色を優先する場合は、"terminal.integrated.minimumContrastRatio": 1 を設定することで、最小コントラスト比を無効にできます。

タスク

デフォルトタスクのグロブパターン

デフォルトのビルドタスクとテストタスクは、アクティブなファイルがファイル名グロブパターンに一致する場合にのみ「デフォルト」となるようにスコープ設定できるようになりました。

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo txt",
            "type": "shell",
            "command": "echo TextFile",
            "group": {
                "kind": "build",
                "isDefault": "**.txt" // This is a glob pattern which will only match when the active file has a .txt extension.
            }
        },
        {
            "label": "echo js",
            "type": "shell",
            "command": "echo JavascriptFile",
            "group": {
                "kind": "build",
                "isDefault": "**.js" // This is a glob pattern which will only match when the active file has a .js extension.
            },
        }
    ]
}

ソース管理

Git 拡張機能には、新しいプルリクエストフローに合わせたいくつかの更新があります。

Git: ブランチ接頭辞

新しいブランチの作成プロセスをよりスムーズにするために、新しいブランチを作成する際に接頭辞として使用する文字列を指定する新しい設定 git.branchPrefix が追加されました。

Git: ブランチ名の生成

新しい設定 git.branchRandomName.enable を有効にすると、VS Code が新しいブランチを作成するたびにランダムなブランチ名を提案するようになります。ランダムな名前は辞書から生成され、git.branchRandomName.dictionary 設定で制御できます。サポートされている辞書は、adjectives (デフォルト)、animals (デフォルト)、colors、numbers です。

Git: ブランチ保護

新しい git.branchProtection 設定を使用して、特定のブランチを保護するように構成できます。VS Code は保護されたブランチへの直接コミットを回避し、代わりに新しいブランチを作成してコミットする機会を提供します。この動作は git.branchProtectionPrompt 設定で細かく調整できます。

GitHub: プルリクエストテンプレートのサポート

GitHub 拡張機能がプルリクエストテンプレートを理解するようになり、新しくフォークされたリポジトリから PR を作成する際に、それらをベースとして使用するようになりました。

ノートブック

セルの表示変更

ビューポート外のセルがいくつかのシナリオでどのように表示されるかを調整しました。

アウトラインビューでセルをクリックすると、そのセルがビューポート外にある場合、ノートブックはビューポートの上部1/5程度の位置にそのセルを表示するようにスクロールするようになりました。これは、テキストエディターでのアウトラインの動作と一致します。

カーソルがセルエディターにある場合、エディターの最初または最後の行を超えてカーソルを移動させ、次のセルエディターに移動できます。現在、カーソルをビューポート外のセルにあるエディターに移動すると、ノートブックはビューポートの中央にセルを表示するためにジャンプするのではなく、エディター内のその行を表示するのに十分なだけスクロールするようになりました。

検索と置換はカーソル/選択範囲からのクエリのシードをサポート

ノートブックエディターの検索コントロールが、エディターの選択範囲から検索文字列をシードするようになりました。この動作は、エディター設定 editor.find.seedSearchStringFromSelection によって制御されます。

デバッグ

launch.json なしの実行とデバッグ

launch.json 設定ファイルをセットアップせずに F5 を押すか、デバッグビューで実行とデバッグボタンを選択すると、VS Code は現在アクティブなファイルのプログラミング言語に基づいてデバッガーを選択します。ファイルが開いていない場合は、使用するデバッガーを尋ねられます。このエクスペリエンスは少し混乱を招く可能性があるため、いくつかの改善を行いました。

Select debugger prompt before (alphabetical) and after (activated debugger at the top)

デバッグを開始しようとする前に拡張機能が既にアクティブ化されていた場合、その拡張機能のデバッガーが一番上にソートされます。これは、たとえば、以前にその拡張機能からコマンドを実行したり、その拡張機能をアクティブ化する言語のファイルを開いたり、ワークスペースが一致する workspaceContains パターンによって拡張機能がアクティブ化された場合に役立ちます。このセッションでデバッガーを使用したことがある場合も、一番上にソートされます。

Chrome/Edge デバッガーは、ブラウザーでアプリを実行するFlutter 拡張機能などの他のデバッガーとの混乱を避けるために、Web アプリ (Chrome) とWeb アプリ (Edge) に名前が変更されました。

言語

TypeScript 4.7

VS Code には、TypeScript 4.7.3 がバンドルされるようになりました。この主要な TypeScript バージョンには、改善された制御フロー分析や Node.js での ECMAScript モジュールサポートを含む新しい言語機能が導入されています。また、新しいツール機能といくつかの重要なバグ修正も含まれています！

ソース定義へ移動

VS Code で最も長く、最も多くの票を集めている機能リクエストの 1 つは、VS Code が外部ライブラリの関数とシンボルの JavaScript 実装にナビゲートできるようにすることです。現在、定義へ移動は、ターゲットの関数またはシンボルの型を定義する型定義ファイル (.d.ts ファイル) にジャンプします。これは、これらのシンボルの型やドキュメントを調べたい場合に役立ちますが、コードの実際の実装は隠されます。現在の動作は、.d.ts からの TypeScript 型を理解できない多くの JavaScript ユーザーを混乱させることもあります。

定義へ移動をシンボルの JavaScript 実装にナビゲートするように変更するのは単純に聞こえるかもしれませんが、この機能リクエストがこれほど長くオープンであったのには理由があります。JavaScript (特に多くのライブラリで提供されているコンパイル済みの JavaScript) は、.d.ts よりもはるかに分析が困難です。node_modules 下のすべての JavaScript コードを分析しようとすると、処理が遅くなり、メモリ使用量も大幅に増加します。また、VS Code の IntelliSense エンジンが理解できない JavaScript パターンも多数あります。

そこで登場するのが、新しいソース定義へ移動コマンドです。エディターのコンテキストメニューまたはコマンドパレットからこのコマンドを実行すると、TypeScript はシンボルの JavaScript 実装を追跡してそれにナビゲートしようとします。これには数秒かかる場合があり、常に正しい結果が得られるとは限りませんが、多くの場合は役立つはずです。

この機能の改善に積極的に取り組んでいますので、ご自身のコードベースでお試しいただき、フィードバックをお寄せください。

オブジェクトメソッドスニペット

オブジェクトメソッドスニペットを使用すると、指定されたインターフェースを実装するメソッドをオブジェクトリテラルにすばやく追加できます。

オブジェクトリテラル内では、考えられる各メソッドに対して2つの提案が表示されます。1つはメソッド名のみを挿入し、もう1つはメソッドの完全なシグネチャを挿入します。"typescript.suggest.classMemberSnippets.enabled": false または "javascript.suggest.classMemberSnippets.enabled": false を設定することで、オブジェクトメソッドスニペットを完全に無効にすることもできます。

グループ対応のインポート整理

JavaScript と TypeScript のインポートの整理コマンドを使用すると、インポートのリストをすばやくクリーンアップできます。実行すると、未使用のインポートが削除され、インポートがアルファベット順にソートされます。

しかし、一部のコードベースでは、インポートの整理方法についてある程度の手動制御を好む場合があります。外部インポートと内部インポートをグループ化することは、その最も一般的な例の1つです。

// local code
import * as bbb from './bbb';
import * as ccc from './ccc';
import * as aaa from './aaa';

// built-ins
import * as path from 'path';
import * as child_process from 'child_process';
import * as fs from 'fs';

// some code...

以前のバージョンの VS Code では、ここでインポートの整理を実行すると、次の結果が得られました。

// local code
import * as child_process from 'child_process';
import * as fs from 'fs';
// built-ins
import * as path from 'path';
import * as aaa from './aaa';
import * as bbb from './bbb';
import * as ccc from './ccc';

// some code...

ええ！これは、すべてのインポートがアルファベット順にソートされ、VS Code がコメントと改行も維持しようとするために発生します。

しかし、TypeScript 4.7 では、インポートの整理がグループ対応になりました。上記のコードで実行すると、期待される結果に少し近づきます。

// local code
import * as aaa from './aaa';
import * as bbb from './bbb';
import * as ccc from './ccc';

// built-ins
import * as child_process from 'child_process';
import * as fs from 'fs';
import * as path from 'path';

// some code...

インポートがグループ内に残ったままソートされたことに注目してください。ずっと良くなりました！

暗黙的なプロジェクトで厳密なヌルチェックが有効に

厳密なヌルチェックは、JavaScript と TypeScript の両方で、暗黙的なプロジェクトでデフォルトで有効になりました。これにより、より正確な IntelliSense と、一般的なプログラミングミスをキャッチできる改善された型チェックが得られるはずです。

A strict null error. getElementById may return null if no element with the ID exists

この新しい動作は、jsconfig または tsconfig プロジェクトの一部ではないファイルにのみ適用されます。"js/ts.implicitProjectConfig.strictNullChecks": false を設定することで無効にできます。jsconfig または tsconfig の一部であるファイルについては、設定ファイルで厳密なヌルチェックを有効にする必要があります。

Markdown 参照リンクの定義へ移動

Markdown ファイルの参照リンクで定義へ移動を使用できるようになりました。これにより、現在のファイルの参照からリンク定義にジャンプします。

JSON スキーマのサポート拡張

組み込みの JSON 言語サービスが、JSON Schema Draft 2019-09 と JSON Schema Draft 2020-12 のサポートを改善しました。これらのスキーマが使用されている場合、警告は表示されなくなりました。

まだ完全にサポートされていない機能がいくつかあります。それらがスキーマで使用されている場合、警告が表示されます。サポートされていないプロパティは次のとおりです。

  • $id を持つサブスキーマ
  • $recursiveRef/Anchor (Draft 2019-09)
  • $dynamicRef/Anchor (Draft 2020-12)

Web 用 VS Code

コアのローカリゼーションサポート

Web 用 VS Code の初期ローカリゼーションサポートを導入しました。VS Code は世界中で使用されており、多くのユーザーにとって英語は第一言語ではありません (またはまったく馴染みのない言語です！)。長年にわたり、VS Code ユーザーは英語以外の言語で VS Code を使用するために、Marketplace から言語パックをインストールしてきました。Web 用 VS Code では、今日の Web の仕組みにより密接に合わせた別のアプローチを採用することにしました。

ブラウザーをコアサポートされている言語のいずれかに設定したユーザーの場合、vscode.dev はその言語で自動的に翻訳を適用します。サポートされている言語は、vscode-loc リポジトリに文書化されています。

たとえば、Microsoft Edge で表示言語を構成するには、設定 > 言語を使用します。

Microsoft Edge Settings Languages page

それが設定されると、vscode.dev (または insiders.vscode.dev) にアクセスすると、ドイツ語で表示されます。

vscode.dev in a browser displayed in German

テーマ: Panda Theme

今後数ヶ月で、拡張機能（VS Code に同梱されているものとそうでないものの両方）のローカリゼーションを有効にし、拡張機能の作者も非英語圏のユーザーをサポートできるようにします。乞うご期待ください！

リモートリポジトリ

リモートリポジトリ > 作業を続行... コマンドを使用して GitHub または Azure Repos リポジトリをローカルにクローンし、デスクトップ VS Code で開く際に、remoteHub.gitProtocol を構成して、常に http または ssh URL を使用してクローンできるようになりました。

開発コンテナ仕様

Microsoft と GitHub の開発コンテナチームは、新しい開発コンテナ仕様のアクティブな開発を継続しており、今回のイテレーションではいくつかのエキサイティングなハイライトがありました。

リファレンス実装

仕様のリファレンス実装としてオープンソースのコマンドラインインターフェイス（CLI）をリリースしました。CLI は devcontainer.json から開発コンテナをビルドして起動し、直接使用することも、製品体験に統合することもできます。

CLI は新しいdevcontainers/cli リポジトリで入手できます。開始方法についてはREADMEを、詳細についてはこのブログ記事をご覧ください。

CLIは活発に開発されており、個々のユーザーのサポート強化など、より多くのシナリオをより良くサポートするために進化を続けます。途中で皆様からのフィードバックをお待ちしておりますので、CLIに関するフィードバック専用のIssueを開設し、追加のIssueやPRもリポジトリで歓迎いたします。

CI での Dev Container

GitHub Action と Azure DevOps Task が、継続的インテグレーション (CI) ビルドでリポジトリの開発コンテナを実行するために利用できます。これにより、ローカル開発で使用しているのと同じセットアップを CI でコードをビルドおよびテストするためにも再利用できます。詳細については、devcontainers/ci README を参照してください。

GitHub Action の使用例

- name: Build and run dev container task
  uses: devcontainers/ci@v0.2
  with:
    imageName: ghcr.io/example/example-devcontainer
    runCmd: make ci-build

Azure DevOps Task の使用例

- task: DevcontainersCI@0
  inputs:
    imageName: 'yourregistry.azurecr.io/example-dev-container'
    runCmd: 'make ci-build'
    sourceBranchFilterForPush: refs/heads/main

仕様

仕様の活発な開発が継続されており、devcontainers/spec リポジトリに初期バージョンが公開されました。

CLI と同様に、さらなる更新と進捗にご期待ください。皆様からのフィードバックをお待ちしております。

関連情報

開発コンテナと仕様に関するすべては、https://containers.dev で読むことができます。

拡張機能への貢献

Python

起動時のインタープリター自動検出なし

Python 拡張機能は、以下のいずれかの状況でのみ自動検出をトリガーするようになりました。

  • Python: インタープリターを選択コマンドを使用して別のインタープリターを選択した場合。
  • 特定のスコープ (ワークスペースまたはグローバル) が初めて開かれた場合。
  • Python がインストールされていない場合。

起動時に検出が自動的にトリガーされなくなったため、即座に読み込みが行われ、言語サーバーなどの他の機能の起動が高速化されます。ただし、Jupyter 拡張機能がインストール/有効になっている場合、起動時に Jupyter によって検出が引き続きトリガーされます。

ローカリゼーションを有効にする

Python 拡張機能は、VS Code がサポートするすべての言語で翻訳をサポートするようになりました。vscode-nls を使用して、コマンド、通知、タイトルなどの翻訳を取得する方法を更新しました。これらの翻訳は、最新かつ正確であることを保証するためにローカリゼーションチームによって管理されています。

Jupyter

Web拡張機能

Jupyter 拡張機能の Web バージョンで、より多くのコア機能をサポートするための進捗がありました。

今月、以下の機能が Web 拡張機能に移植されました

  • https サポート
  • カーネル補完
  • ipywidgets
  • ノートブックデバッグ
  • 変数表示
  • エクスポート
  • インタラクティブウィンドウ

機能を試してみたい場合は、ローカルマシンからJupyterを起動してください。

jupyter notebook --no-browser --NotebookApp.allow_origin_pat=https://.*\.vscode-cdn\.net

その後、vscode.dev内からJupyter: 接続するJupyterサーバーを指定コマンドを使用してそれに接続します。

詳細（およびコメント）については、このディスカッション項目をご覧ください。

リモート開発

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

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

GitHub Pull Requests and Issues

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

  • プルリクエストの作成ビューでの自動マージチェックボックス

その他のハイライトについては、拡張機能の 0.44.0 リリースの変更ログをご覧ください。

リモートリポジトリ拡張機能

GitHub Repositories と Azure Repos の両方の拡張機能は、VS Code がサポートするすべての言語で翻訳をサポートしています。

プレビュー機能

Markdownリンクの検証

Markdown を操作していると、誤って無効なファイルリンクや画像参照を追加してしまうことがあります。ファイル名が _ (アンダースコア) の代わりに - (ハイフン) を使用していたことを忘れていたり、リンク先のファイルが別のディレクトリに移動していたりするかもしれません。多くの場合、これらの間違いは Markdown のプレビューを見るか、公開した後に初めて気づきます。VS Code の新しい実験的な Markdown リンク検証は、これらの間違いを検出するのに役立ちます。

リンク検証機能により、VS Code はヘッダー、画像、その他のローカルファイルへの Markdown リンクを分析します。無効なリンクは、警告またはエラーとして報告されます。

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

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

リンク検証はデフォルトでオフになっています。"markdown.experimental.validate.enabled": true を設定することで、リンク検証を試すことができます。

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

  • markdown.experimental.validate.fileLinks.enabled - ローカルファイルへのリンクの検証を有効/無効にします: [link](/path/to/file.md)

  • markdown.experimental.validate.headerLinks.enabled - 現在のファイル内のヘッダーへのリンクの検証を有効/無効にします: [link](#_some-header)

  • markdown.experimental.validate.referenceLinks.enabled - 参照リンクの検証を有効/無効にします: [link][ref]。

  • markdown.experimental.validate.ignoreLinks - 検証をスキップするリンクのリスト。これは、ディスクには存在しないが Markdown が公開されると存在するファイルにリンクする場合に便利です。

新機能についてのご意見をお聞かせください！

ファイルを貼り付けて Markdown リンクを挿入

Markdown で画像やファイルリンクを挿入するための貼り付け機能の実験的サポートを追加しました。

これには、markdown.experimental.editor.pasteLinks.enabled と "editor.experimental.pasteActions.enabled" の両方を有効にする必要があります。現在、VS Code のファイルエクスプローラーからファイルをコピーできます。画像ファイルを貼り付けると画像参照が挿入され、通常のテキストファイルを貼り付けるとそれらのファイルへのリンクが挿入されます。

ターミナルシェル統合

シェル統合 (terminal.integrated.shellIntegration.enabled 設定で有効) とコマンド装飾が、このイテレーションで磨き上げられ、改善されました。

いくつかのアップデートは次のとおりです。

  • 146377 bash-git-prompt やその他のプログラムが機能するようにシェルステータスを永続化する
  • 148635 zsh 用のカスタム ZDOTDIR の使用を許可する
  • 145801 低速なマシンで装飾が同期しなくなる問題を修正
  • 146873 bash の既存のデバッグトラップの処理を改善
  • 148839 これはどう機能しますか？ コマンドとタブホバーのアクティベーションステータスによるメッセージングの洗練
  • 151223 バッファクリア後、コマンドが正しく追跡されることを確認する

Windows のウィンドウコントロールオーバーレイ

Electron が提供する API を採用し、Windows でのウィンドウコントロールオーバーレイをサポートしました。この変更によるユーザーにとっての主な利点は、Windows 11 のスナップレイアウト機能へのアクセスです。いくつかの持続的な問題により、ウィンドウコントロールオーバーレイはデフォルトでオフになっていますが、実験的な設定 window.experimental.windowControlsOverlay.enabled でオンにできます。

Hover over the maximize/restore window control to see Windows 11 Snap layouts

コマンドセンター

ファイル、コマンドなどをQuick Pickでトリガーするよりシンプルな方法であるコマンドセンターを追加しています。

Command Center in the VS Code title bar

これは window.experimental.commandCenter 設定で有効にできます。ご意見をお聞かせください。

マージエディター

より良いマージ体験の実現に向けた取り組みを開始しました。まだ初期段階であり、フィードバックを受け付ける準備はできていませんが、git.experimental.mergeEditor を介して試すことができます。これを有効にすると、マージ競合のあるファイルは新しいマージエディターで開かれ、競合の解決がより簡単になります。

引き続き取り組んでまいります。Insiders をご利用いただき、進捗状況をご確認ください。この取り組みにご協力いただいているMingpan様、および Google の友人の皆様に心より感謝申し上げます。❤️

拡張機能作成

インライン補完の最終化

インライン補完 API を最終化しました。これにより、拡張機能は提案ウィジェットから独立したインライン補完を提供できます。インライン補完は、既に受け入れられたかのようにグレー色でレンダリングされます。ユーザーは提案を循環して Tab キーで受け入れることができます。インライン補完を使用する拡張機能の例は、GitHub Copilot です。詳細については、vscode.d.ts ファイルで API のエントリポイントがlanguages.registerInlineCompletionItemProvider であることを確認してください。

InputBox 検証メッセージの深刻度の最終決定

InputBox API (window.showInputBox および window.createInputBox 経由) を使用したユーザー入力の検証における深刻度の提供が最終決定されました。

たとえば、ユーザーの入力に基づいて情報メッセージを表示したい場合、検証メッセージは次を返すことができます。

{
  message: 'this is an info message';
  severity: InputBoxValidationSeverity.Info;
}

これは次のようになります。

Input box with 'this is an info message' severity message

ノートブックエディター API

新しいノートブックエディター API は、TextEditor と同様の新しい NotebookEditor 型を導入しますが、通常のテキストエディターではなくノートブック用です。

const editor = vscode.window.activeNotebookEditor;
if (editor) {
  // Access the underlying notebook document associated with the editor
  console.log(editor.notebook.uri);

  // Change the selection in the current notebook
  editor.selection = new vscode.NotebookRange(1, 3);
}

window.activeNotebookEditor を使用して現在のノートブックエディターを取得し、window.onDidChangeActiveNotebookEditor などのイベントを使用して、ユーザーが新しいノートブックエディターに切り替えたときに監視できます。

タイムラインビューに基づく拡張機能のアクティベーション

タイムラインビューが表示されたときに新しいアクティベーションイベントが追加されました。このイベント onView:timeline は任意の拡張機能で使用できますが、提案されている Timeline API を実装する拡張機能に最も役立ちます。

UX ガイドライン

拡張機能の作者向けのUX ガイドラインが更新され、より多くの VS Code ユーザーインターフェース要素を網羅するように拡張されました。

UX Guideline example image pointing to View Actions elements

改訂された概要ページでは、VS Code UI を順を追って説明し、インターフェイスと一般的な UI 要素を視覚的に紹介します。

関連するガイド、API リファレンス、および拡張機能のサンプルへのリンクが、各領域の専用ページに追加されました。さらに、すべてのガイドラインの例画像が、最新の UI バージョンを示すように更新されました。

これらの UI 要素を追加または貢献する拡張機能に関する推奨されるすべきこととすべきでないことについて、これで読むことができます。

拡張機能のスポンサーシップ

このマイルストーンでは、拡張機能がスポンサーシップをオプトインできるように、拡張機能の package.json に sponsor フィールドを導入しました。sponsor オブジェクトには、拡張機能作者のスポンサーシップリンク用の url フィールドがあります。例:

"sponsor": {
    "url": "https://github.com/sponsors/nvaccess"
}

拡張機能がこれをオプトインすると、VS Code は上記の拡張機能のスポンサーシップセクションに示されているように、拡張機能ビューの詳細ページにスポンサーボタンを表示します。

注: スポンサーシップを有効にして拡張機能を公開するには、最新の vsce コマンドラインツール (>=2.9.1) を使用してください。

提案されたAPI

すべてのマイルストーンには新しい提案された API が含まれており、拡張機能の作者はそれらを試すことができます。いつものように、皆様からのフィードバックを歓迎します。提案された API を試す手順は次のとおりです。

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

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

DataTransfer からファイルを読み込む

新しい dataTransferFiles API 提案により、拡張機能は vscode.DataTransfer オブジェクトからファイルを読み込むことができます。DataTransfer 型は、ツリーのドラッグアンドドロップ API、およびエディターへのドロップとコピーペースト API 提案で使用されます。

export class TestViewDragAndDrop implements vscode.TreeDataProvider<Node>, vscode.TreeDragAndDropController<Node> {

  ...

   public async handleDrop(target: Node | undefined, sources: vscode.DataTransfer, token: vscode.CancellationToken): Promise<void> {

     // Get a list of all files
     const files: vscode.DataTransferFile[] = [];
     sources.forEach((item) => {
       const file = item.asFile();
       if (file) {
         files.push(file);
       }
     });

    const decoder = new TextDecoder();

    // Print out the names and first 100 characters of the file
     for (const file of files) {
       const data = await file.data();
       const text = decoder.decode(data);
       const fileContentsPreview = text.slice(0, 100);
       console.log(file.name + ' — ' + fileContentsPreview + '\n');
     }

    ...
  }
}

ファイルデータ転送項目は、VS Code の外部から来た場合 (デスクトップからツリービューまたはエディターにドラッグアンドドロップした場合など) にのみ DataTransfer に追加されます。

コピーペースト API

新しい documentPaste API 提案により、拡張機能はテキストエディター内でのコピー＆ペーストにフックできます。これは、貼り付け時に挿入されるテキストを変更するために使用できます。拡張機能は、テキストのコピー時にメタデータを保存し、貼り付け時にこのメタデータを使用することもできます（たとえば、2つのコードファイル間で貼り付ける際にインポートも一緒に移動するなど）。

ドキュメント貼り付け拡張機能サンプルで、この API がどのように機能するかを示しています。

/**
 * Provider that maintains a count of the number of times it has copied text.
 */
class CopyCountPasteEditProvider implements vscode.DocumentPasteEditProvider {
  private readonly countMimeTypes = 'application/vnd.code.copydemo-copy-count';

  private count = 0;

  prepareDocumentPaste(
    _document: vscode.TextDocument,
    _range: vscode.Range,
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): void | Thenable<void> {
    dataTransfer.set(this.countMimeTypes, new vscode.DataTransferItem(this.count++));
  }

  async provideDocumentPasteEdits(
    _document: vscode.TextDocument,
    range: vscode.Range,
    dataTransfer: vscode.DataTransfer,
    token: vscode.CancellationToken
  ) {
    const countDataTransferItem = dataTransfer.get(this.countMimeTypes);
    if (!countDataTransferItem) {
      return undefined;
    }

    const textDataTransferItem = dataTransfer.get('text/plain') ?? dataTransfer.get('text');
    if (!textDataTransferItem) {
      return undefined;
    }

    const count = await countDataTransferItem.asString();
    const text = await textDataTransferItem.asString();

    // Build a snippet to insert
    const snippet = new vscode.SnippetString();
    snippet.appendText(`(copy #${count}) ${text}`);

    return new vscode.SnippetTextEdit(range, snippet);
  }
}

vscode.languages.registerDocumentPasteEditProvider(
  { language: 'markdown' },
  new CopyCountPasteEditProvider()
);

新しいノートブックワークスペース編集提案

新しい notebookWorkspaceEdit API 提案により、拡張機能はノートブックの内容を編集できるようになります。これは以前の notebookEditorEdit 提案を置き換えるものです。

この提案により、ノートブックにセルを挿入、置換、または変更するワークスペース編集を作成できます。

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

  edit.set(
    currentNotebook.uri,
    vscode.NotebookEdit.insertCells(/* index*/ 1, [
      // ... new notebook cell data
    ])
  );

  await vscode.workspace.applyEdit(edit);
}

エンジニアリング

プルリクエストの使用

vscode リポジトリの main ブランチへの直接プッシュをやめ、現在、VS Code へのすべての変更をプルリクエスト (PR) のみを使用してプッシュしています。各 PR は、別のチームメンバーから少なくとも1つの承認を得ることを必須としています。これを利用して、PR がマージされる前にいくつかの基本的なチェックが合格することも必須としました。これらは、TypeScript のコンパイル、フォーマットルール、単体テスト、統合テストなどのタスクであり、通常は10分以上かかりません。このフローに切り替えることで、プログラミングミスによる Insiders ビルドの破損回数が減少しました。

VS Code OSS ビルド

当社の本番ビルドと同じビルド定義を再利用する新しい公開Code OSS ビルドができました。このビルドは現在、各PRで30分以内に実行され、速度向上に投資を続ける予定です。

ドキュメント

更新されたバージョン管理ビデオ

Visual Studio で Git を使用する入門ビデオが新しくなり、VS Code に組み込まれた Git 統合機能の使用を開始するのに役立ちます。

その他の優れた動画は、VS Code YouTube チャンネルでもご覧いただけます。

code.visualstudio.com の vscode.dev

Web 用 VS Code を使いたいけど URL を忘れてしまった？ vscode.dev が VS Code のダウンロードページに目立つように表示されるようになりました。これにより、ブラウザーで VS Code をすばやく起動できます。

vscode.dev on the code.visualstudio.com download page

注目すべき修正点

  • 141157 デバッグモードでないときに F11 をクリックすると、フルスクリーンではなくデバッグがオンになる
  • 148864 TypeScript ファイルの未バインドブレークポイント
  • 149638 遅延変数評価ボタンが問題のあるギャップとノード間のずれを引き起こす

ありがとうございます

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

Web拡張機能

コードをWeb 拡張機能として実行する拡張機能を有効にする拡張機能作成者（以下のリストは2022年5月2日から6月6日までのものです）

問題追跡

問題追跡への貢献者

プルリクエスト

vscodeへの貢献者

vscode-extension-samplesへの貢献

vscode-generator-codeへの貢献者

vscode-html-languageserviceへの貢献

vscode-js-debugへの貢献者

vscode-languageserver-nodeへの貢献者

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

  • @jpspringall: Issue #3371 | GitHub Enterprise AuthProvider の場合の getAuthSessionOptions を更新 PR #3565

debug-adapter-protocolへの貢献者

language-server-protocolへの貢献者

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