OUTDATED
file-icons 2.0.0でカスタマイズ方法が変わったので、こちらを参照して下さい。
以下はfile-icons 1.7.25までの内容です。
file-icons
Atom Editorではfile-iconsというpackageを入れることで拡張子に応じてファイルアイコンと色を変えられます。かなり人気のパッケージです(現在100万DL超え)。
(設定でColouredオプションをオンにすることで、左列のように色がつきます)
file-iconsを入れない、デフォルトの状態はこんな感じ。(新規ファイル・更新ありファイルのハイライトはデフォルトです)
(画像元サイト)
適用するとこんな感じです。
(画像元サイト)
もちろんツリーだけでなくタブにも適用されます。
テーマによってはタブのアイコンは省略されますが、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)を開き、以下のように追加します。
// 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に載っているとおりです。
ポイントは、Lessのエントリーとして指定するパターンを、READMEそのままの@{pane-tab-selector}とするのではなく、@{pane-tab-override}とすることです。こちらのパターンではテーマによらずタブのアイコンまで反映されます。
結果はこんな感じ。
*Spec.scalaも変える
せっかくなのでspecs2のテストファイルも変えておきます。同じように追加するだけですね。
// 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で一覧を見ることができます。