github製のAtomというエディタの存在自体は随分前から知っていたのですが、
やや動作が重い、plugin等が少ない、などだった為いまいち sublime text から乗り換える機会がありませんでした。

しかしここ最近になって、友人達から立て続けにAtom良いよーという話を聞いたので
せっかくなのでそろそろ入れてみようと決意。

今回はアプリのインストールから、私が行った設定、
導入したplugin(Atomではpackageと呼ばれる)を紹介します。

 

更新履歴 最終更新 (2016/01/19)

  • 2016/01/19 入れたpackageを少し修正しました!
  • 2016/01/15 参考サイトに記事タイトルとサイト名を入れました(敬称略)

 

Atom(アトム エディタ)とは

そもそもAtomとはどんなエディタなのでしょうか?wikipediaを抜粋すると以下。

Atom(アトム)は、GitHubが開発したオープンソースのテキストエディタである。
GitHubの共同創業者であるクリス・ワンストラスによって2008年に開始されたプロジェクトだが、同社のビジネスが成功したことでワンストラスが多忙となり開発が一時停止していた。
その後、2011年から開発が再開され、2014年2月26日に招待制のベータバージョンとしてまずMac OS X向けがリリースされた。
同年5月6日、MIT Licenseのもとでソースコードを公開。2015年6月26日にバージョン1.0がリリースされた[2]。
デスクトップアプリケーションだがChromiumをベースとして開発されており、ユーザーインターフェースはウェブ技術であるJavaScript、CSSなどを使ってカスタマイズ可能となっている。

出典: Wikipedia

大きな特徴としては、github制のエディタで、クロスプラットフォームに対応している。
オープンソース化されているので、カスタマイズはpluginの作成が自由である。と言った所でしょうか。
見た目はIntelliJに似ており、β時代は検索が重いなど、パフォーマンスに問題を抱えていましたが、
正式バージョンの1.0ではかなり改善されている模様です。

ただ。やはりsublime textにするとややもっさり感はありますね…

 

アプリケーションのダウンロード

Atom_top

公式HPより
https://atom.io/

 

日本語化

Atom > Preferences > install > 検索ボックスに「Japanese-menu」と入れてEnter

スクリーンショット 2016-01-06 18.24.26

スクリーンショット 2016-01-06 18.24.59

(※キャプチャが日本語化したあとですみません)

 

テーマの設定

Atom > Preferences > theme

から色々とエディタのthemeを変更する事が出来ます。

とりあえず私はド定番でこれを入れる事に。
https://atom.io/themes/monokai

Atom > Preferences > install >「テーマ」を選択して > 検索ボックスに「monokai」と入れて Enter

スクリーンショット 2016-01-06 19.03.33

 

初期設定

Atom > Preferences > setting
から色々とエディタの設定を行う事が出来ます。

スクリーンショット 2016-01-08 16.45.25

Atomはデフォルトでも綺麗なエディタなのですが、今回は私の好みで以下の用にカスタマイズしました。

font

Ricty (リクティ)
https://github.com/yascentur/Ricty

プログラミング用フォント、と銘打ってあるRictyというフォントをずっと使ってるのでこれに切り替えます。

 

font-size

15

rictyが小さめなのでフォントサイズを少し上げます。

 

line-height

1.3

同じく、フォントが小さいので行送りも少し狭めます。

 

追加でチェックを入れた項目

  • 最終行を超えてスクロール
  • Show Indent Guide(インデントガイドの表示)
  • Show Invisible(タブ、半角スペースなどの表示)

上の3項目に追加でチェックを入れます。

 

※言語別(RubyやPHP)の設定を行う方法もあるらしいが、今は使わないので割愛。

 

package

導入したパッケージ

・Autocomplete

コード補完用のプラグインです、最新のアプリならばデフォルトで入って有効になっている模様です。

Autocomplete-package

 

・highlight-line

https://atom.io/packages/highlight-line

現在フォーカスが当たっている行をハイライトしてくれるやつ。sublime的な。

687474703a2f2f692e696d6775722e636f6d2f666133325774722e706e67

 

・Minimap

https://atom.io/packages/minimap

Sublime Textのようにスクロールバーの部分にミニマップを表示させることができます。sublime的な。

68747470733a2f2f6769746875622e636f6d2f61746f6d2d6d696e696d61702f6d696e696d61702f626c6f622f6d61737465722f7265736f75726365732f73637265656e73686f742e706e673f7261773d74727565

 

・minimap-autohide

https://atom.io/packages/minimap-autohide

Minimapを自動で表示、非表示にしてくれるパッケージ。
実際にガリガリコードを書くときはminimapは邪魔なのであると便利。
これはsublimeには無いのでありがたいですね!

68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f6a61796b2f6d696e696d61702d6175746f686964652f6d61737465722f73637265656e73686f742e676966

 

・bracket-matcher

対応する括弧を光らせたり、対応する括弧にジャンプしたりできるやつ。sublime的な(しつこい)
これもデフォルトで入ってました。

 

・highlight-selected

https://atom.io/packages/highlight-selected

選択したテキストが同じファイル内に有る時にそれらをハイライトするパッケージ。
動作的にはSublimeTextそのまんまって感じ。

687474703a2f2f692e696d6775722e636f6d2f4335466e7a7a512e676966

 

・project-manager

https://atom.io/packages/project-manager

Atomはデフォルトだとプロジェクトの管理機能がとても弱いらしいのですが、それを補ってくれるパッケージ。
使用感はSublimeTextのプロジェクト管理とほぼ同じらしいのですが、そもそもsublimeでプロジェクト管理を使ってなかったので、これを期にやってみようと入れてみました。

68747470733a2f2f7261772e6769746875622e636f6d2f64616e69656c62726f64696e2f61746f6d2d70726f6a6563742d6d616e616765722f6d61737465722f70726f6a6563742d6d616e616765722e676966

メニューのOPENでプロジェクトルートを開いて、

Packages > Project Manager > Save Projects でプロジェクトを保存。

あとは ctrl + comm + p でプロジェクトを開けるという感じです。

開いてたタブやファイルを記憶してくれるのが便利ポイントらしいです!

 

その他ざっくりとした使い方はここ
http://qiita.com/hnakamur/items/e23162b1976b4d032eb2

 

・file-icons

https://atom.io/packages/file-icons

アイコンをおしゃれにしてくれる。
別にそれだけなんだけど、意外と見やすくなっていい感じになる。

 

・term3

https://atom.io/packages/term3

ターミナルをタブのひとつとして開いてくれるプラグイン。
プロジェクトを登録しておけば、プロジェクトルートで開いてくれるので便利。

68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f466c6f6f626974732f61746f6d2d7465726d332f6d61737465722f7374617469632f7465726d332e706e67

元々Term2 というpackageが一般的だったみたいですが、まともに使えなくなってしまったらしいのでTerm3 を入れてみました。
キードードショートカットの扱いとかが変わって微妙な使いにくさはある。

とりあえず ctrl+alt+t 現在のペインに新しいタブとしてターミナルを起動 できます。

その他キーバインドの設定等は別記事で。

※ただし肝心のターミナルの挙動はやや不安定。著者は結局iTermを並列で使うように戻しました……m(_ _)m

 

・tag

https://atom.io/packages/tag

687474703a2f2f692e696d6775722e636f6d2f794b4b5a6678412e676966

マークアップ時に </ と入れると前のタグの閉じタグを入れてくれるpackage

sublimeで同様のプラグインを入れてて、それに慣れちゃってたので無いと困る。

 

気になるけどまだ入れてないパッケージ

・Emmet plugin Atom editor

https://atom.io/packages/emmet

簡単な記述でソースコードを生成してくれるパッケージ。
チートシートを見るとわかりやすい。

スクリーンショット 2016-01-08 17.17.11

すごい良さそうだけど、これに慣れ過ぎるのに若干の怖さを覚えているので、導入はとりあえず見送った。

 

・rails-transporter

https://atom.io/packages/rails-transporter

Rails プロジェクト内のファイル移動を簡単にする。
model から関連する controller を開いたり、controller から 関連する helper を開いたり出来るみたい。

687474703a2f2f636c2e6c792f696d6167652f343330353341314a326231372f7261696c732d7472616e73706f727465722e676966

気になるけどrails今がっつり使ってないのでとりあえず様子見。

 

・color-picker

https://atom.io/packages/color-picker

カラーピッカー機能を追加するパッケージ。
色コードを直感的に選、現在のカラーと選択中カラープレビューが違い分かり易くめっちゃ便利らしい!
出力形式もRGB、HEX、HSL、HSV、VECを選択出来るのもよさ気。

68747470733a2f2f6769746875622e636f6d2f74686f6d61736c696e647374726f6d2f636f6c6f722d7069636b65722f7261772f6d61737465722f707265766965772e676966
超メジャーなプラグインだけど、重くなるって聞いたので様子見。 重いって言われてた奴は別でした。

 

入れたけど消した(無効にした)やつ

・Highlight-column

https://atom.io/packages/Highlight-column

カラム位置をハイライトしてくれるやつ。
見やすくなるかと思ったが、思ってた以上に視覚的にうざかったので外しましたw

68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f313235333635392f323336353733362f62363063396239302d613664612d313165332d383038312d6663383735333738333433352e706e67

 

・autocomplete-paths

https://atom.io/packages/autocomplete-paths

オートコンプリートにpathを追加
絶対pathがプロジェクトのルートじゃなく、PCのルートになってしまい、相対パスでしか使いみちが無い。
会社では相対パスなんて殆どつかわないのであんまり使えなかった。

687474703a2f2f73312e64697265637475706c6f61642e6e65742f696d616765732f3134303431312f70356b76696665362e676966

 

・autocomplete-sass

https://atom.io/packages/autocomplete-sass

sass使うなら。私はscssだからダイジョブ。

687474703a2f2f692e696d6775722e636f6d2f317642384264752e676966

 

・pigments

https://atom.io/packages/pigments
色情報に関して様々な機能を提供してくれるパッケージ。
設定等は http://qiita.com/snowsunny/items/f40c3291a580f3215797 ここが詳しい。
とりあえず色の表示の仕方だけdotに変えた。

68747470733a2f2f6769746875622e636f6d2f61626533332f61746f6d2d7069676d656e74732f626c6f622f6d61737465722f7265736f75726365732f7069676d656e74732e6769663f7261773d74727565

※めっちゃ有名で便利なパッケージなのですが、こいつがクッソ重い問題のパッケージだったので泣く泣く無効化に。
min.cssみたいなサービス内CSSを全部まとめてminifyしたようなファイルを開くと一瞬で固まるので使い物にならない。

 

複数のPCで同じパッケージを使えるようにする【要Githubアカウント】

・sync-settings

Atomの設定をクラウド経由(GitHub)で同期させるプラグイン
Mac <-> Winでも同期可能で、一度環境を作ればどのプラットフォームにも同じ環境を展開させられる。

http://qiita.com/T_M/items/0fb0804eb1fd256aac4e

ここにいい感じにまとまってるので、もう少し環境が固まったらやってみたいと思います。

 

まとめ

結局入れたパッケージは殆ど「sublime的な。」になってしまいました。笑
高機能エディタですが、ぶっちゃけソースを書くのにあれもこれもは必要ない場合が多いですよね。

後はできるだけマウスに持ち替えたくないので、次はキーバインドの設定周りを見なおして行きたいと思います。

良いなと感じた点はUIがおしゃれなのと、思いの外パッケージが豊富に用意されていた事。
現在勢いのあるエディタなのでパッケージ開発も盛んな事でしょうか。

ペインの切り替え等も出来るので、ターミナル、エディタ、ファイル管理等をAtomだけで完結さられるようなるのは大きなメリットですね。

デメリットというかマイナスは点はやはりレスポンス。。
どうしてもややもっさりな感じが否めません。これは私のPCが古くてスペック的にキツイせいもあるかもしれませんね。

あとはCSS、HTML、JSなどでUIが構成されてる関係か、パッケージのスタイルや修正が当たるまで
ウィンドウを開いてから少しラグがあったりします。

インストール型のアプリケーション使ってるのに、ちょっとwebのブラウザベースな感じがしてしまうのは私だけなのでしょうか…

なにはともあれ、sublimeもいい加減飽きてきた所だったので、しばらくはAtomを使い倒してみたいと思います!

 

おまけ

iTermみたいにウィンドウが半透明に透けてるのが好みなんじゃー!
という方は以下を参考に。

gheよりソースコードcloneしてきて、設定をちょちょっと変えてリビルドしてあげれば可能なようです。

http://qiita.com/yusugomori@github/items/22db3774f6fa9f0c6553

a5dbe626-815d-e320-e537-d12f71d53204

透け透けがお好き!

なお、私は透け透けにしました(そのせいで描画が重い説)

 

その他、導入にあたって参考にしたサイト様

今注目のテキストエディタ「Atom」の使い方と便利機能まとめ [code部]
http://blog.codecamp.jp/atom_utility/

WordPress編集用にWEB開発エディター「Atom」の初期設定をしてみました [寝ログ]
http://nelog.jp/wordpress-atom

Atom でインストールしている package 一覧 [qiita]
http://qiita.com/iorionda/items/b108e73e51ff40049c60

【超おすすめ!!】Atomのパッケージ、テーマ、キーバインディング、設定を紹介してみる(※随時更新)[qiita]
http://qiita.com/snowsunny/items/f40c3291a580f3215797

初心者のためのテキストエディタ。迷ったら Atom がおすすめ。[Mdesign Works]
http://www.mdesign-works.com/blog/web/atom-text-editor/

Atomとapmを本腰入れて使い始める [qiita]
http://qiita.com/gogotanaka/items/63b5cf173feb7bc8f160

[Atom Editor] 俺の設定とプラグインをさらす[qiita]
http://qiita.com/agektmr/items/4da2c362fef6598fc382

いま入れてるAtomプラグイン(パッケージ)メモ(2015年5月)[きじとら]
http://kijtra.com/article/my-atom-packages/

Atomで最近使っているパッケージ [たけぞう瀕死ブログ]
http://takezoe.hatenablog.com/entry/2015/12/07/105842

 


http://astone.jeez.jp/wp-content/uploads/2016/01/Atom_top-1024x602.jpghttp://astone.jeez.jp/wp-content/uploads/2016/01/Atom_top-150x150.jpgmilksoapTopics
github製のAtomというエディタの存在自体は随分前から知っていたのですが、 やや動作が重い、plugin等が少ない、などだった為いまいち sublime text から乗り換える機会がありませんでした。 しかしここ最近になって、友人達から立て続けにAtom良いよーという話を聞いたので せっかくなのでそろそろ入れてみようと決意。 今回はアプリのインストールから、私が行った設定、 導入したplugin(Atomではpackageと呼ばれる)を紹介します。   更新履歴 最終更新 (2016/01/19) 2016/01/19 入れたpackageを少し修正しました! 2016/01/15 参考サイトに記事タイトルとサイト名を入れました(敬称略)   Atom(アトム エディタ)とは そもそもAtomとはどんなエディタなのでしょうか?wikipediaを抜粋すると以下。 Atom(アトム)は、GitHubが開発したオープンソースのテキストエディタである。 GitHubの共同創業者であるクリス・ワンストラスによって2008年に開始されたプロジェクトだが、同社のビジネスが成功したことでワンストラスが多忙となり開発が一時停止していた。 その後、2011年から開発が再開され、2014年2月26日に招待制のベータバージョンとしてまずMac OS X向けがリリースされた。 同年5月6日、MIT Licenseのもとでソースコードを公開。2015年6月26日にバージョン1.0がリリースされた。 デスクトップアプリケーションだがChromiumをベースとして開発されており、ユーザーインターフェースはウェブ技術であるJavaScript、CSSなどを使ってカスタマイズ可能となっている。 出典: Wikipedia 大きな特徴としては、github制のエディタで、クロスプラットフォームに対応している。 オープンソース化されているので、カスタマイズはpluginの作成が自由である。と言った所でしょうか。 見た目はIntelliJに似ており、β時代は検索が重いなど、パフォーマンスに問題を抱えていましたが、 正式バージョンの1.0ではかなり改善されている模様です。 ただ。やはりsublime textにするとややもっさり感はありますね…   アプリケーションのダウンロード 公式HPより https://atom.io/   日本語化 Atom > Preferences > install > 検索ボックスに「Japanese-menu」と入れてEnter ↓ (※キャプチャが日本語化したあとですみません)   テーマの設定 Atom > Preferences > theme から色々とエディタのthemeを変更する事が出来ます。 とりあえず私はド定番でこれを入れる事に。 https://atom.io/themes/monokai Atom > Preferences > install >「テーマ」を選択して > 検索ボックスに「monokai」と入れて Enter   初期設定 Atom > Preferences > setting から色々とエディタの設定を行う事が出来ます。 Atomはデフォルトでも綺麗なエディタなのですが、今回は私の好みで以下の用にカスタマイズしました。 font Ricty (リクティ) https://github.com/yascentur/Ricty プログラミング用フォント、と銘打ってあるRictyというフォントをずっと使ってるのでこれに切り替えます。   font-size 15 rictyが小さめなのでフォントサイズを少し上げます。   line-height 1.3 同じく、フォントが小さいので行送りも少し狭めます。   追加でチェックを入れた項目 最終行を超えてスクロール Show Indent Guide(インデントガイドの表示) Show Invisible(タブ、半角スペースなどの表示) 上の3項目に追加でチェックを入れます。   ※言語別(RubyやPHP)の設定を行う方法もあるらしいが、今は使わないので割愛。   package 導入したパッケージ ・Autocomplete コード補完用のプラグインです、最新のアプリならばデフォルトで入って有効になっている模様です。   ・highlight-line https://atom.io/packages/highlight-line 現在フォーカスが当たっている行をハイライトしてくれるやつ。sublime的な。   ・Minimap https://atom.io/packages/minimap Sublime Textのようにスクロールバーの部分にミニマップを表示させることができます。sublime的な。   ・minimap-autohide https://atom.io/packages/minimap-autohide Minimapを自動で表示、非表示にしてくれるパッケージ。 実際にガリガリコードを書くときはminimapは邪魔なのであると便利。 これはsublimeには無いのでありがたいですね!   ・bracket-matcher 対応する括弧を光らせたり、対応する括弧にジャンプしたりできるやつ。sublime的な(しつこい) これもデフォルトで入ってました。   ・highlight-selected https://atom.io/packages/highlight-selected 選択したテキストが同じファイル内に有る時にそれらをハイライトするパッケージ。 動作的にはSublimeTextそのまんまって感じ。   ・project-manager https://atom.io/packages/project-manager Atomはデフォルトだとプロジェクトの管理機能がとても弱いらしいのですが、それを補ってくれるパッケージ。 使用感はSublimeTextのプロジェクト管理とほぼ同じらしいのですが、そもそもsublimeでプロジェクト管理を使ってなかったので、これを期にやってみようと入れてみました。 メニューのOPENでプロジェクトルートを開いて、 Packages > Project Manager > Save Projects でプロジェクトを保存。 あとは ctrl + comm +...