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

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;
}