LoginSignup
2
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-02-20

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でつまづいてしまったりしたので僕にはこの構成が1番いいんです…

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

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

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

スクリーンショット 2018-02-20 22.32.30.png

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

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

スクリーンショット 2018-02-20 22.44.49.png

片方は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、かわいいな〜

所感

備考

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1