自分で使ってるAtomの設定を書いてみた

「春の新生活を応援しましょうキャンペーン」ということで、新人プログラマさん向けに普段使っているAtomの設定を載せてみます。内容自体は半年くらいまえに自分のブログで書いたものとあんまり変わっていません。

### 見た目こんな感じになる
<img width="512" alt="20151012084758.png" src="https://qiita-image-store.s3.amazonaws.com/0/25841/c668bf74-ff9c-750e-0cbe-aba12a2e505e.png">

### 使ってるPlugin
- [atom-material-ui](https://atom.io/themes/atom-material-ui) : UI Themeに設定。Material Designっぽい感じの見た目になる
- [seti-syntax](https://atom.io/themes/seti-syntax) : Syntax Themeに設定。
- [atom-cli-diff](https://atom.io/packages/atom-cli-diff) : diffツール
- [autocomplete-emojis](https://atom.io/packages/autocomplete-emojis) : 絵文字のAutoCompleteを追加
- [autocomplete-paths](https://atom.io/packages/autocomplete-paths) : ファイルパスを入力する際のAutoComplete
- [color-picker](https://atom.io/packages/color-picker) : カラーピッカーを表示してRGBを入力できたり
- [file-icons](https://atom.io/packages/file-icons) : ファイルアイコンが追加される。楽しい。
- [highlight-selected](https://atom.io/packages/highlight-selected) : ファイル内で選択した単語と同じ単語をハイライトする。
- [maximize-panes](https://atom.io/packages/maximize-panes) : 複数Pane開いている場合、ActiveなPaneを全画面表示できるように
- [merge-conflicts](https://atom.io/packages/merge-conflicts) : Atom上でgitのconflictをいい感じに編集できる。らしい。ほぼソロ開発なのでまだお世話になってない。
- [regex-railroad-diagram](https://atom.io/packages/regex-railroad-diagram) : 正規表現書くとグラフィカルにその表現を図で表示してくれる。
- [project-manager](https://atom.io/packages/project-manager) : プロジェクトの管理をしやすくする。色んな場所にプロジェクトがあってもこのパッケージで管理されていれば簡単にたどり着ける
- [tabs-to-spaces](https://atom.io/packages/tabs-to-spaces) : tabをspaceに変換してくれる
- [term3](https://atom.io/packages/term3) : Atomのpaneでコンソール開ける
- [ask-stack](https://atom.io/packages/ask-stack) : Atom上からStackOverFlowに検索をかけて検索結果を見ることができる。
- [language-babel](https://atom.io/packages/language-babel) : Babelサポート
- [language-elixir](https://atom.io/packages/language-elixir) : Elixirサポート
- [react](https://atom.io/packages/react) : Reactサポート
- [language-haskell](https://atom.io/packages/language-haskell) : Haskellサポート。言語系のパッケージは必要になったら探して入れるという感じですな。
- [linter](https://atom.io/packages/linter) : Lintツール。リアルタイムでチェックしてくれる。下で挙げてるLintたちはこれがないと動かない
- [linter-csslint](https://atom.io/packages/linter-csslint) : CSSのLint
- [linter-jshint](https://atom.io/packages/linter-jshint) : JSのLint
- 番外：[atom-pronama-chan](https://github.com/hurumeki/atom-pronama-chan) : プロ生ちゃんを背景に召喚できる。デフォだと音声付きなので、自宅以外の場所でうっかり試すと悲劇が起きる。

### Keymap

```cson:keycap.cson
'body':
  'ctrl-enter': 'symbols-view:go-to-declaration'
  'ctrl-]': 'window:focus-next-pane'
  'ctrl-[': 'window:focus-previous-pane'
  'cmd-k cmd-down': 'term3:open-split-down'
  'cmd-k cmd-up': 'term3:open-split-up'
  'cmd-k cmd-right': 'term3:open-split-right'
  'cmd-k cmd-left': 'term3:open-split-left'
  'ctrl--': 'pane:decrease-size'
  'ctrl-;': 'pane:increase-size'
  'ctrl-o': 'fuzzy-finder:toggle-file-finder'
  'ctrl-cmd-s': 'project-manager:save-project'
  'cmd-shift-C': 'color-picker:open'
  'cmd-shift-A': 'ask-stack:ask-question'

```
### よく使うショートカット

| ショートカット | 内容 | 自分で追加/変更 |
|:-----------|:------------|:-----------|
| cmd-, | Setting-Viewを開く。パッケージいれたり何か設定するときはここから | |
| ctrl-h, j, k, l, a, e | おなじみのカーソル移動 | |
| ctrl-alt-h, l | 単語レベルで左右に移動 | |
| ctrl-tab, ctrl-tab-shift | おなじみのタブ移動 | |
| ctrl-enter | go-to-declaration。選択した関数やら変数の定義元に飛ぶ。要ctags | ○ |
| ctrl-0 | PaneとTreeのフォーカスを切り替え | |
| ctrl-o | ファイル検索 | |
| ctrl-w | ActiveなPaneを閉じる | |
| ctrl-cmd-s | 今開いているプロジェクトを名前をつけて保存する | ○ |
| ctrl-cmd-p | 保存済のプロジェクトの一覧を表示して開く | |
| cmd-k + left, right, top, bottom | 指定した方向に新しいPaneを開く | |
| cmd-k + cmd-left, right, top, bottom | 指定した方向に新しいTerminalを開く | ○ |
| ctrl-] | 次のPaneに移動する | ○ |
| ctrl-[ | 前のPaneに移動する | ○ |
| ctrl-- | Paneのサイズを小さくする | ○ |
| ctrl-; | Paneのサイズを大きくする | ○ |
| cmd-n | 新しいファイルを作成 | |
| cmd-o | ファイルを開く | |
| cmd-d | カーソルが当たっている単語を選択される。複数個選択することもできる。 | |
| cmd-/ | 選択中のコードをコメントアウト/コメントアウト解除 | |
| cmd-r | ファイル内のシンボルの一覧を表示して移動 | |
| cmd-f | 現在のファイルから検索 | |
| cmd-t | プロジェクトからファイルを検索して開く | |
| cmd-shift-F | 現在のプロジェクトから検索 | |
| cmd-shift-enter | maximize-panesを呼ぶ。カレントのpaneを最大表示する。その状態からもう一回叩くと元に戻る | |
| cmd-shift-R | プロジェクト内のシンボルの一覧を表示して移動 | |
| cmd-shift-C | カラーピッカーを表示。ピッカーから選択したカラーコードがエディタに反映される | ○ |
| cmd-shift-A | ask-stackを呼ぶ | ○ |

- こんな感じで色々載せましたが、最初はいくつか試してみて少しずつ手になじませながら使うプラグインを増やしていくといいのではないでしょうか。