Sublime Text の利用パッケージと設定 2015で予告したとおり Sublime Text に近い環境を Atom で構築してみる。対象は現時点の最新 Atom v1.2.4 とする。

パッケージ管理

Atom は標準でパッケージ管理機能が組み込まれている。追加と削除、検索、設定も GUI ベースなのでわかりやすい。

紹介しているパッケージを検索する場合はメニューから Atom > Preferences を選ぶと Settings タブが表示される。その左メニューから Install を選択して検索窓にパッケージをコピペした後 Enter キーを押す。

検索結果にはパッケージ情報と共にダウンロード数も表示されるため、評価の目安になる。パッケージ情報の Install ボタンを押すことでインストールできる。

検索結果として既にインストールしたパッケージも混在して表示される。ここから設定変更とアンインストールを実行できる。同一キーワードで検索ヒット = 類似パッケージとみなせるので、もし既存より好ましいものを見つけたなら、同じ画面で入れ替えも可能。実に便利だ。

autocomplete-paths

パスの入力補完を提供してくれるパッケージ。Sublime Text の AutoFileName に相当する。

• autocomplete-paths
• atom-community/autocomplete-paths

入力補完は 引用符のない箇所でも反応 する。そのためコメントやプログラミング言語ではないファイルでのパス記述がはかどる。

あいまい検索 にも対応している。例えば ./a のように入力した場合、そのファイルと同一階層にある a を含むファイルとフォルダが補完候補として表示される。適当に入力を開始して候補をみてから絞り込めるのが便利。ファイル、フォルダの存在確認にも有用。

color-picker

Atom にグラフィック ツールのようなカラー ピッカー機能を追加するためのパッケージ。

• color-picker
• thomaslindstrom/color-picker

カラー ピッカーはエディタのコンテキスト メニューから呼び出す。メニューから Color Picker を選択することで表示され、上部のテキスト部分をクリックすることでエディタ上の色指定テキストが貼り付けられる。

また、CSS や Stylus 上の色指定テキストに対してカラー ピッカーを呼び出すと、その色が入力された状態で表示される。それを基準に明暗や RGB や HEX などの表記を変更して元のテキストを置換できる。

docblockr

Doxygen や ESDoc のようなコード ドキュメント生成ツール向けの書式指定コメントを自動生成するためのパッケージ。Sublime Text の DocBlockr に相当する。

• docblockr
• nikhilkalige/docblockr

コード中の変数や関数の真上で /** と入力した後に Enter を押すとコメントが自動生成される。言語による書式の違いにも対応。JavaScript などでは代入値による型の推測もおこなわれる。以下は生成例。

/**
 * [str description]
 * @type {String}
 */
var str = 'My String';

/**
 * [num description]
 * @type {Number}
 */
var num = 1024;

/**
 * [test description]
 * @param  {[type]} str [description]
 * @param  {[type]} num [description]
 * @return {[type]}     [description]
 */
function test( str, num ) {
}

Sublime Text の DocBlockr と異なり IME の問題はない。パッケージからインストールしたものをそのまま利用できる。

emmet

HTML や CSS の記述を効率化するための Emmet スニペットを提供するパッケージ。

• emmet
• emmetio/emmet-atom

スニペットに続けて TAB を押すことで HTML/CSS テキストが展開される。また background-color を入力補完してくれるのも便利。この補完はあいまい検索になるので、うろ覚えのプロパティ名を確認するのにも役立つ。

Emmet 自体の機能やスニペットについては Emmet Documentation を参照のこと。多数のエディタで対応されて広く普及しているため詳細は割愛。

余談。これまで HTML5 テンプレート用スニペットを html:5 としていたのだが、最近 ! で書けることを知った。Cheat Sheet には Alias of html:5 とある。このスニペットは多用するので短縮はありがたい。

file-icons

Atom のサイドバーやタブへファイル種別に応じたアイコン表示を提供するパッケージ。

• file-icons
• DanBrooker/file-icons

同じ機能をもつパッケージは他にもあるけれど、今のところ外観ではこれが好み。対応種別も多く Web フロントエンド開発のように多様なファイルを扱うプロジェクトでも大抵のファイルは区別してくれる。

アイコンがフォントとして定義されているのが面白い。Atom の Web アプリっぽい側面がかいま見えるようだ。フォントには標準の他、Font Awesome や IcoMoon も付属しており、User Stylesheet でそれらのアイコンを割り当てるとか、対応するファイル種別を追加するなどのカスタマイズもおこなえる。

highlight-selected

選択されているテキストと同じものを Sublime Text のようにまとめて強調する機能を提供するパッケージ。

• highlight-selected
• richrace/highlight-selected

プログラミングにおいて変数などの使用状況や Typo を確認するなど、地味ながら有効である。

keybinding-cheatsheet

Atom のキーボード ショートカット一覧を表示するパッケージ。

• keybinding-cheatsheet
• jkasky/atom-keybinding-cheatsheet

一覧の絞り込み選択も可能。ただし残念なことにキーワードとして指定できるのはコマンドだけ。あいまい検索をサポートしてくれるとありがたいのだが。

Atom を本格的に使い始めて日が浅いため、たまに表示して眺めている。このパッケージにより ⌘ + D で Sublime Text みたいに同一複数キーワードの一括編集が実行できることを知った。

language-babel

ES201x JavaScript、React JSX、Flow の強調表示やコンパイル機能を提供するパッケージ。

• language-babel
• gandm/language-babel

Atom は標準で ES2015 (ES6) のキーワード強調に対応しているが JSX のタグなどを強調したい場合、このパッケージが必要。React 関係なら他に react もあるが、language-babel は JSX で JavaScript を入れ子にするときの波括弧なども強調してくれるのでこちらを採用。

babel/babel-sublime と異なり、このパッケージは Babel 運営ではなく個人開発のようだけど作者である Graham 氏は Babel 関係者なのだろうか？機能は実用十分だが、個人だと Babel の変更に追従するだけの開発リソースを維持できるか心配である。

linter

linter は様々な言語の構文チェックを実施するためのパッケージ。

• linter
• atom-community/linter

このパッケージがランタイムとなり、言語ごとの linter-XXXX プラグイン が動作する仕組みになっている。

linter-eslint

linter-eslint は ESLint を利用した JavaScript の構文チェッカー。このパッケージは使用するための準備や設定をミスると JavaScript を開くたびにエラーがおきて厄介なため、細かく解説する。

• linter-eslint
• AtomLinter/linter-eslint

パッケージを使用する前に Node と ESLint を用意する。私は Node を Homebrew で管理している。hokaccha/nodebrew や公式インストーラを利用してもよい。ESLint はプラグインも含めてグローバルにインストールしている。

$ npm i -g eslint eslint-plugin-react

これらを用意した後、Node と ESLint のパスが通っていることを確認する。コマンドライン実行してバージョン情報が表示されれば OK。エラーになった場合は環境変数を見直すなどして、パスを通しておくこと。

$ node -v
v5.1.0
$ eslint -v
v1.10.1

準備ができたら linter-eslint の設定をおこなう。以下は私の設定とその解説。

設定	値	解説
Disable using .eslintignore files	✓	.eslintignore を無効にする。この定義ファイルを使うことはなさそうなので無効にしておく。
Disable when no ESLint config is found (in package.json or .eslintrc)	✓	ESLint 設定がない場合、構文チェックを無効にする。設定がないときに想定外の動作をされたら嫌なので無効にしておく。
ESLint Rules Dir		ESLint の追加ルールを読み込む対象となるディレクトリのパス。ESLint CLI でいう --rulesdir のことだと思われる。使用しないので空欄。
.eslintrc Path	/Users/XXXX/.eslintr	ESLint 設定ファイル .eslintrc のパス。私はホーム ディレクトリ直下に置いている。なお ~/ のような略記はエラーになるためフルパスで入力すること。
Global Node Installation Path	/usr/local	グローバルにインストールされた Node のパス。パスは解説どおり npm get prefix で取得可能。初め、Node のパスとあったので which node から取得したフルパスを設定したらエラーになってしまった。
Lint HTML Files		HTML ファイルのチェックを有効にする。追加プラグインが必要なうえチェックを使うことはなさそうなので無効。
Show Rule ID in Messages	✓	構文チェックにヒットした場合、ESLint のルール ID を表示する。どのルールで問題になったかを知りたいので表示。
Use global ESLint installation	✓	グローバルにインストールされた ESLint を使用する。Sublime Text とグローバルの ESLint を共用しているため、使用する。gulp や npm-scripts からプロジェクトのローカル ESLint を実行しているのであれば、この設定をチェックせず、そちらを使うようにしたほうがよいだろう。

環境と設定が適切ならば、構文チェックで問題となった箇所の情報がウィンドウ下部にポップアップされるはず。パッケージ自体のエラーが起きた場合はウィンドウ右上にエラー メッセージが表示される。ひとつでも設定に問題があるとエラーになるうえ、メッセージはパッケージのスクリプトに関するエラー情報なので原因を特定しにくい。

私は雑に設定してエラー解決に苦労したが、説明をよく読んで慎重に設定すれば特にハマりどころもないはず。

oceanic-next

Sublime Text で愛用していた Color Scheme の Atom 版。Atom では Theme を UI Teme、Color Scheme を Syantax Theme と呼ぶらしい。

• oceanic-next
• smlombardi/oceanic-next-syntax

配色は Sublime Text のものと同様で違和感もない。ちなみに UI Theme は Atom 標準の one-dark-ui にしている。標準ながら Flatland や Cobalt2 みたいなフラット系でかっこいい。

open-recent

Atom の File メニューに Open Recent を追加するパッケージ。

• open-recent
• Zren/atom-open-recent

Open Recent とは、最近開いた項目の選択機能である。他のエディタだと標準で用意されていることの多い機能だが Atom は別パッケージになっている。いずれ標準化されそうな気もするけど。

標準設定だと Open Recent で選択した項目は別ウィンドウに開かれる。これを現在のウィンドウに変更する場合はパッケージ設定で Replace Project On Open Directory を有効にすればよい。私はなるべくウィンドウを増やしたくないのでそうしている。

pigments

色指定テキストの背景を対応する色で強調表示してくれるパッケージ。Sublime Text の Color Highlighter に相当する。

• pigments
• abe33/atom-pigments

対象ファイルを変更する場合は Supported Filetypes へ明示的に拡張子を指定すること。私は面倒なのでそのままにしている。

強調方法を背景以外にすることも可能。私は標準の background が最もわかりやすいと感じる。外観は dot のほうが好みだけど、文中に色指定があると後続のテキスト上にかぶさって邪魔なので却下。

Stylus

Stylus の構文強調とスニペットを提供するパッケージ。

• stylus
• matthojo/language-stylus

私は AltCSS に Stylus を採用しているので必須。機能は構文強調しか利用していない。スニペットは Emmet のもので十分。

余談。これと Sublime-Style-Column-Selection は他のパッケージと異なり名前が大文字で開始されている。そのため恐らく辞書順ソートしているであろう Packages などの並びで先頭のほうに居座ってうっとおしい。

大文字・小文字を区別せずソートするか、パッケージ名に一貫したルールを強制するなどの対応を希望する。

Sublime-Style-Column-Selection

Sublime Text でおなじみ、マウス操作によるテキストの矩形選択を提供するパッケージ。

• sublime-style-column-selection
• bigfive/atom-sublime-select

パッケージ情報に入力方法が掲載されておらず、たまにしか使わない Windows での操作方法を忘れるので以下にメモっておく。

• OS X
  • ⌥ を押しながらマウスをドラッグ移動
• Windows
  • Ctrl を押しながらマウスをドラッグ移動

Windows の動作は VMware FUSION 上の環境で試した。そのため ⌘ が Ctrl に変換されて渡される。おそらく素の Windows でも Ctrl で矩形選択になるはず。

その他

その他、気になることや備考などをまとめる。

複数環境でパッケージのインストール設定を共有する

複数の環境で Atom を利用する場合、パッケージのインストール設定を共有したくなる。そんなときは apm list コマンドで共有元のパッケージ一覧をファイル出力し、

$ apm list --installed --bare > apm.txt

共有先で一覧をもとに ‘apm install’ コマンドを実行することでパッケージを一括インストールできる。もちろん Windows でも OK。Atom をインストールすると自動的に apm コマンドが登録されるため、Windows 環境ならコマンド プロンプトや Power Shell から実行可能。

$ apm install --packages-file apm.txt

以下、参考記事。

• ATOM - インストールされてるpackageをgitで管理したい
• Atomの設定を同期するsync-settings

後者の記事では sync-settings を利用して Atom 自体の設定も共有する方法が紹介されている。初期設定は面倒だが、いちど実行しておけばこちらのほうがよさそう。設定を頻繁に変更するなら検討する。

過去に外部パッケージ提供されていたもので標準化された機能

古い Atom パッケージ紹介記事を読むと現在では標準機能に取り込まれたものが散見される。それらをインストールすると問題が起きることもあるため、私が調べた範囲でまとめておく。

• remember-session
  • Atom を再起動したとき、開いていたファイルの状態などを復元してくれるパッケージ
  • core への取り込みにより DEPRECATED
• japanese-wrap
  • マルチバイト文字を含むテキストの改行を適切に処理するためのパッケージ
  • 日本語などで文章を書く場合に重宝していた
  • Atom 1.2 における CJK 改行対応により不要
  • 関連 : ATOM 1.2からCJKのSoft Wrapが公式対応されたのでjapanese-wrapのパッケージが必要なくなりました。 - Qiita

Developer Tools

Atom の設定やエラー UI テキストをコピーしたくなったり、User Stylesheet でカスタマイズするために UI 構造を知りたくなった場合は Developer Tools を呼び出すとよい。ショート カットキー は OS X が ⌘ + ⌥ + I、Windows なら Ctrl + Alt + I になる。

機能は Chrome の Developer Tools と一緒なので、特に触れない。

JavaScript 部分は Source Maps を同梱しているのだろうか、Sources をみると元の CoffeeScript によるコードが復元された状態で読める。ブレークポイントも貼れるので、Electron アプリの動作を学ぶ参考資料としてもよい。

まとめ

Sublime Text の開発が停滞する一方、Atom は頻繁に機能強化されているため、過去に何度か乗り換えを検討したことがある。しかし全体的に動作がモッサリしているとか、数 MB ほどのファイルでもエラーになるなどの問題から踏みきれずにいた。

しかし v1.1 あたりからパフォーマンスが大幅に向上し、大きなファイルを開くときのエラーも解決するなど、懸念が一気に解決された。また開発者として Electron に触れるうち、その実用例としても Atom に注目せざるを得なくなった。Electron アプリで実現したい機能があるとき、Atom のリポジトリはとても参考になる。

以上を踏まえ、Sublime Text とほぼ同等の環境を構築してみた。ここ数日、業務のプログラミングを Atom でこなしてみたが特に不満もない。むしろ Git や Markdown 対応、強力な入力補完など Sublime Text を上回っていると感じた部分もある。

というわけで本格的に Atom へ乗り換えようと思う。最後に Atom で特に気に入った機能を列挙する。

• Git 対応
  • 標準で Git リポジトリを考慮した UI になっている
  • ファイルを追加・変更したとき、ツリービューでフォルダも強調表示してくれる
  • 行番号横とステータスバーに変更状態を通知してくれる
  • ツリービュー上でリポジトリとそれ以外のフォルダが異なるアイコンになって識別しやすい
  • ツリービュー上で .gitignore に設定したファイルとフォルダが異なる色で表示されて識別しやすい
• inter のメッセージ表示
  • ステータスバーだけでなく、エディターの当該部分にもバルーンを表示してくれる
  • 見た目もかっこよい
• Markdown 対応
  • リアルタイム プレビューは便利
  • プレビューは Atom 内で分割表示されるため、ウィンドウを増やさずに済む
• ECMAScript 対応
  • 標準で ES6 構文の強調や補完が効く
• パッケージ管理
  • 組み込みになっているので操作や設定が Atom 内で完結する
  • パッケージ一覧を標準で export/import する仕組みがあって便利
  • パッケージ設定が GUI 化されており、わかりやすい
  • パッケージ情報に Web サイトのリンクやダウンロード数が掲載されており、採用可否の目安として有用