もはや僕のMacには欠かせない存在となったAtom。この素晴らしきテキストエディタAtomに入れているパッケージとちょっとしたカスタマイズなどについて、備忘録も兼ねて紹介したいと思います。

Atomとはなんぞ


Atom is a text editor that’s modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.

出典: atom.io

訳: 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/style.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を観る、とか。