今まではVimでJavaScriptを書いていたんですが、WebStormも結構使っていて、ここ最近はWebStorm一本でJavaScriptを書き始めているので、
良かったなーというショートカットや機能をメモっていこうと思います。

ただやはりVimならこれできるのにーとモジモジすることは多々あります。

またショートカットの設定は、WebStormの設定にあるKeymapからできます。

WebStormってなあに？という方はWebStorm指南書こちらのすばらしいスライドを一読されると、おーーってなると思います。

Command + J

LiveTemplate一覧

TextMateのようにタブで保管できる候補が一覧で出てきます。
あれ、どんな候補あったっけ？というときに特に便利です。

Command + W （独自コマンド）

タブを閉じる

WebStormはデフォルトでこのコマンドでタブが閉じないので設定した。

Keymap

Editor TabsのClose

Command + Shift + ], Command + Shift + [ （独自コマンド）

タブの移動

これもよく使うので設定した、Chromeとかと同じ方法での移動。

Keymap	Editor TabsのSelect Next Tab
Keymap	Editor TabsのSelect Previous Tab

Shift + Option + ↑ （独自コマンド）

Caret内の文字を選択、ダブルコートの中身とか、HTMLのタグの中身とか。
Vimっぽい機能としてこれは必須でした。
複数回実行すると選択の範囲が大きくなっていく。
なので、ハッシュの中身を選択もできる。

Eclipseと同じ操作のショートカットにした。

Keymap

Select Word at Caret

Shift + Option + ↓ （独自コマンド）

Caret内の文字を選択の解除
選択が行き過ぎた場合にこれで戻れる。

Shift + Option + ↑の逆版

Keymap

UnSelect Word at Caret

Command + Shift + O （独自コマンド）

ブラウザの起動

書いているHTMLをすぐに開きたいときに、わざわざブラウザのほうにHTMLファイルをドラッグとかしたくないので設定した。

Keymap

ViewのOpen in Browser

Option + F2

どのブラウザで選ぶかのリストが出て、エンターでそのブラウザを起動

Command + Shift + Oでも十分なんですが、他のブラウザでも見たい場合に便利。
設定のWeb BrowsersでActiveにしとかないとリストに出てきてくれないので注意。

Keymap

ViewのWeb Preview

Command + E

Recent Files

最近開いたファイルをリストで表示してくれるので、これも結構使います。

Keymap

ViewのRecent Files

Command + 1

Project Tool Windowを表示

つまりファイルエクスプローラーのペインに移動。
目的のファイルでエンターを押し、Escでエディターペインに移動できる。
Recentのほうでは探せなさそうなときはこっちを使っている。

Keymap

ViewのTool WindowのProject

Command + 7

Structure Tool Windowを表示

これもよく使うコマンドで、ファイル内のStructure情報を表示してくれる。
エンターでその定義メソッドなどに飛べて、さらにこのペイン内ではインクリメントサーチができるので、飛びたいメソッド名がわかる場合は少しタイプするだけで目的の場所に飛べる。

Keymap

ViewのTool WindowのStructure

Command + Shif + A

アクション一覧を表示

操作したいアクションのコマンドを覚えていない場合は、これで一覧表示エンターで起動できる。
これすごく便利、TextMateにもSublime Textにもありますね。

Keymap

HelpのFind Action

Command + B

定義場所に移動

もっともよく使うコマンドかもしれない。
さらに、これがWebStormの強みでもある。
メソッドやプロパティの定義場所に移動してくれる、さらにファイルもまたがっていてもOKだし、プロジェクト内のJavaScriptファイルはインデクシングされているので、jQueryなどの
ライブラリにももちろん飛べる。

そして、候補がいっぱい出てきたときは、ファイル名をタイプすればインクリメントサーチしてくれる！

Keymap

NavigateのDeclaration

Option + F7

関数変数の利用箇所を検索

これもWebStormの便利機能、このメソッドどこで使われているのかなーというときに使います。

Keymap

FindのUsages

Shift + F6

Rename

よく使うリファクタリングのRenameです。
WebStormの協力なのはこのリファクタリングがすごいですよね。

後になって、やっぱりこのメソッド名嫌だなーと思った場合、他のエディターで直すのは大変ですが、WebStormなら一発！

Keymap

RefactorのRename

Command + Option + T

クイックタグ編集

選択範囲を囲むようにHTMLタグを生成できます。
もちろんZenCodingも可能。

Surround.vimのようにダブルコートとかで囲えたらいいのになー

Keymap

CodeのSurround With

Command + Option + L

コードフォーマッター

一発でコードをキレイにしてくれるので、これはコード書いては実行しています。

Keymap

CodeのReformat Code

Command + Shift + Enter

現在いるステートメントで最適なコードを保管してくれる

ifやforとタイプしてこのコマンドを打つと()やら{}を保管してくれる。
ただ普段はCoffeeScriptを書いているので、このコマンドはあんまり使わなくなってきてしまいました。

Keymap

Complete Current Statement

Option + Enter

へんてこなコードのところには電球のマークが出ますが、ここでこのコマンドを実行するといい感じに修正してくれる。
AppCodeではほんとこのコマンドを多様する。

F11

ブックマーク

Shift + F11でブックマーク一覧が出てきます。
AngularやBackboneなんかを今コードリーディングしているんですが、いろんな箇所でブックマークしてあとから見ることが多々あるので重宝します。

Open URL

Command + Shift + AでOpen URLと入力すると速いが、入力したURLのHTMLをWebStorm内に表示してくれるので、
サクッとWebStorm上で目的のサイトのHTMLを見たいときに便利。

LiveTemplateを自作して速くコーディングする

High-speed coding with Custom Live Templates | WebStorm & PhpStorm Blogここの記事を読むとだいたいわかりますが、TextMateのようなタブで保管する機能をもっと自分オリジナルなもの追加したい場合にLiveTemplateを使います。

キーボードリファレンス

WebStorm_ReferenceCard.pdfからpdfをダウンロードしとくといつでもショートカットが一覧で見れる。
ありがたい！