読者です 読者をやめる 読者になる 読者になる

SourceChord

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

VSCode 0.10.1の新機能・変更点

先日のMSのオンラインイベントConnect();で、とうとうβリリースの発表がありました。
今回も、新機能や各種変更点をまとめておきます。

Connect(); // 2015 | Channel 9

f:id:minami_SC:20151121212619p:plain:w300

拡張機能への対応

今回の目玉は何といってもコレ!!
とうとう拡張機能により、VSCodeへの機能追加ができるようになりました!!

拡張機能はそろそろ来る頃かなぁ、、と予想はしてたのですが、大きなサプライズがありました。
なんとVSCode用の拡張機能マーケットプレイスまでできました♪

↓からいろいろな拡張機能を探すことができます。
https://marketplace.visualstudio.com/#VSCode

VSCodeのコマンドパレットから、拡張機能の検索/インストール済みの一覧表示など、一通りの操作ができるようになっています。

拡張機能の検索

まずは、拡張機能の検索とインストールをしてみます。

Ctrl+Shift+Pを押してコマンドパレットを開き、「Extensions」と入力すると、拡張機能関連の項目が表示されます。
f:id:minami_SC:20151121212715p:plain

ここで「Extensions: Install Extension」を選ぶと、マーケットプレイスのギャラリーから、インストールできる拡張機能の一覧が表示されます。
打つのがめんどいときは、「ext install」でもOK。

f:id:minami_SC:20151121212723p:plain

こんな風にインストールできる拡張機能が一覧表示されます。
この状態から、続けてキーワードなどを入力すると絞り込み検索ができます。

このリストから拡張機能を選んでインストールできます。
インストールした拡張機能は、以下のディレクトリに保存されます。

  • Windows環境
    • %USERPROFILE%.vscode\extensions
  • Mac/Linux環境
    • $HOME/.vscode/extensions

お試しで、↓の拡張機能をインストールしてみたけどこれはイイ感じ!!
https://marketplace.visualstudio.com/items/stevencl.addDocComments
関数定義の部分を選択して、「Add Doc Comments」というコマンドを実行すると、関数コメントをつけてくれます。

インストール済み拡張機能一覧の確認

インストール済みの拡張機能一覧を表示するには、コマンドパレットから「Extensions: Show Installed Extensions」というコマンドを実行します。
f:id:minami_SC:20151121212826p:plain

マーケットからインストールしたものも、自分で作成してextensionsフォルダに直接置いたものもどちらもリストアップされます。
また、インストール済みの拡張機能のアップデートやアンインストールもこのUIからできます。

拡張機能の作成

v0.9.1でテーマ作成やシンタックスハイライト定義の作成用にyoのジェネレータが用意されましたが、このジェネレータで拡張機能の雛型を作れるようになりました。
f:id:minami_SC:20151121212859p:plain:w350

https://code.visualstudio.com/docs/extensions/overview
割としっかりとドキュメントが用意されてるんで、yoで雛型を生成してドキュメント読みながらいじればいろいろ作れそうです。

この辺はまた近いうちに少しずつドキュメントを読んでみようかと思います。

VSCodeのオープンソース

今回のバージョンアップのもう一つの目玉!!
VSCodeがオープンソースになりました。

GitHubの↓のリポジトリで公開されてます。

デバッガの改善

デバッガ実行中のコンテキストメニューの追加機能

値を確認したい変数を選択してコンテキストメニューを表示すると、「Debug: Evaluate」「Debug: Add to Watch」という項目が表示されるようになりました。
f:id:minami_SC:20151121212932p:plain

これらのメニューから、デバッグコンソールでの値の確認や、ウォッチウィンドウへの追加を素早く行えます。

Node.jsデバッグ時のコンソール

今までは、デバッグを開始すると別ウィンドウでコンソールが開かれて、そのコンソール内でNode.jsの実行がされてました。
V0.10.1からは、デフォルトではこんな風にVSCode内のDebugConsole領域で実行されるようになります。
f:id:minami_SC:20151121212947p:plain:w450

別ウィンドウのコンソールで実行

launch.jsonexternalConsole: trueというプロパティを追加しておくと、別ウィンドウのコンソールで実行するようになります。
f:id:minami_SC:20151121212955p:plain:w450

デバッグコンソールの表示改善

こんな風にエラー発生時の出力の、エラー発生箇所のファイルにリンクが張られるようになってます。
f:id:minami_SC:20151121213015p:plain:w350

エラーのある行に素早く移動できて便利になるかも。
ただしTypeScriptで書いてるときは、コンパイル後のJavaScriptの方に移動します。
ソースマップで対応付けて移動してくれると嬉しいんだけどなぁ。

その他細かい点

他にも以下のような変更点があります。

  • コードスニペット作成用に、yoのジェネレータの機能追加
  • シンタックスハイライトの改善
    • v0.9.1でシンタックスハイライトの定義を追加できるようになってましたが、追加した言語向けのシンタックスハイライト表示が改善されました。
  • launch.jsonやtask.json環境変数が使えるようになった
  • PHP向け機能
    • PHPのlinterが変わったり、いろいろ変更あるみたい。自分はPHPはやってないので、ココはスキップ。
  • ワークスペースごとに、使用するTypeScriptのバージョンを変えられるようになった
  • Diffの表示方法切替
    • GitHubのDiff表示みたいな、最近よく見かけるスタイルのDiff表示ができるようになりました。
    • diffEditor.renderSideBySide: falseという設定をsettings.jsonに加えることで、表示方法の切り替えができます。 f:id:minami_SC:20151121213028p:plain