SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

Visual Studio Code 1.7の新機能・変更点

VSCode

VSCode 1.7.1がリリースされました。
http://code.visualstudio.com/updates/v1_7

1.7ではpackage.jsonを見て、依存するライブラリの型定義ファイルを、npmの@typesスコープから自動でダウンロードする機能を導入していたそうです。
しかし、この機能がnpmに大量のトラフィックを送って大きな負荷をかけてしまうという問題があったようで、この機能を無効にして速攻で1.7.1としてリリースし直したようです。
この辺の詳細は、以下のブログで事細かな経緯が書かれていました。
http://code.visualstudio.com/blogs/2016/11/3/rollback

エディタ

縦方向に並べた表示

今まで、エディタは垂直にしか分割できませんでした。
今回のバージョンからは、水平方向に分割し、縦にエディタを並べられるようになりました。
f:id:minami_SC:20161106000311p:plain

Shift+Alt+1というショートカットか、Toggle Editor Group Vertical/Horizontal Layoutというコマンド、またはGUI上の以下のボタンから、表示の切り替えができます。
f:id:minami_SC:20161106000330p:plain

settings.jsonへ移動した設定項目

以下のような項目が、setting.jsonで設定できるようになりました。

  • workbench.sideBar.location
    • サイドバーをウィンドウの左右どちらに配置するか。
  • workbench.statusBar.visible
    • ステータスバーを表示するか否か

Quick Openから、連続して複数ファイルを開く

Ctrl+Pのショートカットで開かれる、QuickOpenの以下のUIですが、
f:id:minami_SC:20161106000341p:plain
ここで、カーソルの「→」キーを押すと、QuickOpenのUIを閉じずに、複数のファイルを連続して開くことができるようになりました。

ドキュメントのフォーマットについて

選択範囲のテキストだけをフォーマットできるようになりました。
そういえば、今まではファイル全体のフォーマットしかできませんでしたね。

f:id:minami_SC:20161106000351p:plain

それぞれ以下のショートカットで実行できます。

  • Shift+Alt+F
    • ファイル全体のフォーマット
  • Ctrl+K Ctrl+F
    • 選択範囲のフォーマット

拡張機能

拡張機能の無効化

こんな風に、インストール済みの拡張機能を無効にできるようになりました。
f:id:minami_SC:20161106000402p:plain

ワークスペース単位、アプリ全体のどちらかのレベルで有効/無効の切り替えができます。

Extension Packs

複数の拡張機能がセットになったExtension Packsというものができました。

f:id:minami_SC:20161106000411p:plain

カテゴリの追加

拡張機能のカテゴリに、Keymasp、Formattersというカテゴリが追加されました。
Keymaps Extensions - Visual Studio Marketplace
Formatters Extensions - Visual Studio Marketplace

デバッガ

launch.jsonの簡略化

F5キーを押したときなどに、自動で生成されるlaunch.jsonの内容がシンプルになりました。

デフォルトでは、以下のような内容のファイルが作られます。

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "プログラムの起動",
            "program": "${workspaceRoot}\\index.js",
            "cwd": "${workspaceRoot}"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "プロセスに添付",
            "port": 5858
        }
    ]
}

また、頻繁に書き換えたりしないような項目は、以下のようにグレー表示されるようになりました。
f:id:minami_SC:20161106000456p:plain
重要な箇所に目が行きやすくなってイイですね!!

ブレークポイントのヒットカウント対応

条件付きブレークポイントで、ヒットカウントの条件指定ができるようになったとのこと。

以下のような、ヒットカウント設定用のUIが追加されました。
f:id:minami_SC:20161106000504p:plain

しかし、この機能、自分の環境ではうまく動きませんでした。。。
ヒットカウントの条件で指定した回数だけ実行しても、ブレークしません。

コンボボックスをヒットカウントにしたときに、条件入力エリアの説明文などが切り替わっていないので、おそらく「式」と「ヒットカウント」の条件の切り替えが正しくできていないっぽい・・・

マルチターゲット デバッグ

これはメッチャ助かる!!

launch.jsonで定義しているデバッグ設定を、複数同時にデバッガで開始できるようになりました。

Node.jsで作ったサーバー側のコードと、ブラウザ側のスクリプトを同時にデバッグするなどの用途で活用できそうです。

こんな風に、"type": "composite"というタイプのデバッガの設定を追加し、configurationNamesに同時にデバッグしたい項目のnameの値を列挙します。

launch.json

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "プログラムの起動",
            "program": "${workspaceRoot}/bin/www",
            "cwd": "${workspaceRoot}",
            "sourceMaps": true
        },
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000/",
            "webRoot": "${workspaceRoot}/public",
            "sourceMaps": true
        },
        {
            "type": "composite",
            "request": "launch",
            "name": "Launch Both",
            "cwd": "${workspaceRoot}",
            "configurationNames": [
                "プログラムの起動",
                "Launch localhost with sourcemaps"
            ]
        }
    ]
}

この例では、Node.jsで作ったサーバー側と、Debugger for Chrome拡張機能を用いてChromeで開いたブラウザ側スクリプトを、VSCodeから同時にデバッグできるようにしています。

その他