【Atom Editor, file-icons】特定パターンのファイル名のみアイコンと色を変える

# :warning: OUTDATED

file-icons 2.0.0でカスタマイズ方法が変わったので、[こちら](http://qiita.com/ymtszw/items/e6648d9ef1d3b000277a)を参照して下さい。

以下はfile-icons 1.7.25までの内容です。

# file-icons
[Atom Editor](https://atom.io)では[file-icons](https://atom.io/packages/file-icons)というpackageを入れることで拡張子に応じてファイルアイコンと色を変えられます。かなり人気のパッケージです(現在100万DL超え)。

<a href="https://i.github-camo.com/def93226a57aec0c1ceeb66bcbdaa0fdec0a4c29/68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f44616e42726f6f6b65722f66696c652d69636f6e732f6d61737465722f66696c652d69636f6e732e706e67"><img src="https://i.github-camo.com/def93226a57aec0c1ceeb66bcbdaa0fdec0a4c29/68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f44616e42726f6f6b65722f66696c652d69636f6e732f6d61737465722f66696c652d69636f6e732e706e67" width="320px"></a>
(設定で`Coloured`オプションをオンにすることで、左列のように色がつきます)

file-iconsを入れない、デフォルトの状態はこんな感じ。(新規ファイル・更新ありファイルのハイライトはデフォルトです)
![default](http://www.modshrink.com/wp-content/uploads/2014/04/atom_editor.png)
(画像[元サイト](http://www.modshrink.com/2014/04/08/235638))

適用するとこんな感じです。
![iconed](http://blog.suginoki.xyz/images/Atom/plugin/file-icon.PNG)
(画像[元サイト](http://blog.suginoki.xyz/atom/2016/02/25/Atom-Plugins.html))
もちろんツリーだけでなくタブにも適用されます。
テーマによってはタブのアイコンは省略されますが、`Force Show`オプションで強制挿入もできます。

Atomのようなタブ形式のエディタでは、ちょうどタブブラウザでFaviconがパッと見の識別に一役買っているのと同様、**アイコンをこのようにわかりやすくしておくと視認性が向上**します。

# テストファイルだけアイコンの色を変更
確かIntelliJ IDEAだったと思うのですが、Play-Scalaなプロジェクトをメインで開発していたとき、テストコードファイル(specs2ではたいてい`test/**/*Spec.scala`というファイル名)だけアイコン色が緑色に表示されて、実装コードのファイルと容易に区別できるようになっていました。

**タブエディタで実装コードとテストコード両方開いているとき、この区別は非常に便利**でした。

現在はElixirのプロジェクトをメインで開発していますが、Elixirではテストファイルは`*_test.exs`というファイル名になります(ExUnit)。スクリプトファイルになっているので拡張子が実装コードの`*.ex`とは違っています。

file-iconsだと、`*.ex`と`*.exs`はデフォルトで区別されていて、前者は濃い紫、後者は薄い紫です。しかし視認性は低く、遠目には区別できません。

幸い、file-iconsはユーザスタイルシートでデフォルトの色を上書きできます。

## `*_test.exs`ファイルだけ色を変える

ユーザスタイルシート(設定画面から、`Open Config Folder` > `styles.less`)を開き、以下のように追加します。

```sass
// Custom file icons
@import "packages/file-icons/styles/colors";
@import "packages/file-icons/styles/icons";
@import "packages/file-icons/styles/items";
@{pane-tab-override}, .icon-file-text {
  &[data-name$="_test.exs"]:before   { .elixir-icon; .medium-green; }
}
```

基本的にはfile-iconsの[README](https://github.com/DanBrooker/file-icons#customisation)に載っているとおりです。

ポイントは、Lessのエントリーとして指定するパターンを、READMEそのままの`@{pane-tab-selector}`とするのではなく、`@{pane-tab-override}`とすることです。こちらのパターンではテーマによらずタブのアイコンまで反映されます。

結果はこんな感じ。
<img width="413" alt="スクリーンショット 2016-06-29 14.49.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/76980/95877bd3-4c41-0e7f-15a7-1e4cf1a977c6.png">


## `*Spec.scala`も変える
せっかくなのでspecs2のテストファイルも変えておきます。同じように追加するだけですね。

```sass
// Custom file icons
@import "packages/file-icons/styles/colors";
@import "packages/file-icons/styles/icons";
@import "packages/file-icons/styles/items";
@{pane-tab-override}, .icon-file-text {
  &[data-name$="_test.exs"]:before   { .elixir-icon; .medium-green; }
  &[data-name$="Spec.scala"]:before  { .scala-icon; .medium-green; }
}
```

色は`light/medium/dark`の濃淡と、`red/green/yellow/blue/maroon/purple/orange/cyan`の系統から自由に組み合わせて選べます。

アイコンのパターンはかなりたくさんあるので、困ることはほぼないでしょう。`packages/file-icons/styles/icons.less`で一覧を見ることができます。