at backyard

Color my life with the chaos of trouble.

vim-sonictemplateが楽しそうなので試してみた(JavaScriptにて)

vim-sonictemplate Vim 備忘録 JavaScript

GitHubをサーフィンしていたら見つけたvim-sonictemplateが楽しそうだったので、試してみることにした。

github.com

vim-plugでインストール

vim-plugを利用しているので、こちらを利用してインストールします。

.vimrc に下記を書いて、Vimを開き、PlugInstall でインストールは完了。

" vim-sonictemplate install
Plug 'mattn/vim-sonictemplate'

試す

vim-sonictemplateは拡張子をもとに、対象となるソースコードのテンプレートを呼び出してくれるツール。 (まだ使い始めたばかりなので、概要誤っていたらすみません)

例えば、main.jsというファイルをvimで開き、

:Template

まで打って、tabを叩くと、テンプレート候補が出てくる。
(または<c-y> + t と打ってもOK)

例えば、:Template es6-class と打つと、

class main {
  constructor() {
    
  }
}

というファイルが生成される。

そしてその場でさらに:Templateと入力すると、今度はまた別の候補が表示される。

ためしに :Template settimeoutと打ってみると、下記のような形でコードが追加される。

class Main {
  constructor() {
    setTimeout(function() {
      
    }, 200);
  }
}

ちなみにこれらのテンプレートは vim-sonictemplate/template 配下に言語ごとに格納されている。 (例えば vim-sonictemplate/template/javascript という感じで)

で、このディレクトリの中には下記のような３種類のファイルが格納されている。
(ここでは javascriptを例にしています)

  • base-hogehoge.js
  • snip-hogehoge.js
  • pattern.stpl

base- というのはファイルを初めて開いた際に:Template を叩くと候補として表示されるテンプレート。
ベースとなるようなテンプレートが用意されており、ファイルに何かしらの記述がある際に :Template を叩くと、 snip- が候補として表示される。

いわゆるコードスニペットとなる。

これとは別に pattern.stpl というファイルがあり、下記のような様々なパターンに応じたコード挿入が行えるようになっている。

\(\S\+\)\.var$
    var {{$1}} = {{_cursor_}};

例えば上のケースの場合 hoge.varと打ってから ctrl-y + ctrl+b (<c-y><c-b>とドキュメント上では表現されている) と打つと、

var hoge = {カーソルがここ};

という状態になる。

そして上のpattern.stpl に独自に自身のよく使うコードを格納していけば、かなりに利便性が上がるのではないかと思う。
ちなみに上のコードの２行目はタブでないと動かないので気をつけてほしい(これで15分ぐらいハマった)。
Vimの設定でタブをスペースで入力するように設定している人は多いと思うが、下記のやり方でタブの入力は可能。

ちなみにこのファイルはstpl という拡張子から SimpleTemplate Engine かと勝手に考えているが、今ちょっとググってみてもあまり確証は得られなかった。誰か知っている人いたら教えて下さい。

まあ、そんなこんなで大いにコーディングが楽になりそうな vim-sonictemplate。
使いこなせるとコーディングがより気持ちよくなりそうなので、もう少し触ってみようと思った次第。

以上、日記でした。