【Mac】GitHub製エディター Atomのインストール #Mac

Atomをインストールしたのでそれのメモ

Atomの紹介

特に理由はないですけど、みんな大好き GitHub が作ったエディターでナウいらしいので使ってみました。

こんなことができるらしいです。

Markdownのプレビューが標準で付いている
パッケージなどがGUIで用意されている
パッケージが豊富
デザインがCSSで変更できる

ちなみに Node.jsでできているらしいです。

ではインストールから僕好みの設定までを書いていきます。

インストール

brew caskを使っている方は一行のコマンドでインストールできます。

% brew cask --version
0.50.0
// atomがインストールできるか確認
% brew cask search atom
==> Exact match
atom
// インストール
% brew cask install atom
==> Downloading https://atom.io/download/mac
######################################################################## 100.0%
==> Symlinking App 'Atom.app' to '/Applications/Atom.app'
==> Symlinking Binary 'apm' to '/usr/local/bin/apm'
==> Symlinking Binary 'atom.sh' to '/usr/local/bin/atom'
🍺  atom staged at '/opt/homebrew-cask/Caskroom/atom/latest' (11163 files, 234M)

これで終了です。

brew caskを使っていない人はAtomよりパッケージをダウンロードしてくださいませ。

ちなみに今回インストールしたバージョンは0.192.0です。

では設定をしていきます。

パッケージインストール

とりあえず以下の要件を満たせるようにしてみます。

vimのキーバインド
jsonファイルのスニペットなどの対応
日本人なので日本語対応

少ないですけど、最低限できればいいかなと。

他にもいろいろあるらしいですけど、とりあえず。

vimのキーバインド

ここにありました。

atom/vim-mode

僕はCUIが大好きなので、まずはCUIの紹介から。

CUIでのインストール

なにやら Atomをインストールすると一緒にapmというコマンドも使えるようになり、それを使ってパッケージをインストールするらしいです。

# apmが入っているか確認
% apm --version
apm  0.157.0
npm  2.5.1
node 0.10.35
python 2.7.8
git 2.3.2
# vim-modeのインストール
 apm install vim-mode
Installing vim-mode to /Users/${User名}/.atom/packages ✓

でインストール完了かと。

インストールできたらview -> Reloadを使って Atomをreloadしてください。

そうすればvim-modeのキーバインドが使えるようになります。

GUIでのインストール

Cmd + ,でSettingsのページを開いてインストールタブをクリックしてください。

すると以下のページが開かれます。

(CUI編でインストールしてしまったので、ちょっと見た目が違うかと...)

で検索ボックスにvimなりワードを入れて少し待つと上記のように検索結果が出てくるとおもいます。

そしたらInstallと書かれているボタンを押してもらえればインストールできるかとおもいます。

jsonファイルのスニペットなどの対応

GUIとか分けて説明すると冗長的なので、インストールするパッケージだけ紹介したいとおもいます。

atom jsonで検索すると以下の二つのパッケージが有名どころっぽいです。

language-jsonの方がatom謹製らしいのでそちらをダウンロードしたいとおもいます。

と思ったらlanguage-jsonはすでに導入済みなので（標準でインストールされています）、pretty-jsonをインストールしたいとおもいます。

標準パッケージがあるのに、結構な方がインストールされているので僕もインストールしたいとおもいます。

% apm search pretty-json
Search Results For 'pretty-json' (29)
├── pretty-json Format JSON (21485 downloads, 129 stars)
├── pretty-pastels-syntax Pastels on Dark with a vengeance (58 downloads, 2 stars)
├── jsonpp JSON pretty printer (1249 downloads, 4 stars)
├── base16-pretty-dark Forked Base16 dark theme for Atom w/ some small changes (139 downloads, 0 stars)
├── language-json JSON language support in Atom (62054 downloads, 21 stars)
├── atom-json-escape A short description of your package (436 downloads, 2 stars)
├── atom-yamljson Simple YAML<->JSON converter (66 downloads, 2 stars)
├── jsonlint JSON Lint reports for your Atom editor (4380 downloads, 9 stars)
├── linter-jsonlint Lint JSON on the fly (2371 downloads, 60 stars)
├── geojson-preview Preview geojson file in your text editor! (585 downloads, 4 stars)
├── atom-prettify Prettify your HTML (5408 downloads, 20 stars)
├── escape-utils Encode/decode URLs, Base65 or escape Html entites (future: JS/JSON, Base32/Base16, BinHex, Xml-Entities). (758 downloads, 9 stars)
├── atom-beautify Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, and SQL in Atom (139820 downloads, 558 stars)
├── language-json5 JSON5 language support in Atom (32 downloads, 2 stars)
├── chameleon-dark-syntax Syntax theme for HTML, CSS, LESS, SASS, SCSS, JavaScript and JSON (743 downloads, 3 stars)
├── xeta-syntax A custom syntax theme based on Peacock theme for PHP, HTML, CSS, SCSS, LESS, JavaScript, JSON, YAML, Markdown, Python, Ruby, SQL, CoffeeScript and XML. (909 downloads, 2 stars)
├── chester-atom-syntax A pretty Atom syntax theme based on Lonely Planet colours (221 downloads, 2 stars)
├── ristretto-syntax Atom dark syntax theme heavily inspired by espresso-libre. (16 downloads, 2 stars)
├── bemjson-snippets A lot of BEMJSON Snippets (33 downloads, 0 stars)
├── language-jsoniq JSONiq & XQuery support in Atom (65 downloads, 1 star)
├── language-hjson Hjson language support in Atom (11 downloads, 1 star)
├── apm-publish Publish apm packackes from atom (145 downloads, 1 star)
├── lychee-theme A port of chee's emacs theme (363 downloads, 1 star)
├── tron-theme Adaption of Tron Legacy theme for Atom (1297 downloads, 0 stars)
├── language-twig Twig support for Atom. Several languages supported. (1614 downloads, 7 stars)
├── php-twig Twig support for Atom. (7290 downloads, 31 stars)
├── suranyami-light-syntax Suranyami light syntax theme (304 downloads, 0 stars)
├── http-post A simple requestor test web requests. (185 downloads, 1 star)
└── language-ipynb IPython notebook language support in Atom (190 downloads, 4 stars)

Use `apm install` to install them or visit http://atom.io/packages to read more about them.
% apm install pretty-json
Installing pretty-json to /Users/${User名}/.atom/packages ✓

またreloadしてもらってCmd + Nで新規ファイルを作成して.jsonの拡張子をつければjsonファイルと認識されます。

ある程度入力した後にpackage -> Pretty JSON -> Prettifyを選択すれば、jsonファイルとして整形されるとおもいます。

日本人なので日本語対応

最後に日本語対応したいと思います。

どうやら Atomは日本語対応していないらしく、改行されないなどが起こります。

ということでまずは日本語用ワードワラップをしてくれるraccy/japanese-wrapをインストールします。

% apm search japanese-wrap
Search Results For 'japanese-wrap' (30)
├── japanese-wrap Word wrap for Japanese text (19263 downloads, 166 stars)
├── japanese-zen-han-convert (Japanese Chars) Zenkaku and Hankaku convert mutually. (333 downloads, 6 stars)
├── japanese-menu メニューバーとコンテキストメニューを日本語化します。 (1669 downloads, 11 stars)
├── japanese-dictionary (87 downloads, 1 star)
├── wrap An Atom package that does wrapping right. (51 downloads, 0 stars)
├── wrap-lines Wrap lines similar to Vim's 'gq' (958 downloads, 3 stars)
├── wrap-selection Package to wrap block or multiple blocks of the code in text you write. (77 downloads, 3 stars)
├── soft-wrap-indicator Adds an indicator to the status bar that lights up if the active editor has soft wrap enabled (425 downloads, 7 stars)
├── wrap-guide Displays a vertical line at the 80th character in the editor. This packages uses the config value of `editor.preferredLineLength` when set. (75892 downloads, 14 stars)
├── AtomicChar Word wrap for non-monopace texts, including Asian ones (144 downloads, 4 stars)
├── auto-panes Automatically open corresponding files in separate panes. Automatically save and close files unrelated to task at hand. (58 downloads, 0 stars)
├── swap-panes Move panes right, left, up, down, next or previous (313 downloads, 15 stars)
├── move-panes Move panes right, left, up, down, next or previous (551 downloads, 19 stars)
├── atom-jaco Japanese string and charactor converter. (49 downloads, 1 star)
├── resize-panes Resize panes by enlarging or shrinking them (3183 downloads, 65 stars)
├── dict-en2ja look up a selected English word in Japanese dictionary (48 downloads, 0 stars)
├── toggle-invisibles Toggles the display of invisible characters and/or the wrap guide (418 downloads, 4 stars)
├── omni-ruler Add multiple rulers/wrap guides (278 downloads, 6 stars)
├── HyperlinkHelper Wraps selected text as a link with set href attribute (37 downloads, 0 stars)
├── ruby-string-interpolation Keypress handling for # to wrap the selection in interpolation (882 downloads, 5 stars)
├── maximize-panes Maximize panes to occupy the entire window without closing other panes (548 downloads, 19 stars)
├── erb-helper ERB Helper makes it easy to insert and wrap ERB tags with Atom. (847 downloads, 6 stars)
├── razor-atom-syntax-theme Based on base16 tomorrow dark theme for Atom, with some slight changes (removed underline, changed wrap and indent colour) (77 downloads, 0 stars)
├── pane-move-plus Can has move your panes from side to side. (411 downloads, 2 stars)
├── pane-manager Set your panes layout, move your files between them, and other useful pane-related stuffs. (259 downloads, 1 star)
├── webview-pane A short description of your package (112 downloads, 1 star)
├── numbers-on-a-pane Display numbers on each pane for faster cmd-(1..9) jumping (320 downloads, 1 star)
├── pane-split-moves-tab Pane:split moves tab to new pane (14 downloads, 0 stars)
├── pane-layout-plus Can has switch the layout of your panes. (1182 downloads, 13 stars)
└── mathjax-wrapper MathJax in Atom (616 downloads, 5 stars)

Use `apm install` to install them or visit http://atom.io/packages to read more about them.

% apm install japanese-wrap
Installing japanese-wrap to /Users/${User名}/.atom/packages ✓

インストール後、Settingsを開いて以下の項目のチェックと任意の数字を入力してください。

Preferred Line Lengthを設定（とりあえず70にしてみました）
- default : 80
Soft Wrapにチェックをつける
- default : false
Soft Wrap At Preferred Line Lengthにチェックをつける
- default : false

これでまたreloadして対応されたことを確認してください。

これでとりあえず僕がやりたかった設定は終了になります。

他にいいプラグインがあったら同じように紹介していきたいと思います。