WebStormのショートカットキー


WebStom のショートカットのリストが英語なので、どの英単語が、どの機能なのかぱっと見わからないので困っていたが、公式サイトにわかりやすく分類された一覧表があった。ラッキー。これを元にショートカットを編集していく。

随時追加します。

ショートカットの設定ファイル

WebStomのショートカットの設定ファイルは次の場所にある。「WebStorm→Preferrence→Keymap」

設定ファイルを簡単に Git で共有するには次の記事を読んで下さい。

WebStorm の設定を複数の端末で共有する

虫眼鏡マークで機能を検索して、ダブルクリックすると編集できる。必要のないものはリムーブし、新たにaddすればいい。

ネストの開閉 Folding

ネストの開閉はFoldingのカテゴリーにまとめられている。畳み込み関係

  • expand 開く
  • collapse 閉じる
  • ノーマルバージョン 今いるラインだけを開閉する
  • Recursively 今いるラインと含まれる階層全てを開閉する

自分用メモ

expand command + (+)
expand recursively command + shift + (+)
collapse command + (-)
collapse recursively command + shift + (-)
置換 command + R
最近使ったファイルの検索 command + E
一行削除 comm + L
一行複製 comm + D
行の始端、終端に移動 comm + 左右
単語の始端、終端に移動 Alt + 左右
移動する時に、移動した範囲を選択する Shift を移動に加える
複数行を選択 shift + 上下
タブを1段階「減らす」 shift + tab
上下の行を入れ替える shift + comm + 上下
単語単位で選択範囲を広げる 早い!!! alt + 上下

ウィンドウ系

エディターに戻る ESC
ツールウィンドウを閉じて、エディターに戻る ESC + SHIFT
最後に開いたツールウィンドウに戻る F12

 

Todo fixme コメント

エディター内で、「コメント用タグ スペース todo スペース 内容」と入力すると  Todo リストとして認識してくれる。例えば .sass 内なら次のように。

// todo あとで直す

これは TODO 設定から細かくエディット可能。デフォルトでは todo と fixme というワードを認識してくれる。追加で以下の画像では test というワードで TODO リストに追加されるように設定してみた。

すると以下のように TODO リストに追加される。

開発中に必要だが、デプロイ時には必ず消しておきたいコメントは、TODO リストとして認識されるようにすることで、消し忘れを撲滅できる。また、書きながら、ここ後で直さなくてはというコメントも気軽に入れられる。

Live Template と JavaScript Postfix Completion

emmet のように、登録しておいた文字列の後に tab を押したらテンプレートを展開してくれる。かなりの頻度で ES6 の class 構文で export/import する書き方を検索しているので、登録した。

https://www.jetbrains.com/help/webstorm/2017.1/live-templates-2.html

Postfix Completion は JS 用にもとから登録されているもので、個人的には「”大声.log”でタブ」とすれば「console.log(“大声”)」になるのが便利。他にも頻繁に使う if 文なども登録されているので毎回書くやつは書かなくていい。

Leave a Reply

Your email address will not be published. Required fields are marked *