今まではVimでJavaScriptを書いていたんですが、WebStormも結構使っていて、ここ最近はWebStorm一本でJavaScriptを書き始めているので、
良かったなーというショートカットや機能をメモっていこうと思います。
ただやはりVimならこれできるのにーとモジモジすることは多々あります。
またショートカットの設定は、WebStormの設定にあるKeymapからできます。
WebStormってなあに?という方はWebStorm指南書こちらのすばらしいスライドを一読されると、おーーってなると思います。
Command + J
LiveTemplate一覧
TextMateのようにタブで保管できる候補が一覧で出てきます。
あれ、どんな候補あったっけ?というときに特に便利です。
Command + W (独自コマンド)
タブを閉じる
WebStormはデフォルトでこのコマンドでタブが閉じないので設定した。
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にしとかないとリストに出てきてくれないので注意。
Command + E
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にもありますね。
Command + B
定義場所に移動
もっともよく使うコマンドかもしれない。
さらに、これがWebStormの強みでもある。
メソッドやプロパティの定義場所に移動してくれる、さらにファイルもまたがっていてもOKだし、プロジェクト内のJavaScriptファイルはインデクシングされているので、jQueryなどの
ライブラリにももちろん飛べる。
そして、候補がいっぱい出てきたときは、ファイル名をタイプすればインクリメントサーチしてくれる!
Keymap |
NavigateのDeclaration |
Option + F7
関数変数の利用箇所を検索
これもWebStormの便利機能、このメソッドどこで使われているのかなーというときに使います。
Shift + F6
Rename
よく使うリファクタリングのRenameです。
WebStormの協力なのはこのリファクタリングがすごいですよね。
後になって、やっぱりこのメソッド名嫌だなーと思った場合、他のエディターで直すのは大変ですが、WebStormなら一発!
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をダウンロードしとくといつでもショートカットが一覧で見れる。
ありがたい!
David Herman
翔泳社
売り上げランキング: 2,113