WebStorm AngularJS Webinar (April 24th, 2014) 補足メモ

［追記]公式ブログの方で録画映像と記事が公開されました。

http://blog.jetbrains.com/webstorm/2014/04/webstorm-8-webinar-recording/

日本時間で25日の夜中に、JetBrainsのエンジニアであるJohn Lindquist氏によるWebStorm8の新機能についてのWebinarが開催されました。

来週にはJetBrainsのブログのほうに内容のおさらいが動画で公開されると思いますが待ち切れないので自分が把握できた分だけ書き下しておきます。

ちなみに話された内容はこちらにリストアップされています。

https://gist.github.com/brockangelo/11260515

リストが細かく書かれてるので実際はそんなに書き下すことないんですが、ところどころ補足したいところもあるので↑のリストと並べて読んでもらえればいいかと思います。

AngularJSとの連携について

まず最初はWebStorm8の目玉であるAngularJSとの連携についてです。

WebStorm内の Terminalからbower install angularして簡単にインストールできます。

その後、HTMLの編集画面でng-***の補完がCtrl+Spaceで出てくるだとか、{{と打つと}}が自動で閉じてくれるだとかそういう話がされました。ココらへんはリストのとおりです。

一つ補足をすると、設定の Smart Keyの中にAngularJS用の設定が追加されているところがポイントです。現在のところはHTML編集で {{}}を補完した時に中に半角スペースを入れるか入れないかという設定だけですが今後増えるんじゃないでしょうか

その次にHTMLのデバッグ（？）の時にブラウザのリロードをしますが、そのリロードをブラウザにウィンドウを切り替えずにWebStorm側からフックできるよという話をしました。ショートカットキーも割り当てられるので、マルチディスプレイなどで作業しているときはいちいちブラウザに移動しなくてもリアルタイムプレビューができて良いのではないでしょうか

このReload in Browserは bower install bootstrapの話の中で出てきたもので、実はWebStormの LiveEdit（編集したHTMLがリアルタイムでプレビュー中のブラウザに反映される機能）は<link>タグの追加（というよりはCSSの読み込み）には対応していないので、「<link>を追加したあとにはブラウザをリロードしましょうね」という話でした。

話はAngularJSに戻ります。AngularJSの directiveに関する機能で、js側で書いたdirectiveのrestrict:E (or A)に対応して、そのjsを読み込んだHTML側でエレメント、または属性として補完が効くようになるという話です。これは以前から公式の動画で見られるので見たほうが早いです。

http://youtu.be/rlNmYgNdOkM?t=1m5s
ここで補足ですが、動画中に出てくるdirectiveには@ngdocというドキュメントがついています。これはWebStorm8の機能ではなくてまだ手書きしないといけないものです。

/**
* @ngdoc directive` //ドキュメント対象の種類
* @name customAttribute //対象の名前
* @param {expression} customAttribute //受け入れるパラメータの型
*/
module.directive("customAttrbute", ...

そのうちngdocの補完というかテンプレート機能も付くんじゃないかなと思います。

AngularJSのトピックスではあとの話では オンラインドキュメントへのリンク機能が印象的でした。HTML編集画面で、 ng-***にカーソルを当てて Ctrl-F1もしくは Shift-F1を押すとブラウザで公式のドキュメントが開きます。地味に便利そうです。

Spy-JSについて

次にSpy-JSについて結構長く話がありましたが、要点としては

• Run Configurationの中にSpy-JSプロファイルが追加された
• 指定したURLに対してトレースを行える
• Spy-jsでのトレース結果はブラウザに関係なくWebStorm上で見られる
• 例えば「指定したイベントだけ非表示にする」とかも出来てトレース結果が見やすい

みたいな話でした。

Gruntとの連携について

Gruntについては大きく分けて2つの話でした

Gruntfile.jsに補完を効かせる方法

おそらく初期設定のままでは、Gruntfile.jsでmodule.eと打って Ctrl+Spaceしても exportsは候補に出ないと思います。デフォルトではGruntfileに対するシンタックスハイライトも効いてないのではないでしょうか。

これを解決するために、設定画面の JavaScript : Librariesを開きます。

まず初めにNode.js Globalsというライブラリにチェックを入れます。これを読み込むことでGruntfile.jsにシンタックスハイライトが付きます。module.の補完も効くと思います。

次に同じ画面から Downloadボタンを押します。出てきたダイアログの左上のコンボボックスからTypeScript Community stubsを選択し、適当にリストのアイテムをクリックしてからキーボードで gruntと打つと検索できます。見つかった gruntjsライブラリを選んで、下のDownload and Installを押すとインストールされますので、チェックを入れましょう。これでgrunt専用の関数も補完が効くようになっているはずです

Gruntコンソールについて

これに関しては先日自分が書いたこちらの記事を参照してください。

マルチカーソル機能について

Sublime Textなどで使えるマルチカーソル機能もWebStorm8で実装されています。

Keymapの中でSelect next occurenceで検索すると出てきます。デフォルトがどう割り当てられているかがよくわかりませんが、マウスショートカットを新しく割り当てることをおすすめします。

マウスショートカット設定画面は、任意のキーを押しながら真ん中のイラスト部分をクリックすることでキーと組み合わせることができます。

・・・とここまで書いたのですが、私の環境ではマルチカーソル使えてないです。（とてもつらい）OS側のキーバインドと衝突したりいろいろあるようで、もしできた方いたら感想聞かせてください

以上で書き下しと補足終わります。1時間眠気と闘いながら英語を聞いていたのでけっこうざっくりとしかメモをとれていません。正しくて詳細な情報は28日に公開予定の公式ブログの記事を読んでください！