2012年12月18日火曜日

Sublime Text 2 の ZenCoding プラグインのカスタマイズ方法

Sublime Text 2 用の Zen Coding プラグインがあります。

Sublime Package Control に登録されているので、Sublime Package Control を入れている場合は、そこから Zen Coding パッケージを入れれば使えます。

ちなみに Sublime Package Control のインストール方法は、[View] - [Show Console] でコンソールを開いて、そこに Sublime Package Control Installation に載ってるコマンドを入力し、Sublime Text 2 を再起動するだけです。

ZenCoding は例えば

div#page>div.logo+ul#navigation>li*5>a

と入力してタブを押すと <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> に変換してくれる機能をエディタに加えるプラグインです。
Zen Coding syntax は Zen Coding の Google Code の Wiki にあります。

さて、Zen Coding には abbreviations という機能があります。

例えば

<a href=""></a>

のように展開したい場合、

a[href]

と打ってタブを押す必要がありますが、

a

の状態でタブを押しても a[href] と同じように展開されるように略語を設定できる機能です。

他にも

a:link

という略語が用意されていて、この状態でタブを押すと

<a href="http://"></a>

に展開されます。

また、

html:5

でタブを押すと <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> に変換する snippet 機能もあります。


各略語がどのように変換されるかは Zen Coding プラグインフォルダの zen_settings.py に書かれています。

([Preferences] - [Browse Packages...] で開くディレクトリ)/ZenCoding/zencoding/zen_settings.py


私は次のように変更して使っています。

■ 'html' の 'snippets' の 'html:5': '<!DOCTYPE HTML>\n' + '<html lang="${locale}">\n' + '<head>\n' + ' <meta charset="${charset}">\n' + ' <title></title>\n' + '</head>\n' + '<body>\n\t${child}|\n</body>\n' + '</html>' 'html:5': '<!DOCTYPE html>\n' + '<html lang="${lang}">\n' + '<head>\n' + ' <meta charset="${charset}" />\n' + ' <title></title>\n' + '</head>\n' + '<body>\n\t${child}|\n</body>\n' + '</html>' に変更

■ 'html ' の 'snippets' に以下を追加
(本当は 'common' に入れるべきなんだろうけど、なんか動かなかった。) 'html:t': '<!DOCTYPE html>\n' + '<html lang="${lang}">\n' + '<head>\n' + ' <meta charset="${charset}" />\n' + ' <link rel="stylesheet" href="${1:style}.css" type="text/css" />\n' + ' <script type="text/javascript" src="${2:../jquery-1.8.3.min.js}" />\n' + ' <script type="text/javascript" src="${3:main.js}" />\n' + ' <title></title>\n' + '</head>\n' + '<body>\n\t${child}|\n</body>\n' + '</html>'

■ 'html' の 'abbreviations' の 'script:src': '<script type="text/javascript" src=""></script>', 'script:src': '<script type="text/javascript" src="" />', に変更

■ 'html' の 'abbreviations' に以下を追加 'less:css': '<link rel="stylesheet/less" type="text/css" href="${1:style}.less" />',


---

html で(xhtml ではなく)br が <br> に展開されるのを <br /> にするには、

([Preferences] - [Browse Packages...] で開くディレクトリ)/ZenCoding/zencoding/utils.py を変更します。

setup_profile('html', {'check_valid' : True, 'self_closing_tag': False});

の 'self_closing_tag' によって振る舞いが異なります。

■ setup_profile('html', {'check_valid' : True, 'self_closing_tag': False});
だと(デフォルト)
<link rel="stylesheet" href="">

■ setup_profile('html', {'check_valid' : True, 'self_closing_tag': True});
だと
<link rel="stylesheet" href=""/>

■ setup_profile('html', {'check_valid' : True});
だと
<link rel="stylesheet" href="" />

になります。

吉川さんありがとうございます。



0 件のコメント:

コメントを投稿