Webstormで知っておきたいショートカットを集めました – 『editor』

table of contents

    WebStormはモダンなJavaScriptをスマートに開発するためのIDEです。

    ぼくのまわりでは、JavaScriptを書くならデザイナーもエンジニアもWebStormがおすすめ、という雰囲気もありメインストリームな感じなのを受けて、布教用とは言えないですが、ショートカット集をつくってみました。

    ショートカットを覚えておくと、IDEの機能を少しづつ知っていくことにもつながるので、よく使う機能をピックアップしています。

    一般

    webstormのコマンドを検索
    cmd + shift + A
    ファイルの絶対パスをコピー
    cmd + shift + C
    クリップボードを開く
    cmd + shift + V
    Bookmarkする
    option + F3
    Bookmarkを確認する
    cmd + F3
    環境設定を開く
    cmd + ,
    開いているファイルの切り替え
    control + tab
    開いているファイルのタブ前後移動
    cmd + shift + [ or ]

    JavaScript 関連

    変数名・関数名・クラス名を検索
    comd + option + o
    クラス名やメソッド名の宣言と呼び出し元を同時編集
    shift + F6
    クラス、メソッド、関数の情報を表示
    cmd + カーソルを合わせる
    宣言か呼び出し元に移動
    cmd + b
    変数の利用箇所に移動
    cmd + option + f7
    import しているモジュールの整理 (ソート/未使用のものを削除)
    control + option + O
    選択したコードをメソッドとして抽出
    cmd + option + M
    アウトラインをポップアップ
    cmd + F12
    クイックドキュメント (JSDocコメントや、 メソッドの詳細) を表示
    F1
    引数の情報を表示
    cmd + P

    移動

    エディタ内の上下移動
    fn + ↑ or ↓
    選択行を上下に移動
    option + shift + ↑ or ↓
    クラス名を指定して移動
    cmd + o
    ブロックの先頭か末尾に移動
    option + cmd + [ or ]
    前の編集地点に移動
    shift + cmd + delete
    編集ポイントに移動
    control + option + ← or →

    編集

    現在と次の行を1行に
    control + shift + J
    コードフォーマットの適用
    cmd + option + l
    マルチカーソル(同じ項目にカーソルを増やす)
    ある文字列を文字列を選択 + control + G
    マルチカーソル編集
    option + click
    長さの異なる文字列の一括編集
    option + double click
    指定したディレクトリ内を検索
    cmd + shift + F
    指定したディレクトリ内を一括置換
    cmd + shift + R
    開きタグから閉じタグまでを選択
    alt + ↑ or ↓
    矩形選択
    alt + 選択
    次の同じ単語を選択
    cmd + g
    同じ単語を複数選択
    control + g
    同じ単語を全て選択
    control + cmd + g

    ファイルの展開

    いろいろ全検索
    double shift
    ファイル名検索
    shift + cmd + O
    ナビゲーションバーに移動
    cmd + ↑
    最近使用したファイル
    cmd + shift + E

    Emmet

    要素をラップする要素を作る
    option + cmd + j
    要素を削除する
    shift + cmd + fn + delete

    git

    add
    cmd + option + a
    コミット
    cmd + K
    プッシュ
    cmd + shift + K

    おわります。

    Webstormで知っておきたいショートカットを集めました – 『editor』のアイキャッチ画像

    share

    related