【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](https://atom.io/packages/japanese-menu)|画面を日本語化|
|[expand-selection-to-quotes](https://atom.io/packages/expand-selection-to-quotes)|シングルクオートまたはダブルクォート内を選択するキーバインドを追加　※1|
|[pigments](https://github.com/abe33/atom-pigments)|cssの色コードの背景に指定したコードの色を表示|
|[tag](https://atom.io/packages/tag)|`</` まで入力すると自動で閉じタグを挿入。　※sublimetextと同じ|
|[autoclose-html](https://atom.io/packages/autoclose-html)|`</` を入力するのも面倒な方はこのパッケージ。開始タグを入力すると自動で閉じタグも入力。|
|[highlight-selected](https://atom.io/packages/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](https://atom.io/packages/tag)|"</"入力時に自動で閉じタグを挿入してくれます。|
|[autoclose-html](https://atom.io/packages/autoclose-html)|開始タグの">"を入力すると自動で閉じタグを挿入してくれます。タグによっては改行も自動で入り、入力状態にしてくれます。個人的には、そこまで求めていないので[tag](https://atom.io/packages/tag)の方が使いやすいです。|
|[html-img](https://atom.io/packages/html-img)|img要素を選択して ``` Ctrl + I ``` を入力すると縦横のサイズを挿入してくれます。```Ctrl + I + / ``` を入力すると半分のサイズを挿入してくれます。Retina対応の画像を使うときに重宝するかと思います。他にも機能がありますので、配布サイトをご覧ください。|
|[autocomplete-plus](https://atom.io/packages/autocomplete-plus)|入力時に補完候補を表示してくれます。|
|[autocomplete-paths](https://atom.io/packages/autocomplete-paths)|入力時の補完候補にファイルやディレクトリも表示してくれます。|
|[atom-color-highlight](https://atom.io/packages/atom-color-highlight)|CSSなどに入力したカラーコードをハイライト表示（カラードコードと同じ色）してくれます。|
|[file-icons](https://atom.io/packages/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と似たようなフォントで表示されるはずです。

```css
.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;
}
```