Rails用のAtomの拡張機能を書いた話

2018/02/21追記

• path.sepを使用して（恐らく）Windowsでも動作するようにしました。

---

動作環境

• Atom 1.24
• Mac OS Sierra

見習いのykpythemindです。エディタはAtom→Vim→VSCode(+VSCodeVim)という変遷をしていて、今はAtom + vim-mode-plus拡張に落ち着きました。AtomかわいいよAtom…
ゴリゴリのVimmerではないんですが、vimのキーバインド好きで拡張入れてます。ネイティブのVimはシンタックスハイライトがもっさりしていたり、vimgrepでつまづいてしまったりしたので僕にはこの構成が１番いいんです…

（余談ですが先日Atom Beta 1.25がリリースされ、内部のElectronがアップデートされたのでIMEのウィンドウの表示位置がおかしくなるバグがようやくなくなり、快適になりました）

ふと思い立って拡張機能を書いてみました（パッケージではないです）

タブを開いた時にRailsのViewファイルの名前で混乱する

僕は掃除できない/整理できない人間なのでいつの間にかこんな感じになってアレ、、これどのコントローラのビューだっけ？(index.html.hamlが２つある・・・） としょっちゅうなっていました。

ということで、Viewのファイル(拡張子が.haml)を開いたらフォルダ名もまで表示するようにしました。

片方はShowsControllerのindex.html.hamlで、もう一方はUsersControllerのindex.html.hamlであることが一目で分かるのでそこそこ良くなったのではないでしょうか…？ アイコンで分かるので拡張子も除いています。

init.js

Atomは ~/.atom以下の init.jsを起動時に実行します。 (init.coffeeも用意されていますが存在していればどちらも読みにいってくれるようです。）

もしinit.jsがなければ作成し、以下をコピペで動きます

init.js

'use babel';

const setTabTitle = () => {
  const tabs = atom.views.getView(atom.workspace).querySelectorAll('.vertical li.tab .title');

  Array.from(tabs, (tab) => {
    if (tab.innerText.match(/\.(haml|erb)/)) {
      tab.innerText = tab.dataset.path.split(path.sep).slice(-2).join('/').replace(/\.html\.(haml|erb)/, '');
    }
  });
};

atom.workspace.onDidChangeActiveTextEditor(() => {
  setTabTitle();
});

atom.workspace.onDidOpen(() => {
  setTabTitle();
});

atom.workspace.onDidDestroyPaneItem(() => {
  setTabTitle();
});

querySelectorAll('.vertical li.tab .title');ですべてのタブの要素を取得します (もっといいやりかたありそう…）
要素のdata-path属性にファイルのフルパスが入っているのでフォルダ名とファイル名を抜き出し、ついでに余分な拡張子部分を削除してからタブのinnerTextにセットします。
タブを選択しなおしたりファイルを開いたりする時にDOMが更新されタブの書き換えた部分が戻ってしまうのでいくつかコールバックを設定しています。
haml派ですがなんとなくerbも対応しました

もっといいやりかたがある気しかしないですがこんな感じで実現できました。
まずい点や改良点があったら教えてくださると嬉しいです。

Atom、かわいいな〜

所感

• init.jsに簡単な処理を書けるのですごく便利・・・ (.vimrc的な？？)
  • http://flight-manual.atom.io/hacking-atom/sections/the-init-file/
• もっとタブを整理して使うとか、 zentabs みたいなタブ数を制限する拡張を入れるという方法でそもそものタブ多くなりすぎ問題を解決していきたい

備考

• querySelectorAllで帰ってきたNodeListを外部ライブラリを使わずにforEachしたい