Atomの便利なショートカットの備忘録です。
ファイルの新規作成
Web開発ではエディタを開いているときに新規でファイルを作りたくなることって以外にあります。ショートカット一発でいけるのは楽ですね。
Windows 「Ctrl」+「N」
Mac「Cmd」+「N」
カーソル行の内容をまるまる直下にコピー
同じ内容を簡単にコピーできるのですごく楽です。「Ctrl」+「CV」とか馬鹿らしくなります。
Windows 「Ctrl」+「Shift」+「D」
Mac「Cmd」+「Shift」+「D」
カーソル行の内容をまるまる削除
あまり使用頻度はありませんが、全選択してから削除よりは便利そうです。
Windows 「Ctrl」+「Shift」+「K」
Mac「Ctrl」+「Shift」+「K」
Macは「Cmd」ではないので注意
ツリービューの表示・非表示切り替え
ボチボチ使います。Windowsは「\」で済むみたいですが、Macも兼用の「KB」で覚えた方が良さそう。
Windows「Ctrl」+「K」+「B」 もしくは 「Ctrl」+「\」
Mac「Cmd」+「K」+「B」
直下に空行を追加し、その空行から打ち始める
結構使います。HTMLをタグ入力してるときとか重宝します。
Windows 「Ctrl」+「Enter」
Mac「Cmd」+「Enter」
現在の行を下にずらし、現在の行から打ち始める
結構使います。これもHTMLをタグ入力してるときとか重宝します。
Windows 「Ctrl」+「Shift」+「Enter」
Mac「Cmd」+「Shift」+「Enter」
文字をコメントアウトする
めちゃくちゃ使います。特にHTMLの<!– –>とか手で打つの面倒・・。
Windows 「Ctrl」+「/」
Mac「Cmd」+「/」
カーソル行をまるまる上下に移動する
めちゃくちゃ使います。考えた人感謝。
Windows 「Ctrl」+「上下」
Mac「Cmd」+「Ctrl」+「上下」
なぜかMacは「Ctrl」が必要です。
対応するタグに移動する
これも便利です。片方のタグがマークされるだけでも便利ですが、ジャンプできるので尚よし。
Windows 「Ctrl」+「M」
Mac「Ctrl」+「M」
Macは「Cmd」ではないので注意
カーソルが当たっているタグを次次に選択する
例えばPタグをliタグに変更したい場合などに便利。
Windows 「Ctrl」+「D」
Mac「Cmd」+「D」
カーソルを好きなところに複数立てる
カーソルを複数立てて同時に編集できる。「Ctrl」+「D」のような機能だが、自分で選べるところが良い。
Windows 「Ctrl」+「クリック」
Mac「Cmd」+「クリック」
カーソルが当たっているタグと同じものを全選択する
例えば<h1>タグにカーソルを当てて操作すると、すべての<h1>が選択された状態でカーソルも立つ。だから一気に全て<h2>に置き換えるなども簡単。
Windows 「Alt」+「F3」
Mac ?
手動インデント(設定が必要)
インデントが崩れることは結構あるので重宝します。
Windows 「Alt」+「Shift」+「I」
Mac「Option」+「Shift」+「I」
設定方法は「Atomエディタ初期設定」を確認。
スタイルガイドの表示
使い道わかりません。
Windows 「Ctrl」+「Shift」+「G」
Mac ?
画面右にエディタパネルを追加する
タブをドラッグする方が楽だけどあえてキーボードで操作したい場合使う。
Windows 「Ctrl」+「K」+「右」
Mac「Cmd」+「K」+「右」
パネル間のアクティブ移動
Windows 「Ctrl」+「K」 & 「Ctrl」+「左右」
Mac「Cmd」+「K」 & 「Cmd」+「左右」
パネルを閉じる
パネルを閉じることはあるけど、普通はXボタンで済ませるかな。
Windows 「Ctrl」+「W」
Mac「Cmd」+「W」
設定画面を開く
設定画面を開くことがあまりないけど、知っておくと便利。
Windows 「Ctrl」+「カンマ」
Mac「Cmd」+「カンマ」
検索・置換窓の表示
言わずと知れた検索窓。
Windows 「Ctrl」+「F」
Mac「Cmd」+「F」
検索・置換窓の表示(プロジェクト全体)
全体から検索できるのは便利。重いので注意。
Windows 「Ctrl」+「Shift」+「F」
Mac「Cmd」+「Shift」+「F」
マークダウンプレビューを表示
emmetプラグインを入れていると効かなくなるので、設定時に注意が必要。
Windows 「Ctrl」+「Shift」+「M」
Mac「Ctrl」+「Shift」+「M」
Macは「Cmd」ではないので注意
文字の拡大
間違って文字の縮小が押された場合に使うくらい
Windows 「Ctrl」+「Shift」+「+」
Mac「Cmd」+「Shift」+「+」
文字の縮小
コメントアウトのショートカットと間違って押して困ること多々。
Windows 「Ctrl」+「Shift」+「 _ 」
Mac「Cmd」+「 _ 」
開発環境表示
Atomは関係ないけど予備で載せておきます。
Windows 「Ctrl」+「Shift」+「 I 」
Mac「Option」+「Shift」+「I」
- ファイルの新規作成
- カーソル行の内容をまるまる直下にコピー
- カーソル行の内容をまるまる削除
- ツリービューの表示・非表示切り替え
- 直下に空行を追加し、その空行から打ち始める
- 現在の行を下にずらし、現在の行から打ち始める
- 文字をコメントアウトする
- カーソル行をまるまる上下に移動する
- 対応するタグに移動する
- カーソルが当たっているタグを次次に選択する
- カーソルを好きなところに複数立てる
- カーソルが当たっているタグと同じものを全選択する
- 手動インデント(設定が必要)
- スタイルガイドの表示
- 画面右にエディタパネルを追加する
- パネル間のアクティブ移動
- パネルを閉じる
- 設定画面を開く
- 検索・置換窓の表示
- 検索・置換窓の表示(プロジェクト全体)
- マークダウンプレビューを表示
- 文字の拡大
- 文字の縮小
- 開発環境表示
- emmet
- Dotinstall Pane
emmet
Webデベロッパー用のツールemmet用のショートカット。設定でインストールする必要あり。
HTML5タグを挿入
必須のHTMLタグを作ってくれるので便利。
Windows 「html:5」+「Tab」
Mac「html:5」+「Tab」
Dotinstall Pane
ドットインストールの動画をAtomで開けるようにするツールのショートカット。設定でインストールする必要あり。
Dotinstall Paneを表示
パネルを表示できないと始まらない。
Windows「Shift」+「Alt」+「d」
Mac「Shift」+「Option」+「d」
再生・停止
エディタにカーソルがあるときでも使えるので以外に便利。
Windows「Alt」+「Shift」+「Enter」
Mac「Option」+「Shift」+「Enter」
5秒巻き戻し
Windows「Alt」+「Shift」+「[」
Mac「Option」+「Shift」+「[」
5秒早送り
Windows「Alt」+「Shift」+「]」
Mac「Option」+「Shift」+「]」
コメント