Y.A.M の雑記帳: Sublime Text 2 の ZenCoding プラグインのカスタマイズ方法

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

と入力してタブを押すと

view plain print ?

<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

でタブを押すと

view plain print ?

<!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' の

view plain print ?

'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>'

を

view plain print ?

'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' に入れるべきなんだろうけど、なんか動かなかった。）

view plain print ?

'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' の

view plain print ?

'script:src': '<script type="text/javascript" src=""></script>',

を

view plain print ?

'script:src': '<script type="text/javascript" src="" />',

に変更

■ 'html' の 'abbreviations' に以下を追加

view plain print ?

'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="" />

になります。

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

Y.A.M の雑記帳

2012年12月18日火曜日

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

0 件のコメント:

コメントを投稿