先日のMSのオンラインイベントConnect();で、とうとうβリリースの発表がありました。
今回も、新機能や各種変更点をまとめておきます。
Connect(); // 2015 | Channel 9
拡張機能への対応
今回の目玉は何といってもコレ!!
とうとう拡張機能により、VSCodeへの機能追加ができるようになりました!!
拡張機能はそろそろ来る頃かなぁ、、と予想はしてたのですが、大きなサプライズがありました。
なんとVSCode用の拡張機能のマーケットプレイスまでできました♪
↓からいろいろな拡張機能を探すことができます。
https://marketplace.visualstudio.com/#VSCode
VSCodeのコマンドパレットから、拡張機能の検索/インストール済みの一覧表示など、一通りの操作ができるようになっています。
拡張機能の検索
まずは、拡張機能の検索とインストールをしてみます。
Ctrl+Shift+Pを押してコマンドパレットを開き、「Extensions」と入力すると、拡張機能関連の項目が表示されます。
ここで「Extensions: Install Extension」を選ぶと、マーケットプレイスのギャラリーから、インストールできる拡張機能の一覧が表示されます。
打つのがめんどいときは、「ext install」でもOK。
こんな風にインストールできる拡張機能が一覧表示されます。
この状態から、続けてキーワードなどを入力すると絞り込み検索ができます。
このリストから拡張機能を選んでインストールできます。
インストールした拡張機能は、以下のディレクトリに保存されます。
お試しで、↓の拡張機能をインストールしてみたけどこれはイイ感じ!!
https://marketplace.visualstudio.com/items/stevencl.addDocComments
関数定義の部分を選択して、「Add Doc Comments」というコマンドを実行すると、関数コメントをつけてくれます。
インストール済み拡張機能一覧の確認
インストール済みの拡張機能一覧を表示するには、コマンドパレットから「Extensions: Show Installed Extensions」というコマンドを実行します。
マーケットからインストールしたものも、自分で作成してextensionsフォルダに直接置いたものもどちらもリストアップされます。
また、インストール済みの拡張機能のアップデートやアンインストールもこのUIからできます。
拡張機能の作成
v0.9.1でテーマ作成やシンタックスハイライト定義の作成用にyoのジェネレータが用意されましたが、このジェネレータで拡張機能の雛型を作れるようになりました。
https://code.visualstudio.com/docs/extensions/overview
割としっかりとドキュメントが用意されてるんで、yoで雛型を生成してドキュメント読みながらいじればいろいろ作れそうです。
この辺はまた近いうちに少しずつドキュメントを読んでみようかと思います。
VSCodeのオープンソース化
今回のバージョンアップのもう一つの目玉!!
VSCodeがオープンソースになりました。
デバッガの改善
デバッガ実行中のコンテキストメニューの追加機能
値を確認したい変数を選択してコンテキストメニューを表示すると、「Debug: Evaluate」「Debug: Add to Watch」という項目が表示されるようになりました。
これらのメニューから、デバッグコンソールでの値の確認や、ウォッチウィンドウへの追加を素早く行えます。
Node.jsデバッグ時のコンソール
今までは、デバッグを開始すると別ウィンドウでコンソールが開かれて、そのコンソール内でNode.jsの実行がされてました。
V0.10.1からは、デフォルトではこんな風にVSCode内のDebugConsole領域で実行されるようになります。
別ウィンドウのコンソールで実行
launch.jsonにexternalConsole: trueというプロパティを追加しておくと、別ウィンドウのコンソールで実行するようになります。
デバッグコンソールの表示改善
こんな風にエラー発生時の出力の、エラー発生箇所のファイルにリンクが張られるようになってます。
エラーのある行に素早く移動できて便利になるかも。
ただしTypeScriptで書いてるときは、コンパイル後のJavaScriptの方に移動します。
ソースマップで対応付けて移動してくれると嬉しいんだけどなぁ。
その他細かい点
他にも以下のような変更点があります。
