2012/06/14

Recent entries from same category

  1. VimConf 2023 Tiny に参加しました
  2. Vim で Go 言語を書くために行った引越し作業 2020年度版
  3. Vim をモダンな IDE に変える LSP の設定
  4. ぼくがかんがえたさいきょうの Vim のこうせい 2019年 年末版
  5. VimConf 2019 を終えて

zencoding.vim 最近 zencoding.vim を大きく修正しました。とは言ってもこれまで単体テストを作ってきた事もあって、過去の動作を(なるべく)壊さずに大規模な修正が行えました。
これまでは一つのファイルに html, css, haml の処理が全て記述されていたのでとてもスパゲッティなコードになっていて、もう少し放っておくとカオスな状態になりかけていたので、ファイルを分割しインタフェースを揃える事にしました。
これにより、今後新しいフォーマットに対応する際にも、zencoding/lang にあるファイルの真似をして記述すれば実装出来る様になります。

haml に対応した

「えっ？前から対応してたんじゃないの？」と言われる方もいるかもしれませんが、これはあくまで expand abbreviation の haml フィルタとしてだけサポートしていました。
何が変わったかというと zen coding が持っている本来の機能
  • expand abbreviation
  • wrap with abbreviation
  • update image size
  • toggle comment
  • balance tag
  • move next prev
  • split join tag
  • remove tag
といった機能全てが haml でも使える様になりました。ですので html:5>ul>li*3
 という入力から <c-y>, で !!! 5
%html{:lang => "ja"}
  %head
    %meta{:charset => "UTF-8"}
    %title
  %body
    %ul
      %li
      %li
      %li
 こう展開出来るし、コメントのトグルや img タグ上での画像サイズ更新も haml のまま使えます。

slim に対応した

haml 同様に、html で使えていた機能が slim でも使える様になっています。個人的には slim の方が綺麗しいいなーと思ってます。ただし haml にしても slim にしても、そこまで使いこなしていないので、もし変な動作したら教えて下さい。
もちろん、一部で人気の高い anchorizeURL を slim で使う事も出来ます。
http://twitter.com/mattn_jp URL上で <c-y>A とタイプすると blockquote class="quote"
  a href="http://twitter.com/mattn_jp"
    | Twitterの mattn (@mattn_jp)
  br
  p
    | わしがコエンザイムQ10だ about 1 hour ago TwitVim から 最近になってslimいいなーって思う。 about 2 hours ago TwitVim から ディアゴスティーニ...
  cite
    | http://twitter.com/mattn_jp
 この様に展開されます。haml でも使えます。

新機能 code pretty

僕はこのブログを書くときに良くコードの断片を TOHtml で整形しているのだけど、TOHtml には html タグや body タグが含まれていて困る。そこで TOHtml の中身だけ抽出してくれる機能を付けた。例えば まずはこのコードを見て欲しい
#include <stdio.h>

void main() {
  puts("hello world");
}
 というテキストのコード部を選び <c-y>c をタイプすると、FileType: と聞かれる。コードがC言語なら c でエンター。vim のファイルタイプ名を入力します。分からなくてもファイルタイプで補完が効く様にしてあるので適当に先頭文字入れてタブをタイプすればそれっぽいのが出てきます。デフォルト値は開いているファイルのファイルタイプなので、.pl のファイルを開けば自動で perl になってます。
ファイルタイプを入力したら自動で TOHtml が行われ まずはこのコードを見て欲しい
<span class="PreProc">#include&nbsp;</span><span class="Constant">&lt;stdio.h&gt;</span><br />
<br />
<span class="Type">void</span>&nbsp;main() {<br />
&nbsp;&nbsp;puts(<span class="Constant">&quot;hello world&quot;</span>);<br />
}<br />

 となるので、あとは変換された部分をお好きなタグで囲って下さい。この TOHtml を使った機能は TOHtml の設定内容に依存します。僕の場合はpre/font タグを使わず css クラスを吐き出す設定にしています。

最小単位での展開にした

これまではカーソル位置から前の部分を全て式とみなしていましたが、最近修正して最短の式のみを扱う様にしました。なので文中 まずは a[href=http://mattn.kaoriya.net]{Big Sky}| をみて欲しい の | の位置で <c-y>, をタイプすると まずは <a href="http://mattn.kaoriya.net">Big Sky</a> をみて欲しい
 に変換されます。

おまけ

僕が設定している物の中でちょっと便利そうな物を紹介しようと思います。
let g:user_zen_settings = {
\  'lang' : 'ja',
\  'html' : {
\    'filters' : 'html',
\    'snippets' : {
\      'jq' : "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"></script>\n<script>\n\\$(function() {\n\t|\n})()\n</script>",
\      'cd' : "<![CDATA[|]]>",
\    },
\  },
\  'php' : {
\    'extends' : 'html',
\    'filters' : 'html,c',
\  },
\  'javascript' : {
\    'snippets' : {
\      'jq' : "\\$(function() {\n\t\\${cursor}\\${child}\n});",
\      'jq:json' : "\\$.getJSON(\"${cursor}\", function(data) {\n\t\\${child}\n});",
\      'jq:each' : "\\$.each(data, function(index, item) {\n\t\\${child}\n});",
\      'fn' : "(function() {\n\t\\${cursor}\n})();",
\      'tm' : "setTimeout(function() {\n\t\\${cursor}\n}, 100);",
\    },
\    'use_pipe_for_cursor' : 0,
\  },
\  'css' : {
\    'filters' : 'fc',
\    'snippets' : {
\      'box-shadow' : "-webkit-box-shadow: 0 0 0 # 000;\n-moz-box-shadow: 0 0 0 0 # 000;\nbox-shadow: 0 0 0 # 000;",
\    },
\  },
\  'less' : {
\    'filters' : 'fc',
\    'extends' : 'css',
\  },
\}
 zen-coding の味噌は如何にして速くコーディングするかなのですが、例えば jQuery を使う html を書く場合に僕は jq<c-y>, とタイプします。すると <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
    
})()
</script>
 ここまで展開してくれます。関数の中で、インデントされた位置にカーソルがあるので jq:json>jq:eachという式の後に<c-y> とタイプします。すると <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
    $.getJSON("", function(data) {
        $.each(data, function(index, item) {
            
        });
    });
})()
</script>
 この様に処理をネストして展開してくれます。まぁ、変数名がバッティングしたりするのであまり行儀は良くないけど、3分間ハッキングしたい時には結構使います。

こんな感じに開発は進んでいます。もし欲しい機能などあれば、気軽に github の issues へ登録して下さい。日本語で構いません。コメント欄などでも構いません。
mattn/zencoding-vim - GitHub https://github.com/mattn/zencoding-vim
ZenCoding.vim

vim plugins for HTML and CSS hi-speed coding.

http://mattn.github.com/zencoding-vim
sonictemplate-vim と併用すると、もっと色んな事が出来ると思います。
mattn/sonictemplate-vim - GitHub https://github.com/mattn/sonictemplate-vim
sonictemplate-vim を使うとこんな感じにコーディング出来ます。
faithandbraveさんのサンプルをvimでコーディングしてみた - Gist https://gist.github.com/2717577
ちょっとらしくない緊張からタイプがひどいですが。
Posted at by | Edit