GitHub 製エディタ Atom リファレンス


![](http://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2014/02/atom-786x245.jpg)

:warning: 2014年02月27日に書いた記事なため、内容が古くなっています。注意してください :sweat_smile:

## Atom とは

GitHub 製テキストエディタ。Sublime のようにデフォルト状態でも十分使える、かつカスタマイズ可能。2014/02/27 現在では招待制。

[公式サイト - atom.io](https://atom.io)

### 他のエディタと何が違うのか
Chromium をベースにできており、エディタのどのページもローカルで Web ページがレンダリングされてる。 Node.js を使って各ウィンドウの JavaScript 環境で自由にコードを実行できる。使用されてる技術的に Web 開発者にとっては馴染みが深いエディタになると思われる。

（Chromium ベースなので Developer Tools が開ける (`option-cmd-I`)）

![_Users_seigo_workspace_wantedly.github.io.png](https://qiita-image-store.s3.amazonaws.com/0/20833/9ee8b544-0459-97cc-c0be-d6d841fcc6d5.png "_Users_seigo_workspace_wantedly.github.io.png")

#### Sublime
かなり似てる。git gutter とか package control がデフォルトで入ってるイメージ。プラグインの充実度はまだ比較にならないが、プラグインやテーマが GitHub と密に連携していたりとエディタのエコシステムが強みに感じる。

速さは体感ではそこまで変わらない。（少なくとも Sublime より速い、とかではない）Timecop（下記にスクショつけてる）でボトルネック見つけて改善もできそう。

#### Vim
Vim と Sublime の違いに近い。vim-mode plugin は存在するが、vim ライクに使えるレベルといった感じ。`ctrl-V` が存在する！が、先頭インサートとか諸々使えなかったりで、今後に期待＋キーバインドをカスタマイズする必要あり。

~~今のところ Mac でしか動かないのも使うか迷うポイントである。(NeoVim vs Atom となっていくのかどうか）~~
2015年03月20日現在は OS X 10.8 以降、 Windows 7 & 8、 RedHat Linux、 及び Ubuntu Linux で利用できます。

> #### What platforms does Atom run on?
Prebuilt versions of Atom are available for OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linux.

https://atom.io/faq

#### Emacs
わかりません。（Emacs 使いの方、編集リクエストください）

## 操作
### コマンドパレット
`cmd+shift-P`

![](https://f.cloud.github.com/assets/1424/1091618/ee7c3554-166a-11e3-9955-aaa61bb5509c.png)

#### Open On GitHub: File
現在見てるファイルの GitHub ページを開く

#### Open On GitHub: Blame
コードを範囲選択した上で、`Open on GitHub: Blame` を実行すると、該当箇所についての GitHub  blame ページが開く

#### Open On GitHub: History
現在見ているファイルの History の GitHub History ページを開く

#### Open On GitHub: Copy URL
`http://github.com/wantedly/wantedly.github.io/blob/develop/README.md#L14-L19` のようなリンクをコピーする。Blame と同じく範囲選択した上でコマンドパレットから `Open On GitHub: Copy URL` を実行

### ツリー
#### ツリー開閉
`cmd-\`

#### ツリーにフォーカスを移動
`ctl-0`

### ファイル
#### ファイルの追加、移動、削除
`ツリー上で右クリック`

キーボードショートカットもある

* 追加 `a`
* 移動 `m`
* 削除 `delete`

### 検索
#### ファイル検索
`cmd-t`

#### 現在開いてるファイルから検索
`cmd-b`

#### 変更のあるファイルと Git でまだトラッキングしてないファイルを検索
`cmd-shit-b`（Git を使ってるプロジェクトであれば）

#### ファイル内検索と置換
`cmd-f`

#### プロジェクト全体からファイル内検索

`cmd-shift-f`

ウィンドウ下部に置換文字列を入力することで置換

#### シンボルへのジャンプ
`cmd-r`

#### プロジェクト横断でシンボルへのジャンプ
まず、

```bash
$ brew install ctags
```

プロジェクトルートにて

```bash
$ ctags -R ./
```

atom にて

`cmd-shift-r`

### パネルの分割
#### 分割
`cmd-k` の後に `上下キー`

例えば、右にパネルを出したかったら `cmd-k` + `右`

#### 移動
`cmd-k` の後に `cmd-上下キー`

例えば、左に移動したかったら `cmd-k` + `cmd-左`

#### 閉じる
`meta-w` (`cmd-w`)

### ブロックをたたむ
行の上にカーソルを合わせると表示される矢印をクリック

キーボードから行うには

* たたむ - `alt-cmd-[` または `alt-cmd-]`
* 開く - `alt-cmd-shift-}` または `alt-cmd-shift-}`

## カスタマイズ
（ちょっとずつ書いてく）

![untitled_と_GitHub_製エディタ_Atom_リファレンス_と_1._bash.png](https://qiita-image-store.s3.amazonaws.com/0/20833/2513b684-0de0-c451-bd3f-53492cd3d3d0.png "untitled_と_GitHub_製エディタ_Atom_リファレンス_と_1._bash.png")


### 設定画面を開く
コマンドパレットから `settings` と検索

### テーマの変更
設定画面の Theme タブから、全体のテーマとコード部分のテーマ変更が可能。

デフォルトが一番良いと思う

### パッケージのインストール
設定画面の Packages からインストール可能なパッケージインストールするだけ

もしくは

```bash
$ apm install <package>
```

## 便利機能
### Markdown プレビュー
![README.md_-__Users_seigo_workspace_box-ubuntu12.04-chef.png](https://qiita-image-store.s3.amazonaws.com/0/20833/76cb4c82-5713-a7b8-53e5-f33d2b831bc4.png "README.md_-__Users_seigo_workspace_box-ubuntu12.04-chef.png")

Packages -> Markdown -> Preview Buffer

保存するとレンダリングってのがあと一歩？

### 変更ファイル・新規ファイルが一目でわかるツリー
![additional_-__Users_seigo_workspace_wantedly.github.io.png](https://qiita-image-store.s3.amazonaws.com/0/20833/a05898f2-2883-8da7-f7b0-208b1b9e5252.png "additional_-__Users_seigo_workspace_wantedly.github.io.png")

* 変更したファイルはオレンジ
* 新規ファイルはグリーン

### どこが遅いか調べられる Timecop
![Timecop_-__Users_seigo_workspace_wantedly.github.io.png](https://qiita-image-store.s3.amazonaws.com/0/20833/26b07011-fe0a-b544-a919-a6a24026dfcd.png "Timecop_-__Users_seigo_workspace_wantedly.github.io.png")

パッケージのローディングやテーマのローディング等、どこでどれくらい時間かかってるかわかる

### 自前テーマを作るのに便利そうな StyleGuide
![Styleguide_-__Users_seigo_workspace_wantedly.github.io.png](https://qiita-image-store.s3.amazonaws.com/0/20833/aaff07df-10fd-ec61-2d95-bc197c33bf8e.png "Styleguide_-__Users_seigo_workspace_wantedly.github.io.png")

エディタの Web ページなので、CSS （less）でテーマ変えられる。

## 感想

* GitHub 製
 * ロードイメージが Octocat だったり
 * まだ git でトラッキングしてないファイル用に + マークのアイコンがついたり
 * ブランチ名デフォルトで出たり
* デフォルトのままで十分使えると書いてるあるとおりだった
 * テーマが少ないのもあるけどデフォルトが一番良かった
* 設定画面が GUI で簡単
 * 設定ファイルの実体は `~/.atom` ディレクトリにある。dotfiles での管理簡単
* プラグインの管理が楽
 * 何を入れてるか、どれが有効か簡単に切り替え可能
 * GitHub と密に連携してるので Issue 上げたり README に飛べたり
* キーマップ、閲覧は GUI、編集はファイルベース、良い 
* Yet Another Sublime 感
* package とか thema の generator
* markdown preview やばい...
 * markdown の syntax highlight が GitHub Markdown
* theme とか less で書ける
* Timecop っていうエディタのどこが遅いか表示できる
* vim-mode プラグインもある（vim 代替レベルではない...）
* [open-source と closed でゆれてる？](http://discuss.atom.io/t/why-is-atom-closed-source/82/6)