🚀 VS Code で !

2021年6月 (バージョン 1.58)

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

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

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

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

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

ライブ配信にご参加ください: 7月13日（火）午前8時（太平洋時間）、午後4時（ロンドン時間）に開催される VS Code チームのライブストリーム で、このリリースの新機能のデモをご覧になり、ライブで質問してください。

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

ワークベンチ

ワークスペースの信頼

ワークスペースの信頼機能は、1.57 リリース で導入された大きな変更であり、開発者がソースに慣れていない場合でも安全にコードを閲覧できることが重要であると考えています。このマイルストーンでは、お客様からのフィードバックを取り入れ、問題の修正と提案のフォローアップに重点を置いてきました。

ワークスペースの信頼をカスタマイズできるユーザー設定を見つけやすくするために、ワークスペースの信頼エディターのヘッダーに新しい 設定の構成 アクションが追加されました。このアクションを実行すると、設定エディターが起動し、@tag:workspaceTrust でフィルタリングされます。

Configure your settings action in the Workspace Trust editor

設定といえば、現在のウィンドウが制限付きモードであることを示すバナーの表示タイミングを設定する新しい設定が追加されました。security.workspace.trust.startupPrompt 設定と同様に、新しい security.workspace.trust.banner 設定を使用すると、ワークスペースの信頼機能に慣れて、制限付きモードで作業していることをリマインダーする必要がない場合に、バナーを無効にすることができます。デフォルトでは、このバナーはワークスペースごとに一度表示され、閉じられるまで ("untilDismissed") 表示されたままになります。制限付きモードのバナーを表示するその他のオプションは、"always" と "never" です。

ワークスペースの信頼の理論的根拠と開発の詳細については、最近公開された ワークスペースの信頼に関するブログ記事 をご覧ください。この記事では、制限付きモードが意図しない、そして潜在的に悪意のあるコードの実行からどのように保護するのか、そして迅速かつ安全に作業できるように開発マシンを設定するためのヒントについて説明しています。

設定エディター

今回のイテレーションでは、設定エディターに、固定数のブール値プロパティを持つ設定オブジェクトのサポートが追加され、プロパティがチェックボックスのリストとしてレンダリングされるようになりました。

Settings editor Boolean object renderer demo

今回のイテレーションでは、列挙型の配列に対する追加サポートも追加され、編集モードでプレーンなテキストボックスではなくドロップダウンが使用されるようになりました。

Settings editor enum array renderer demo

一時的なワークスペース

通常​​のワークスペースとは異なる動作をする、"一時的な" ワークスペースと呼ばれる新しい種類のワークスペースが追加されました。具体的には、

  • VS Code を再起動またはリロードしても、ワークスペースを再度開こうとしません。
  • 一時的として設定されたワークスペースは、最近開いたワークスペースのリストに表示されません。

ワークスペースの .code-workspace ファイルに transient プロパティを true に設定して追加することにより、一時的なワークスペースを指定します。

{
  "folders": [],
  "transient": true
}

設定同期

設定同期に、すべてのログと最終同期状態を含む トラブルシューティング ビューが追加されました。このビューにアクセスするには、設定同期: 同期されたデータを表示 コマンドを実行し、表示 サブメニューを開いて トラブルシューティング をオンにすることで有効にします。

Settings Sync Troubleshoot command in the Settings Sync view menu

テーマ: GitHub Light Theme

検索の最大結果数設定

テキスト検索結果の最大数を設定できる新しい設定 search.maxResults が追加されました。デフォルトは、以前の 10,000 から 20,000 に増加しました。非常に多数の検索結果を読み込むと、動作が遅くなる場合があります。

統合ターミナル

エディター領域にターミナルを配置

ターミナルをエディター領域で作成または移動できるようになり、永続的でパネルの状態に関係なく表示されたままになる多次元グリッドレイアウトが可能になりました。

エディター領域でターミナルを使用するには、いくつかのオプションがあります。

  • エディター領域にターミナルを作成 コマンドを使用して作成します。
  • タブリストからエディターにターミナルをドラッグアンドドロップします。
  • ターミナルにフォーカスを当てて ターミナルをエディター領域に移動 を実行します。
  • ターミナルタブのコンテキストメニューで エディター領域に移動 を選択します。

4 terminals in the editor area are laid out in a 2 by 2 grid

新しい terminal.integrated.defaultLocation 設定を editor に設定すると、新しく作成されたターミナルがデフォルトでエディター領域に配置されるようになります。

キャンバスレンダラーの明示的な設定

以前のイテレーションでは、WebGL ターミナルレンダラーがデフォルトで有効になり、terminal.integrated.rendererType 設定がよりシンプルな terminal.integrated.gpuAcceleration に置き換えられました。残念ながら、一部のマシンでは WebGL でエクスペリエンスが低下し、利用可能な唯一のオプションは GPU アクセラレーションを完全に無効にして、はるかに遅い DOM ベースのレンダラーに移行することでした。terminal.integrated.gpuAcceleration は、これらの環境で推奨される可能性がある canvas に明示的に設定できるようになりました。

リンクホバーの非表示

新しい terminal.integrated.showLinkHover 設定を使用すると、ターミナル内のリンクホバーを無効にできます。ターミナルリンクのホバーが邪魔になる場合に便利です。

エディター

エディターのスクロールバーのカスタマイズ

エディターのスクロールバーをカスタマイズするための新しい設定があります。

  • editor.scrollbar.horizontal および editor.scrollbar.vertical を使用して、スクロールバーの表示/非表示を制御します。
  • editor.scrollbar.horizontalScrollbarSize および editor.scrollbar.verticalScrollbarSize で太さを変更します。
  • editor.scrollbar.scrollByPage を使用して、クリックがページ単位でスクロールするか、クリック位置にジャンプするか (デフォルトの動作) を決定します。

以下は、エディターの垂直スクロールバーの幅が 30 ピクセルに設定されている例です。

Vertical editor scroll bar width set to 30 pixels

言語

Markdown プレビューでの数式レンダリング

VS Code の 組み込み Markdown プレビュー で、KaTeX を使用した数式をレンダリングできるようになりました。

Math rendering in the built-in Markdown preview

インライン数式は、一重のドル記号で囲みます。

Inline math: $x^2$

二重のドル記号で数式ブロックを作成できます。

Math block:

$$
\displaystyle
\left( \sum_{k=1}^n a_k b_k \right)^2
\leq
\left( \sum_{k=1}^n a_k^2 \right)
\left( \sum_{k=1}^n b_k^2 \right)
$$

"markdown.math.enabled": false を設定すると、この機能を無効にできます。

Markdown 数式構文の強調表示

VS Code は、Markdown ソースでの数式の強調表示もサポートするようになりました。

Syntax highlighting of a math equation in a Markdown file

これは、通常の Markdown ファイルと、Notebook 内の Markdown セルの両方で機能します。

TypeScript 4.3.5

TS 4.3.5 をバンドルするようになりました。このマイナーアップデートでは、JSX での自動インポートが機能しない など、いくつかの重要なバグが修正されています。

デバッグ

ファイルごとに選択した環境を記憶

launch.json ファイルなしでデバッグを開始すると、VS Code はアクティブなエディターを調べ、エディターの言語モードに基づいて使用するデバッグ拡張機能を決定します。ただし、一部の言語では、複数のデバッグ拡張機能が可能な場合があり、その場合は、VS Code はそれらのいずれかを選択するように求めます。デバッグをよりスムーズにするために、VS Code はファイルごとに選択されたデバッガーを記憶するようになり、次回デバッグを開始するときに、プロンプトなしでセッションが開始されます。

以下の短いビデオでは、ユーザーが単一の JavaScript ファイルをデバッグするために Node.js デバッグ環境を選択し、その選択がそのファイルに対して新しいデバッグセッションが開始されるときに記憶される様子を示しています。

Debug is started first time and the environment prompt is presented. The next time there is no prompt when the debug session starts

デバッグコンソールの候補が Enter キーで受け入れられなくなった

デバッグコンソールの候補は、Enter キーではなく、Shift + Enter キーと Tab キーでのみ受け入れられるようになりました。以前は、デバッグコンソール入力に既に入力されている内容を評価したいだけなのに、誤って候補を受け入れてしまうことがありました。

Tab キーが候補を受け入れる方法としてより見つけやすくなるように、VS Code にはデバッグコンソール入力にヒントステータスバー ("挿入 (Tab)") が表示されるようになりました。

Debug console input box showing a Status bar rendered in the bottom that says "Insert (Tab)"

拡張機能への貢献

Jupyter インタラクティブウィンドウ

Notebook エコシステムの上に組み込みのインタラクティブウィンドウエクスペリエンスを提供することに取り組み始めており、Jupyter 拡張機能は、設定 jupyter.enableNativeInteractiveWindow の背後でそれを採用しました。この機能が有効になっている場合、Jupyter 拡張機能は、Python ファイルからコードを実行する場合、またはコマンドパレットから直接起動する場合、WebView 実装の代わりに組み込みエディターを開きます。組み込みエディターは、ワークベンチと深く統合されているため、カスタマイズされたキーバインド/キーマップまたは言語拡張機能で動作します。

Jupyter built-in interactive window demo

Jupyter Notebook のデバッグ

Jupyter Notebook でのデバッグのサポートに取り組んできました。これにより、Notebook セルにブレークポイントを設定し、セルをステップ実行し、他のすべての VS Code デバッガー機能を使用できるようになります。これは実験的な機能ですが、"jupyter.experimental.debugging": true を設定し、選択したカーネルに ipykernel のバージョン 6 をインストールし、Notebook ツールバーの デバッグ ボタンをクリックすると、試すことができます。

Jupyter debugging

リモートリポジトリ

今回のイテレーションでは、Remote Repositories 拡張機能のバグ修正とパフォーマンスの改善、および GitHub Pull Requests and Issues 拡張機能との統合の改善に主に焦点を当てました。さらに、リモートエクスプローラー の リモートリポジトリ ビューからリモートリポジトリを削除できるようになり、行範囲を持つ \blob URL のオープンがより適切にサポートされるようになりました。

GitHub Pull Requests and Issues

GitHub Pull Requests and Issues 拡張機能の今回のイテレーションの焦点は、バグの修正でした。ハイライトについては、changelog をご覧ください。

リモート開発

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

1.58 の機能ハイライトには、以下が含まれます。

  • 転送されたポートに対してブラウザーを一度だけ開くオプション。
  • キャッシュされたイメージの devcontainer.json サポート。
  • Dev Containers が "hostRequirements" をチェックするようになりました。

新しい拡張機能とバグ修正については、Remote Development リリースノート をご覧ください。

Live Preview

Web 開発プレビュー用のローカルサーバーをホストする Live Preview 拡張機能を開発しました。🎉

エディター内ブラウザープレビュー、ライブプレビューの更新 (ファイル変更時または保存時)、マルチルートサポートなどを備えています。

Live Preview Quick Walkthrough

この拡張機能には、永続的なサーバーを実行し、サーバートラフィックとその関連ファイルを表示できる Live Preview タスクもあります。

Live Preview Tasks

できることの詳細については、Marketplace で詳細を確認するか、リポジトリをチェックしてください。

プレビュー機能

TypeScript 4.4 のサポート

このリリースには、今後の TypeScript 4.4 リリースの初期サポートが含まれています。TypeScript 4.4 の新機能と改善点については、TypeScript ブログ をご覧ください。

TypeScript 4.4 nightly ビルドの使用を開始するには、TypeScript Nightly 拡張機能 をインストールしてください。

フィードバックを共有し、TypeScript 4.4 でバグが発生した場合はお知らせください。

ウィンドウ間でターミナルを移動

ターミナル: セッションを分離 で分離し、ターミナル: セッションにアタッチ で別のアタッチすることにより、ウィンドウ間でターミナルを移動できるようになりました。将来的には、これによりウィンドウ間のドラッグアンドドロップが可能になるはずです!

拡張機能の作成

詳細な補完項目ラベル

より詳細で構造化された補完項目ラベルのための新しい API が追加されました。項目のラベルに vscode.CompletionItemLabel 型を使用できるようになり、ラベル、詳細、および説明を指定できます。

これらの新しいプロパティにより、言語拡張機能は署名または修飾子を表示できますが、他の補完プロバイダーもこれを活用できます。たとえば、GitHub Pull Request and Issues 拡張機能は、エイリアスと並んでフルネームを表示するようになりました。

Completion for Github aliases with full names

モーダルメッセージの詳細

モーダル情報、警告、およびエラーメッセージを表示するための API が、詳細の提供をサポートするようになりました。詳細テキストは、実際のメッセージよりも下に、目立たないようにレンダリングされます。

A modal dialog with details

上記のダイアログは、次のコードスニペットで生成されます。詳細テキストは、モーダルメッセージ (modal: true) でのみサポートされていることに注意してください。

vscode.window.showInformationMessage('This is the message', {
  modal: true,
  detail:
    'This is the detail. Rendered less prominent, but with more space for, well, details.'
});

ターミナルプロファイルを貢献

ターミナルプロファイルは拡張機能によって貢献できるようになり、プロファイルピッカーに表示されるようになります。

A contributed profile will show up along side detected and configured terminal profiles

ターミナルプロファイルを貢献するには、次の 3 つを行う必要があります。

まず、package.json にコントリビューションを追加します。

"contributes": {
  "terminal": {
    "profiles": [
      {
        "title": "Custom Profile",
        "id": "custom_profile"
      }
    ]
  },
}

次に、ユーザーがプロファイルを要求したときに拡張機能がアクティブ化されるように、アクティベーションイベントを追加します。

"activationEvents": [
  "onTerminalProfile:custom_profile"
]

最後に、ターミナルを作成するために使用されるオプションのセットを返すターミナルプロファイルプロバイダーを登録します。オプションは、標準のプロセスベースの TerminalOptions またはカスタムの ExtensionTerminalOptions のいずれかです。

vscode.window.registerTerminalProfileProvider('custom_profile', {
  provideTerminalProfile() {
    return {
      options: {
        name: 'Profile from extension',
        shellPath: 'cmd.exe'
      }
    };
  }
});

ExtensionTerminalOptions ベースのターミナル名の変更

新しい Pseudoterminal.onDidChangeName イベントを使用すると、ExtensionTerminalOptions で作成されたターミナルの名前を変更できます。

const writeEmitter = new vscode.EventEmitter<string>();
const nameEmitter = new vscode.EventEmitter<string>();
const pty = {
  onDidWrite: writeEmitter.event,
  onDidChangeName: nameEmitter.event,
  open: () => writeEmitter.fire('Press and key to set the terminal title'),
  close: () => {
    /* noop*/
  },
  handleInput: (data: string) => {
    writeEmitter.fire(`Set title to "${data}"`);
    nameEmitter.fire(data);
  }
};
const terminal = (<any>vscode.window).createTerminal({ name: `My Extension REPL`, pty });
terminal.show();

拡張機能 API を介して作成されたターミナルのアイコンを設定

window.createTerminal は iconPath を受け入れるようになり、タブ内のターミナルにアイコンを関連付けます。

const term = vscode.window.createTerminal({
  name: `Serve`,
  iconPath: new vscode.ThemeIcon('server-process')
});
term.show();

The iconPath will show up next to the terminal's name

保存された Memento キーの列挙

保存された Memento キーのセットを列挙する新しい Memento.keys() API があります。この API を使用すると、以前に保存されたデータを処理しやすくなり、保存されたデータを移行する必要がある場合に役立ちます。

Language Server Protocol

対応する npm モジュールとともに、言語サーバープロトコルの新しいバージョンが公開されました。このバージョンには、診断プルモデル仕様 の最終提案が含まれています。

Debug Adapter Protocol

"メモリ書き込み" リクエストと "メモリ変更" イベントの進捗状況

今後のバージョンの VS Code のデバッグエクスペリエンスにメモリビューアーを統合することを計画しています。このサポートのために、Debug Adapter Protocol には、ReadMemory リクエストがしばらくの間存在しています。現在、対応する WriteMemory リクエストと Memory イベントに取り組んでいます。WriteMemory リクエストには、次のマイルストーンで DAP に追加される 最終提案 があります。Memory イベントの提案は、まだ 議論中 です。あなたがデバッグ拡張機能の作成者であり、これらの DAP プロトコルの追加に関心がある場合は、フィードバックをお寄せいただければ幸いです。

提案された拡張機能 API

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

  • 提案された API は頻繁に変更されるため、Insiders ビルドを使用する必要があります。
  • 拡張機能の package.json ファイルに次の行を含める必要があります: "enableProposedApi": true。
  • vscode.proposed.d.ts ファイルの最新バージョンをプロジェクトのソースロケーションにコピーします。

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

リッチステータスバーホバー

ステータスバー項目でリッチホバーをサポートする新しい提案された API があります。試してみるには、StatusBarItem.tooltip2 に MarkdownString を指定します。

Rich Status bar hover

  • MarkdownString.supportThemeIcons が true の場合、$(iconName) 構文でアイコンを使用できます。
  • MarkdownString が信頼されている場合、コマンドリンクを追加することもできます。構文: ([test](command:vscode.newWindow))

テスト

テスト API を完成させるための取り組みが続いています。今回のイテレーションでは、拡張機能ホストの他の API のスタイルにより一致するように、テスト API の一部をリファクタリングしました。最終決定プロセスを追跡し、API の変更について聞くには、issue #122208 をフォローしてください。

私たちが予見している主な変更は、"実行構成" がどのように提供されるかです。これらのランナー API の進捗状況を追跡または検討するには、issue #127096 をフォローしてください。

最後に、テストカバレッジ の調査と初期実装を開始しました。これは、今後数週間で UI に表示される表面領域を受け取ります。

インライン候補

インライン候補 API を使用すると、拡張機能は候補ウィジェットから切り離されたインライン候補を提供できます。インライン候補は、既に受け入れられたかのようにレンダリングされますが、灰色で表示されます。ユーザーは候補を循環し、Tab キーでそれらを受け入れることができます。

vscode.languages.registerInlineCompletionItemProvider(
  { pattern: '**' },
  {
    provideInlineCompletionItems: async (document, position) => {
      return [{ text: '< 2) {\n\treturn 1;\n\t}' }];
    }
  }
);

Inline suggestions in the editor

エンジニアリング

ES2020

TypeScript プロジェクトを更新して、Promise.allSettled や String.replaceAll などの最新の JavaScript API を使用できるようにしました。また、よりモダンな JavaScript である ES2020 を出力することで、メインバンドルの全体的なサイズをわずかに削減しました。

Electron サンドボックスサポートの進捗状況

今回のマイルストーンでは、VS Code ウィンドウを Electron の サンドボックス および コンテキスト分離 機能を有効にする準備を継続しました。

具体的には

  • VS Code ウィンドウを一般的に開くために必要なリソースをロードするための Node.js 依存関係を削除しました。
  • 非推奨の webview コンポーネントに近い動作を取得するために、iframe 要素への検索を追加しました。これにより、将来的に webview を削除できます。この機能は、settings.json ファイルで "webview.experimental.useIframes": true を設定すると有効になります。

ドキュメント

データサイエンスのチュートリアルとトピック

データサイエンスのチュートリアルとトピックは、https://vscode.dokyumento.jp の目次の独自のセクションに移動しました。Jupyter Notebook、Python インタラクティブウィンドウ、さらにはタイタニック号の乗客データを分析する データサイエンスのチュートリアル の使用に関するチュートリアルを見つけることができます。

Data Science table of contents on code.visualstudio.com

注目すべき修正

  • 120956: iPad: エディター外でコンテキストメニューをトリガーできない
  • 122448: 依存関係が無効になっている場合、拡張機能を自動的に無効にする
  • 124169: アクティブなデバッグ行をインデントしないようにする
  • 125144: スレッドが停止しなくなった場合、フォーカスが別のスレッドに自動的に渡されない
  • 125528: ブレークポイントビューで、停止しなくなったブレークポイントを選択解除する
  • 126211: デバッガーを介して開始された Node プロセスが VS Code の終了時に強制終了されない
  • 126702: macOS: コマンドライン code . が動作しない
  • 127716: デバッグホバー: キーボードでプロパティを検索できるようにする

ありがとうございました

最後に、今月 VS Code に貢献してくださった以下の皆様に、心から感謝申し上げます。

Issue トラッキングへの貢献

vscode への貢献

vscode-extension-samples への貢献

vscode-html-languageservice への貢献

vscode-js-debug への貢献

vscode-languageserver-node への貢献

language-server-protocol への貢献

monaco-editor への貢献

monaco-languages への貢献

monaco-typescriptへの貢献