もはや僕のMacには欠かせない存在となったAtom。この素晴らしきテキストエディタAtomに入れているパッケージとちょっとしたカスタマイズなどについて、備忘録も兼ねて紹介したいと思います。
Atomとはなんぞ
Atomは、Github製で、パッケージマネージャによるプラグイン追加やテーマの変更可能な、Chromiumベースのテキストエディタです。Chromium、つまりブラウザの技術によって作られているというのがおもいろいところです。なので、js(CoffeeScript)やjson(cson), less(css)といったWebの技術による細かなカスタマイズもできるというあんばい。
僕が入れているパッケージ一覧
2017年6月現在、僕が入れているパッケージを、カテゴリ別に紹介します。
整形系
alignment
=> や : の縦位置を揃えてくれます。
注意点として、Atomはいつからかリガチャ（合字）をサポートしはじめました。これによって、「fi」などが1文字として扱われるようになりました。このため、alignmentにずれが生じます。
以下の章でにリガチャを無効にする設定を紹介しますので、併せてご利用ください。
キーバインド: command + control + A
atom-beautify
コードのインデントなどをよしなに整形してくれます。htmlの場合は下記 tag との併用がいい感じです。
japan-util
全角<=>半角変換、ひらがな<=>カタカナ変換など。半角変換の際、ascii onlyのオプションがあるのが採用の決め手。
sort-lines
行を昇順・降順にソートしてくれます。
キーバインド: F5
tabs-to-spaces
tab<=>space 変換をしてくれます。
オートコンプリート・補完系
autocomplete-js-import
JavaScriptのrequireやimportの補完をしてくれます。autocomplate-paths との違いは、js専用なことと、node_modulesやpackage.jsonから抽出してきてくれることです。
autocomplete-paths
パス入力の際に、存在するフォルダやファイルのパスをサジェストしてくれます。
tag
htmlの閉じタグを出力してくれます。まとめて出力して atom-beautifyすると気持ちいい。
キーバインド: command + option + .
wordpress-autocomplete
WordPressのテンプレートタグを補完してくれます。
カーソル系
expand-selection-to-quotes
クォーテーションやダブルクォーテーション内の文字列を選択してくれます。
キーバインド: control + ' （ control + shift + 7 ）
エンコード系
auto-encoding
ファイルを開く時にエンコードを自動的に判別してくれます。
convert-to-utf8
UTF-8に変換してくれます。
言語系
language-pug
pug（旧jade）の解釈ができるようになります。シンタックスハイライトや command + / によるコメント化ができるようになります。
language-vue
vueコンポーネントの解釈ができるようになります。
language-babel
ES201x やJSXの解釈ができるようになります。トランスパイルも。
tablr
csvをテーブル形式で表示・編集できます。
linter系
linter, linter-ui-default
各種linterを使うために必要なパッケージ。
以下各種linterの一覧。Atom公式のもののみ使っています。
- linter-csslint
- linter-eslint
- linter-htmlhint
- linter-php
- linter-pug
- linter-sass-lint
カラー系
color-picker
カラーインスペクタから色を選んでHEXやRGBなどさまざなま形式で貼り付けできます。
キーバインド: command + shift + c
pigments
カラー指定のある行にその色の印をつけてくれます。
ターミナル
platformio-ide-terminal
現在のプロジェクトをカレントディレクトリとしてAtom場でターミナルを開けます。
プロジェクト管理系
project-manager
プロジェクトの追加や削除をよしなにしてくれます。
recent-projects
最近使ったプロジェクトの履歴を分かりやすく表示、起動してくれます。
キーバインド: command + shift + o
ユーティリティ
busy-signal
パッケージのタスクの実行状況をアイコンで示してくれたり、履歴を表示したりしてくれます。多分何かのパッケージの依存で入った模様。
file-icons
ファイルのアイコンがかわいくカラフルになります。
intentions
linterを使うために必要なパッケージ。
japanese-menu
Atomのメニューの日本語化をしてくれます。
minimap
minimapを表示してくれます。
minimap-autohide
minimapを自動的に表示・非表示してくれます。
show-ideographic-space
全角スペースを可視化してくれます。
split-diff
2つのファイルの差分を表示してくれます。
キーバインド: control + option +
symbols-tree-view
変数や関数を一覧で表示しれくれます。また、クリックでそこまで移動できます。
キーバインド: control + option + o (
wordpress-autocompleteとかぶってる…。）
FTP/FTPS/SFTP
Remote-FTP
AtomからFTP/FTPS/SFTP接続するパッケージ。別アプリを開く事なくアップロードや同期が行えます。
キーバインド:
- toggle: control + option + o
- connect: control + option + c
- disconnect: control + option + c
Atomのちょっとしたカスタマイズ
いくつか、ちょっとしたカスタマイズをしているので、紹介します。
Atomを再起動するキーバインドを追加
command + control + r でAtomを再起動する設定です。
~/.atom/init.coffee に以下を記述します。
# add atom restart
atom.commands.add 'atom-workspace', 'custom:restart', ->
atom.restartApplication()
今度は ~/.atom/keymap.cson に以下を記述します。
# restart atom
'atom-text-editor':
'cmd-ctrl-r': 'custom:restart'
Tree Viewの表示・非表示が効かなくなった！時の対処法
僕の環境（Mac）では、いつからか command + \ でTree Viewのトグルができなくなりました。日本語入力をオンにして、command + option + \ なら動きます。
ググってみたところ同じような症状が数件見当たりました。そこで、下記設定を追加することでしのいでいます。同じ症状でお困りの方はお試しください。
~/.atom/keymap.cson に以下を記述します。
# Treatment when "tree-view:toggle" key binding no longer works
'.platform-darwin':
'cmd-\¥': 'tree-view:toggle'
リガチャを無効にする
Atomはリガチャ（合字）をサポートしているため、「fi」などの文字を1文字として扱うようになりました。（フォントによるかもですが）これにより、いろいろ不具合が生じるので、無効にしました。その設定です。
~/.atom/styles.less に以下を記述します。
// disable ligature
atom-text-editor {
-webkit-font-feature-settings: "liga" off, "calt" off;
}
パッケージをちゃんと管理する
apm star でスターをつけたパッケージを一括でダウンロードできたり、ローカルのパッケージに全てスターをつけたりできるわけですが、パッケージ管理についてこんなお悩みはありませんか？
- 現在ローカルにあるパッケージは
starして、ローカルにないパッケージを全てunstarしたい - 逆に、
starをつけてないローカルのパッケージを削除し、starをつけているパッケージはインストールしたい
つまり、ローカルまたはスターのどちらかを基準にパッケージを同期したいというわけです。
ここで登場するのが 「Atom Package Diff」というツール。
npmでインストールします。
$ npm install -g atom-package-diff
apd コマンドが使えるようになります。
apd status でスターとローカルのパッケージの状態を把握できます。
apd sync --local でインストール済みパッケージに全てスターをつけて、それ以外のスターを削除してくれます。
apd sync --remote でスターされたパッケージを全てインストールし、スターされていないパッケージを全てアンインストールしてくれます。
このツールのおかげで、パッケージ管理の悩みは全て解決してくれました。作者様、ありがとうございます。
Atomの設定を複数のマシンで共有する
地道に.atomフォルダをGithub管理するのがよいと思います。.atomフォルダには最初から.gitignoreが存在します。必要に応じて追記するなどしてください。
おわりに
僕は開発のほぼ全てAtomで行っています。なので、できる限り快適な環境にしたいと日々考えておりますが、よくある悩みとして、便利にしようと設定ばかりやってて肝心な制作がなかなかできないという…。webpackを導入したての時もそうでしたが、制作 = 設定ファイルを作成するお仕事、みたいな状況。Atomの設定やパッケージの見直しも、ほどほどにするのがよいと思います。実際、Atomの設定おじさんになっていた頃は、なんでもかんでもAtomでやろうと思っていましたが、「実際Atomじゃなくてよくね？」っての結構ありました。Webを観る、とか。
