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