【Atom】ショートカット(Win・Mac)とおすすめパッケージ

  • 341
    Like
  • 0
    Comment
More than 1 year has passed since last update.

Atomのショートカット一覧

WindowsとMacの両方で使用しているとショートカットを忘れるのでチートシートを作成しました。
他にも便利なショートカットがあるので、暇なときに追加します。

文字・行関連の操作

操作 Windows Mac
単語を選択 ※1 Ctrl + D command + D
単語の末尾に移動 Alt + F option + F
単語の先頭に移動 Alt + B option + B
行の末尾に移動 End control + E
矩形選択 ※2 Ctrl + Alt + 上矢印キー or 下矢印キー
複数箇所選択 Ctrl + クリック command + クリック
インデントを一つ追加 ※3 Ctrl + ] command + ]
インデントを一つ削除 ※3 Ctrl + [ command + [
行の選択 Ctrl + L command + L
行の削除 Ctrl + Shift + K control + shift + K
行ごと移動 Ctrl + 上矢印キー or 下矢印キー control + command + 上矢印キー or 下矢印キー
行ごと下の行へコピー Ctrl + Shift + D command + shift + D
行の下に空行を挿入 Ctrl + Enter command + return
行の上に空行を挿入 Ctrl + Shift + Enter command + shift + return

※1 Ctrl or command を押した状態で D キーを押すたびに同じ単語を複数選択
※2 古いAtomだとできないかも
※3 複数行もOK

画面の操作

操作 Windows Mac
画面を右に分割 (Ctrl + K) + 右矢印キー (command + K) + 右矢印キー
画面を下に分割 (Ctrl + K) + 下矢印キー (command + K) + 下矢印キー
画面を閉じる Ctrl + W command + W

その他

操作 Windows Mac
Markdownのプレービュー表示/非表示 Ctrl + Shift + M control + shift + M
セッティング画面表示 Ctrl + , command + ,
コメントアウト Ctrl + / command + /
ツリービュー(フォルダ・ファイル一覧)の表示/非表示 Ctrl + ¥ command + ¥

おすすめパッケージ

HTML/CSSのコーディングのときに役立つパッケージを紹介します。
昔はいろいろパッケージを入れないとコーディングできませんでしたが、今は必要最低限のパッケージだけで問題ないです。

パッケージのインストールは簡単です。

  • セッティング画面(※ショートカットは上述)を開く
  • Install(インストール)を選択
  • 「Search packages」の入力欄にインストールしたいパッケージ名を入力して検索
  • 下にパッケージの一覧が表示されるので「Install」のボタンを選択すれば完了

2016/1/26に新たに投稿

Atom1.4.0に入れたパッケージ

パッケージ名 補足
japanese-menu 画面を日本語化
expand-selection-to-quotes シングルクオートまたはダブルクォート内を選択するキーバインドを追加 ※1
pigments cssの色コードの背景に指定したコードの色を表示
tag </ まで入力すると自動で閉じタグを挿入。 ※sublimetextと同じ
autoclose-html </ を入力するのも面倒な方はこのパッケージ。開始タグを入力すると自動で閉じタグも入力。
highlight-selected 選択した単語と同じ単語をハイライト表示

※1
「command+'」または「control+'」または「command+shift+'」または「control+shift+'」で選択できると思います。
Macは「command+shift+'」で可能でした。
Windowsでは選択できなかったので、キーバインドを変更しました。
キーバインドの変更方法は、設定>キーバインドの一覧に「ctrl-' expand-selection-to-quotes:toggle」と記載があるかと思います。
左のファイルのアイコンをクリックして、コピーしてキーマップファイルに貼り付けて保存すれば変更できます。
私はキーマップファイルに下記のように追記して「Ctrl + Shift + q」のキーバインドに変更しました。

'atom-text-editor.editor.editor':
  'ctrl-shift-q': 'expand-selection-to-quotes:toggle'

過去(2015/2/17)に紹介したおすすめパッケージ

パッケージ名 補足
tag "</"入力時に自動で閉じタグを挿入してくれます。
autoclose-html 開始タグの">"を入力すると自動で閉じタグを挿入してくれます。タグによっては改行も自動で入り、入力状態にしてくれます。個人的には、そこまで求めていないのでtagの方が使いやすいです。
html-img img要素を選択して Ctrl + I を入力すると縦横のサイズを挿入してくれます。Ctrl + I + / を入力すると半分のサイズを挿入してくれます。Retina対応の画像を使うときに重宝するかと思います。他にも機能がありますので、配布サイトをご覧ください。
autocomplete-plus 入力時に補完候補を表示してくれます。
autocomplete-paths 入力時の補完候補にファイルやディレクトリも表示してくれます。
atom-color-highlight CSSなどに入力したカラーコードをハイライト表示(カラードコードと同じ色)してくれます。
file-icons ツリービューに表示されるファイル名の左側にアイコンがあります。そのアイコンをいい感じにしてくれます。

TIPS

複数画面のときに文字を折り返して表示

  • セッティング画面表示(※ショートカットは上述)を開く
  • Editor の項目の中にある「Soft Wrap」をチェックすると表示されます。

インデントの縦線を表示

  • セッティング画面表示(※ショートカットは上述)を開く
  • Editor の項目の中にある「Show Indent Guide」をチェックすると表示されます。

タブを表すスペースの数を変更

  • セッティング画面表示(※ショートカットは上述)を開く
  • Editor の項目の中にある「Tab Length」のプルダウンを選択し、数を変更する

デフォルトで表示される縦線を消す方法

  • セッティング画面表示(※ショートカットは上述)を開く
  • 「Packages」を選択して「Wrap Guide」と検索します。
  • 「Wrap Guide」のパッケージが表示されますので、「Disable」を選択すると縦線を消えます。

フォント設定

「File」から「Open Your Stylesheet」を選びます。
styles.lessのファイルが開くので、下記のようにfont-familyを指定します。
font-familyを指定するとQiitaと似たようなフォントで表示されるはずです。

.tree-view {
    font-family:Menlo,Monaco,Consolas,"Courier New",monospace,"Helvetica Neue",Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
atom-text-editor {
    font-family:Menlo,Monaco,Consolas,"Courier New",monospace,"Helvetica Neue",Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}