WebStom のショートカットのリストが英語なので、どの英単語が、どの機能なのかぱっと見わからないので困っていたが、公式サイトにわかりやすく分類された一覧表があった。ラッキー。これを元にショートカットを編集していく。
随時追加します。
Contents
ショートカットの設定ファイル
WebStomのショートカットの設定ファイルは次の場所にある。「WebStorm→Preferrence→Keymap」
設定ファイルを簡単に Git で共有するには次の記事を読んで下さい。
虫眼鏡マークで機能を検索して、ダブルクリックすると編集できる。必要のないものはリムーブし、新たに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 文なども登録されているので毎回書くやつは書かなくていい。