VS Code 1.22 の新機能のリリースノートをしずしずと眺めてみる

Visual Studio Code の バージョン 1.22 がリリースされたので、リリースノートを眺めてみてどんな機能が追加されたのか見てみる。(過去分はこちら。1.21 / 1.20 / 1.19 / 1.18 / 1.17 / 1.16 / 1.15)

今回もてんこ盛りなのでちょっとずつ更新予定。

エディタ関連

構文を認識した折りたたみ

  • 今までVS Codeの折りたたみは言語に関わらずインデントによって判断されていたが、HTML、JSON、Markdown、CSS、LESS、SCSSについては、言語の構文に基づいて判断されるようになった。

folding.gif

  • これらの言語のうち、特定の言語について従来のインデント依存の折り畳みに戻したい場合は、言語ごとの設定において、"editor.foldingStrategy": "indentation"を指定する。
  • TypeScriptとJavaScriptの場合は、設定"typescript.experimental.syntaxFolding": trueにより有効にすることができる。
  • 拡張機能用の新しいAPIが提案されているので、他の言語についても構文認識折りたたみプロバイダを提供することができる。

よいですねぇ!他人の書いたコードでインデントがめちゃくちゃで、だけど下手にフォーマットもできないという状況ってあるし。
うん、どんどん便利になっていく。

ファイルを横断したエラー/参照のナビゲーション

  • F8(次の問題へ移動)を押してエラーや警告を移動する際、今まではファイル内だけの検索だったのが、開いているすべてのファイルが対象となった。
  • 同様に、すべての参照の検索コマンド(Shift+F12)においても、F4Shift+F4によるファイル横断してのナビゲーションが行えるようになり、キーボードから手を離さずにナビゲーションが行えるようになった。

all_reference.gif

おー!どんどんIDEっぽくなっていく!

エディタ内のヒント

  • 拡張機能APIでヒント診断の作成を行えるようになった。エラーや警告ではなく、特定のリファクタリングを実行するなど、何らかの改善方法を提案するために使う。
  • 単語の先頭の省略記号(...)によってヒント対象を表す。
  • ヒント診断がコードアクションを知らしめる手助けになるように、拡張機能の開発者は常にヒントをコードアクションとセットにすることを推奨するが、一部のユーザーはエディターにヒントを表示したくない場合があり、またそのためのサポートも機能に含まれている。

hint.gif

エラーと警告の関連情報

  • 拡張機能APIで診断に関連情報を追加できるようになった。これは診断が表示されているすべての場所(ホバー、インラインエラー表示、問題パネル)に表示される。

大きなファイルを簡単に開く

  • 以前は、エディタで大きなファイル(〜2GB)を開くと、コマンドラインから--max-memory=NEWSIZEというフラグを付けて再起動するように促された。
  • 今回のリリースでは、アプリケーションが現在使用できるメモリよりも多くのメモリを必要とするファイルを開こうとすると新しい通知が表示され、アプリケーションで使用可能なメモリですぐに再起動できるようになった。
  • 再起動後に使用可能な最大メモリは新しい設定files.maxMemoryForLargeFilesMBで変更可能で、デフォルトでは4096(4GB)となっている。

image.png

シンタックスハイライトの最適化

  • 今回のリリースでは、表示領域のシンタックスハイライトを、表示領域内のコンテンツのスコープに基づいて、ファイルを開いた直後に行うようになった。
  • これにより、定義に移動コマンドを使用して新しいファイルを開いたときのシンタックスハイライトの色分け処理が大幅に高速化された。

大きなファイルの検索・置換の改善

  • 今回、新たなテキストバッファを実装し、大きなファイルの検索と置換の最適化を行った。

保存時フォーマットのタイムアウト設定

  • VS Codeでは、ファイルをディスクに保存する直前にフォーマッタを実行することができるが、フォーマットに時間がかかると保存速度が遅くなる可能性がある。
  • そのため、750ms経過後には保存を行い、保存時フォーマットのリクエストをキャンセルするように厳格化した。
  • ただし、拡張機能によっては特に大きなファイルを扱う場合には時間が足りなくなるおそれがあるため、新しい設定"editor.formatOnSaveTimeout"を追加してタイムアウト時間を変更できるようにした。
  • 言語拡張機能がフォーマットに時間がかかることが分かっている場合、デフォルトの言語固有の設定としてタイムアウト時間を指定することができる。
  • また、保存状況を可視化できるように、ステータスバーに進行状況インジケータを表示するようにした。

スニペット変数の追加

  • 現在の月と曜日を参照するための新しいスニペット変数が追加された。
    • ${CURRENT_DAY_NAME} - 曜日名 ("火曜日")
    • ${CURRENT_DAY_NAME_SHORT} - 曜日短縮名 ("火")
    • ${CURRENT_MONTH_NAME} - 月名 ("4 月")
    • ${CURRENT_MONTH_NAME_SHORT} - 月短縮名 ("4 月")

月名に関しては、英語版だとJanuary/Janのような感じになるのが、日本語版だとちょっと残念な感じになっている。

Emmet

略語ラップのプレビュー

  • Emmet: ラップ変換またはEmmet: 個々の行でラップ変換コマンドのいずれかを使用すると、ラップされたテキストがどのように表示されるかのプレビューが表示されるようになった。

emmet.gif

これは面白い機能。分かりやすい!

略語展開の高速化

  • 大きなCSS/SCSS/LessファイルでのEmmetの略語の展開が高速になった。これは、現在の場所がEmmet略語の拡張に有効かどうかを判断しようとするときに、ファイル全体でなくカーソルの周りの小さな領域のみを解析することによって実現した。

スニペットマッチングの改善

  • スタイルシートのEmmet略語は、あらかじめ定義されたスニペットとあいまいにマッチして、最も近いマッチング結果を適用するようになった。
  • emmet.preferencesの設定css.fuzzySearchMinScoreを変更することにより、あいまいマッチングの精度を制御できる。css.fuzzySearchMinScoreは、スニペットが一致と見なす必要がある最小スコアを設定する。
  • スコアを上げると結果は少なくなるが、より正確なマッチングが行われる。デフォルト値は0.3で、0と1の間の任意の値を指定できる。

ワークベンチ関連

Windowsでの自動バックグラウンド更新

  • 今までInsiderビルドのみで展開してきたWindowsでの自動バックグラウンドアップデートが正式版でも使用可能になった。
  • 更新プロセスがバックグラウンドで実行され、最終更新の準備ができたら通知される。
  • この機能を元の動作に戻したい場合や、新しいアップデート手順が何らかの問題を抱えている場合に備え、この機能を無効にするには、設定update.enableWindowsBackgroundUpdatesを使用する。

Windowsでのスクロール遅れの回避策

  • Surfaceのような高精度タッチパッドを備えたデバイスでのスクロールが非常に遅く、スムーズに動かないという報告を受け、その回避策として、新しい設定window.smoothScrollingWorkaroundを設けた。
  • これは回避策であり、タスクバーからウィンドウを復元するたびにちらつきが発生する可能性がある。この設定はデフォルトでは有効になっていない。

すでにインスタンスが起動している状態でのVS Code起動時の挙動

  • 新しい設定window.openWithoutArgumentsInNewWindowが導入され、引数なしで2つ目のVS Codeインスタンスを起動した際、新たなウィンドウを開かずに最後のアクティブなインスタンスをフォーカスするか、新しい空のウィンドウを開くかを制御できるようになった。
  • WindowsおよびLinuxでは、プラットフォームの振る舞いとより一致させるため、この設定がデフォルトで有効になっている。
  • 有効にすると、デスクトップからVS Codeアイコンをダブルクリックするか、コマンドラインから引数なしでVS Codeを実行すると、新しい空のウィンドウが開く。
  • Windowsの場合は、タスクバーのアイコンを中ボタンクリックかシフトクリックしても同じ挙動になる。
  • この動作を無効にするには、設定window.openWithoutArgumentsInNewWindowOFFにする。

検索・置換時の自動保存

  • 検索ビューで検索後、複数のファイルに対してすべて置換を実行した際、今までは置換後のファイルはすべて未保存の状態となっていたのですべて保存すべて閉じるを行う必要があったが、置換時にすべて保存されるようになった。

検索時の包含/除外パターン

  • 検索ビューの包含パターンと除外パターンのボックスは今までは別々だったが、今回1つのボックスにまとめられた。除外パターンの場合は先頭に!を付けることで表現する。
v1.21 v1.22
検索ビューv21.png 検索ビューv22.png

ツリーの水平スクロールのサポート

  • 新しいグローバル設定workbench.tree.horizo​​ntalScrollingが追加され、ワークベンチ全体のいくつかのツリーウィジェットにて水平スクロールが可能となった。
  • デフォルトはfalseになっている。また、この設定を変更した場合、再起動が促されるので再起動を行う必要がある。

統合ターミナル関連

複数行リンクのサポート強化

  • 複数の行にまたがるパスとURLがリンクとして機能するようになった。

と書かれているが、Windows版のGit-Bashはまだ未対応!?

コマンド追跡

  • 以前に入力したコマンドや処理結果を確認しやすくするための「コマンド追跡」機能が追加された。
  • macOS上ではデフォルトで以下のキーバインディングが定義されている。
    • 前のコマンドにスクロール: Cmd+Up
    • 次のコマンドにスクロール: Cmd+Down
    • 前のコマンドを選択: Cmd+Shift+Up
    • 次のコマンドを選択: Cmd+Shift+Down
  • これにより、1行スクロールアップ/ダウンはCmd+Alt+PgUp/Cmd+Alt+PgDownに変更になった。
  • WindowsおよびLinuxの場合は、keybindings.jsonファイルに以下のコマンドを追加することにより利用できる。
{ "key": "ctrl+down",       "command": "workbench.action.terminal.scrollToNextCommand",
                               "when": "terminalFocus" },
{ "key": "ctrl+up",         "command": "workbench.action.terminal.scrollToPreviousCommand",
                               "when": "terminalFocus" },
{ "key": "ctrl+shift+down", "command": "workbench.action.terminal.selectToNextCommand",
                               "when": "terminalFocus" },
{ "key": "ctrl+shift+up",   "command": "workbench.action.terminal.selectToPreviousCommand",
                               "when": "terminalFocus" },

これはよいね!コマンドだけだったら履歴で確認できるけど、コマンド+実行結果を確認した場合はスクロールさせていって探さないといけないから。

より自然なスクロール

  • ピクセル、行、ページ単位でスクロールするかどうかを定義するOSのスクロール設定が考慮されるようになり、ターミナルアプリケーションのスクロールがより自然になった。

GitエディタとしてVS Codeを使用した後にターミナルを再フォーカスする

  • VS CodeをGitエディタとして使用し、統合ターミナルからGitを起動すると、メッセージが終了した後、フォーカスがターミナルに返される。

デバッグ関連

ログポイント

  • 今回のリリースからログポイントの機能が実装された。ログポイントは、デバッガが停止しない代わりにコンソールにメッセージを記録するブレークポイントの変種であり、停止できない本番サーバーのデバッグとしてログを注入する場合などに使用する。
  • ログポイントはダイアモンドの形のアイコンで表される。ログメッセージはプレーンテキストだが、中括弧('{}')で評価する式を含めることができる。
  • 通常のブレークポイントと同様に、ログポイントも有効または無効にすることができ、条件やヒット数で制御することもできる。
  • ログポイントは現在、VS Codeの組み込みNode.jsデバッガでのみサポートされている。

いいっすねー。早くJavaのデバッグでも対応されて欲しい。

launch.jsonのpostDebugTask

  • launch.jsonpostDebugTaskのサポートが追加された。このタスクはデバッグセッションが終了した後に実行される。preLaunchTaskと同様にtasks.json内のタスクを名前で参照できる。

Nodeデバッグ

Node.jsプロセスに自動的にアタッチ

  • 自動アタッチ機能がVS CodeのNode.jsデバッガに追加された。有効にすると、NodeデバッガはVS Codeの統合ターミナルからデバッグモードで起動されたNode.jsプロセスに自動的にアタッチされる。
  • この機能を有効にするには、自動アタッチの切り替えアクションを使用するか、Nodeデバッガが既にアクティブになっている場合は、自動アタッチステータスバーアイテムを使用する。
  • プロセスが「デバッグモード」にあるかどうかは、プログラムの引数によって決定される。現在は、--inspect--inspect-brk--inspect-port--debug--debug-brk--debug-portのパターンで検出している(オプションとして後ろに'='とポート番号)。
  • この機能は(まだ) 'tmux'(起動されたプロセスはVSコードの統合ターミナルの子ではない)のようなターミナルマルチプレクサでは機能しない。

プロセスピッカーの改善

  • Node.jsプロセス用のプロセスピッカーは、起動構成内から使用できる「対話型変数」としてのみ利用可能だったが、今回のリリースでは、ピッカーは起動設定なしで使用できるNodeのプロセスにアタッチアクションとして利用可能になった。
  • ピッカーと新しいアクションをより便利にするために、Node.jsプロセスにデバッグポート経由で接続することをサポートした。
  • Node.jsプロセスに加えて、ピッカーは、さまざまな形式の--debugまたは--inspect引数のいずれかで起動されたすべてのプログラムを表示するようになった。これにより、ElectronまたはVS Codeのヘルパープロセスにアタッチすることが可能になった。
  • ピッカーに表示されている個々のプロセス項目には、プロセスIDに加えてデバッグポートと検出されたプロトコルが表示される。

タスク関連

引数の引用の改善

  • タスクが改善され、bashやPowerShellなどのシェルで実行されたときに、コマンドや引数を引用する方法をユーザーがより制御できるようになった。
  • タイプがshellのタスクは、コマンドとその引数を別々に指定できるようになった。
  • shellタスクは複数の引数を分けて指定するので、例え引数の中にスペースが含まれていても1つの引数として認識されコマンドに渡される。このときに使用される引用符はシェルに基づき、cmd.exeの場合はダブルクォートが、PowerShellやLinux,macOSのシェルの場合はシングルクォートが使用される。
v1.21 v1.22
image.png image.png
  • 引用符を使わず、エスケープ文字によって制御したい場合は"quoting":"escape"を指定する。シェルのエスケープ文字は、PowerShellの場合はバッククォート、bashの場合はバックスラッシュが使われる。

image.png

  • 使用されるシェルが文字エスケープをサポートしていない場合は、強い引用符が使用される。
    • 強い引用符:シェルの強力な引用メカニズムを使用して、文字列内のすべての評価を抑制する。PowerShellとLinuxおよびmacOSのシェルでは、シングルクォートが使用され、cmd.exeの場合はダブルクォートが使用される。
    • 弱い引用符:環境変数などは評価されるシェルの弱い引用メカニズムを使用する。PowerShellとLinuxおよびmacOSのシェルでは、ダブルクォートが使用される。cmd.exeの場合は弱い引用符をサポートしていないため、VS Codeではダブルクォートが使用される。
  • コマンド自体にスペースが含まれる場合、VS Codeはデフォルトでは強い引用符を使用する。コマンドの引用も引数と同じ様に制御することができる。
  • なお、commandプロパティにコマンドライン全体を入れるという今までのスタイルは引き続きサポートされる。
  • また、同じサポートがタスクAPIに追加されているため、タスクプロバイダーは引用やエスケープを同様に制御することができる。

言語関連

見出しレベルでのMarkdownの折りたたみ

  • Markdownドキュメントを見出しで折りたたむことができるようになった。見出しを折りたたむと、その見出しの下にあるすべてのコンテンツと小見出しが折りたたまれる。

TypeScript 2.8

  • 今回のリリースにはTypeScript 2.8が同梱されている。

JSDocでのクイックサジェストの改善

  • VS CodeはJSDocタイプのインテリセンスを提供している。この機能はかなり以前に追加されたが、インテリセンスを手動で起動した場合のみ表示されるため、認知度が低かった。
  • 今回のリリースで、デフォルトでクイックサジェストが有効になったため、インテリセンスの入力を開始するだけで起動される。

JavaScriptとTypeScriptのコードアクションのサジェスト

  • JavaScriptとTypeScriptのコードアクションのサジェストの機能が向上した。
  • これらはlightbulbウィジェットを使用して表示されるが、クイックフィックスとは異なり、ソースコード内の特定のエラーや警告は処理されない。
  • コードアクションのサジェストは、エディタで...のように表示される。カーソルを...の上に移動し、電球アイコンをクリックするかCtrl+.を押すと利用可能なコードアクションが表示される。
  • コードアクションのサジェストはJavaScriptとTypeScriptではデフォルトで有効になっている。"typescript.suggestionActions.enabled": falseまたは "javascript.suggestionActions.enabled": falseを設定することで、これらを無効にすることができる。

CSSパス補完

  • HTMLに加えて、CSSのパス補完機能も利用できるようになった。

サービスアビリティ

  • VS Code内の拡張機能に関する問題をGitHubのIssueに登録できるようになった。
  • 問題のレポーター画面(ヘルプ->問題の報告 で表示される)に、VS Code自体か拡張機能かのどちらで問題を報告するか選択するためのドロップダウンが追加された。ここで拡張機能を選択した場合はさらにインストール済みの拡張機能をドロップダウンで選択できる。
  • その拡張機能がGitHubのリポジトリを持っている場合、類似問題のIssue検索が行われ、各Issueのプレビューリンクも表示される。

image.png

これはユーザー/開発者双方にとって良い機能!問題報告の敷居が少しでも低くなるのはよいこと。

注目すべき変更点

  • 13905 - Windowsにてすでに起動中のVS Codeのタスクバーをマウス中ボタンクリックした場合に新しいウィンドウが起動するように変更
  • 35675 - Linuxでフォント描画が乱れる現象の修正
  • 36307 - 循環シンボリックリンクのフォルダをVS Codeで開くとCPU使用率が高くなる現象の対応
  • 42401 - 出力パネルの切り替えプルダウンの選択肢にセパレータを導入
  • 42402 - チャンネル内のログを表示するオプションを追加
  • 43813 - アップデート後に拡張機能が正しく動作しない現象の解消
  • 44411 - デバッグ起動時の起動設定に解決できない変数が含まれていた場合の対応
  • 44554 - マルチルートフォルダをドラッグ・アンド・ドロップできるようにする
  • 45872 - ローカリゼーションパックのインストール後にユーザーにUIの言語を変更するように指示する
  • 45972 - エクスプローラーでの大量の不要なメソッド呼び出しの除去
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.