皆に絶対知ってほしい Webstorm ショートカット・設定集╭( ･ㅂ･)و
最近社内に新しく入った方々が多く、私もインプットやメンター業務が増えました。自然に webstorm の使い方を説明することも多くなったので丁度いいかと思い、私の好きなショートカットをまとめます！
1. 基本的なもの
1-1. 環境設定
- MAC：
⌘+, - WIN：
Ctrl+Alt+S
環境設定ウィンドウを開きます。色々カテゴリーが多いですが、環境設定ウィンドウ内でも検索できるし該当箇所にハイライトしてくれるのでわかりやすいです。
1-2. 新しいファイル追加
- MAC：
⌘+N - WIN：
Alt+Ins
ディレクトリ内で新しいファイルを追加します。
1-3. ファイル名変更
- MAC：
⇧+F6 - WIN：
Shift+F6
ファイル名を変更します。該当ファイル右クリック → Refactor → Rename...でも変更できますが、めんどくさいのでショートカットがおすすめです。
1-4. プロジェクトツールウィンドウ表示・非表示
- MAC：
⌘+1 - WIN：
Alt+1
プロジェクトツールウィンドウの表示を制御します。地味に便利。
1-5. Changelist のファイルにジャンプ
- MAC：
⌘+↓ - WIN：
Ctrl+Enter
Changelist のファイルをダブルクリックすると前のバージョンとの比較ウィンドウが表示されます。が、そのファイルに即ジャンプしたいときも結構あるのでそのとき役に立つショートカットです。
2. よく使われるもの
2-1. 何でも検索
- MAC：
⇧2回連打 - WIN：
Shift2回連打
ファイル名・関数名・webstormのアクションなど、何でも検索できるショートカットです。私はパス検索でファイルに直接ジャンプするときよく使ってます。
2-2. 全体ソースコード内検索
プロジェクトの全体ソースコード内でテキスト検索できます。めちゃくちゃ便利です。
- MAC：
⌘+⇧+F - WIN：
Ctrl+Shift+F
+) 書き換えまでするやつはこっち
- MAC：
⌘+⇧+R - WIN：
Ctrl+Shift+R
2-3. 同じ単語選択
- MAC：単語選択してから
control+G - WIN：単語選択してから
Alt+J
同じ単語を選択してくれます。めっちゃ便利。ちなみに単語選択はいちいちドラッグしなくてもダブルクリックでいけます。
+) 同じ単語を一気で選択したいときはこっち
- MAC：
⌘+control+G - WIN：
Ctrl+Shift+Alt+J
2-4. マルチカーソル
- MAC：
⌥2回連打 +↑/↓ - WIN：
Ctrl2回連打 +↑/↓
選択してる部分の直下にカーソルを増やしてくれます。これも地味に便利。
+) マウスで直接カーソルを増やしたいときはこっち
- MAC：
⌥押しながらクリック - WIN：
Alt押しながらクリック
2-5. 選択行を上下に移動
- MAC：
⌥+⇧+↑/↓ - WIN：
Alt+Shift+↑/↓
今カーソルがある行を移動させます。めっちゃ便利。
+) フォーマットを守りながら移動させたいときはこっち
- MAC：
⌘+⇧+↑/↓ - WIN：
Ctrl+Shift+↑/↓
2-6. 選択行複製
- MAC：
⌘+D - WIN：
Ctrl+D
⌘C⌘Vしなくてもこれ一つですぐ複製できます。
2-7. 選択行削除
- MAC：
⌘+Delete - WIN：
Shift+Delete
行単位で削除するとき便利です。
2-8. アクション・quick-fixes 表示
- MAC：
⌥+Enter - WIN：
Alt+Enter
エラーになってる部分にカーソル当てて使います。import が漏れてるときとか便利。
2-9. 大文字・小文字変換
- MAC：
⌘+⇧+U - WIN：
Ctrl+Shift+U
英文の小文字を大文字に、大文字を小文字に変換してくれます。これも地味に便利。
2-10. usages を見る
- MAC：
⌘+B - WIN：
Ctrl+B
カーソル当ててる関数、変数がどこで使われてるか見せてくれます。めっちゃ便利。
3. 便利な設定・操作
3-1. Always Select Opend FIle
プロジェクトツールウィンドウの⋮(Show Options Menu)クリック → Always Select Opend FIle にチェックします。
そうすると現在開いてるファイルがプロジェクトツールウィンドウでフォーカスされるようになって便利です。
3-2. 修正前のバージョンを確認・ロールバック
夢中に実装してたら修正前のバージョンを確認したいときや戻したいときがあります。そういうときは修正した行の左に色が付いてるのでそれをクリックします。戻したいときはロールバックボタン押下。
もし修正したのに色がついてないなら環境設定の Editor → General → Gutter で Highlight modified lines in the gutterにチェック入れてください。
私も WebStorm を最高に効率よく使いこなせる達人までは及ばないのですが、WebStorm 入門者に絶対教えたいものをまとめてみました。ぜひ試してみてください！
Discussion