2012年12月18日火曜日

Sublime Text 2 で Emmet プラグインを使う

Emmet は Zen-Codingの次期バージョンで、仕様も大幅に変わっているようです。さらに使いやすくなっている!

emmet-sublime

Ctrl + Shift + P (Command + Shift + P) で Install Package を選択



Emmet を選択



* 参考にさせていただいたサイトでは github のリポジトリを Package Control に add repository してからインストールする方法が説明されていますが、現在は Package Control の Install Package から Emmet Plugin をインストールすることができます。

参考にさせていただいたサイト

1つ前のエントリで ZenCoding を紹介しておきながら、Emmet に移行することにしました。 主な理由が以下のポイントです。


気に入ったポイント

1. $ がちゃんと動く

ZenCoding は

ul#main>(li>img#main-$)*4

の展開が <ul id="main"> <li><img src="" alt="" id="main-1"></li> <li><img src="" alt="" id="main-1"></li> <li><img src="" alt="" id="main-1"></li> <li><img src="" alt="" id="main-1"></li> </ul> のように $ 部分がすべて1になってしまう場合がありました。

Emmet だとちゃんと <ul id="main"> <li><img src="" alt="" id="main-1"></li> <li><img src="" alt="" id="main-2"></li> <li><img src="" alt="" id="main-3"></li> <li><img src="" alt="" id="main-4"></li> </ul> になってくれます。


2. lorem ipsum が出力できる

p>lorem

を展開すると <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sunt sapiente ratione reprehenderit eveniet sit possimus a porro amet veniam ipsam repellat expedita nam excepturi autem cupiditate cumque obcaecati recusandae.</p> になります。

p>lorem16

のように単語数を指定することもできます。 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis temporibus minima quae voluptates architecto voluptas obcaecati.</p>

3. CSS の補完がすごい

m40

margin: 40px;

m0-8

margin: 0 8px;


p8

padding: 8px;


h55

height: 55px;


lstn

list-style-type: none;


fll

float: left;


cb

clear: both;


4. CSS で - 補完がすごい

-bdrs

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;


4. カスタマイズの方法がわかりやすい

[Preferences] - [Package Settings] - [Emmet] に
[Settings - Default] と [Settings - User] が用意されました。

カスタムスニペットとかは [Settings - User] に書きます。

デフォルトのスニペットは
([Prefernces] - [Browse Pacakges...] で開くディレクトリ)/Emmet/emmet/snippets.json
に定義されていますが、こっちは変更せずに [Settings - User] に書くようにします。

[Settings - User] を以下のようにしてます。 { // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json "snippets": { "html": { "snippets": { "html:5": "<!DOCTYPE html>\n<html lang='${lang}'>\n<head>\n\t<meta charset='${charset}' />\n\t<title>${1:Document}</title>\n</head>\n<body>\n\t${child}${2}\n</body>\n</html>", "html:t": "<!DOCTYPE html>\n<html lang='${lang}'>\n<head>\n\t<meta charset='${charset}' />\n\t<link rel='stylesheet' href='${1:style}.css' type='text/css' />\n\t<script type='text/javascript' src='${2:../jquery-1.8.3.min.js}' />\n\t<script type='text/javascript' src='${3:main.js}' />\n\t<title></title>\n</head>\n<body>\n\t${child}|\n</body>\n</html>" }, "abbreviations": { "less:css": "<link rel='stylesheet/less' type='text/css' href='${1:style}.less' />", "link:css": "<link rel='stylesheet' type='text/css' href='${1:style}.css' />", "script:src": "<script type='text/javascript' src='' />" } } } }


---

前回のエントリにも書いた、 html のときに br の展開を <br /> にする方法の修正点は

([Prefernces] - [Browse Pacakges...] で開くディレクトリ)/Emmet/emmet/emmet-app.js

に変わりました。同じように self_closing_tag を変更します。

5132行の createProfile('html', {self_closing_tag: false}); が該当部分です。

createProfile('html', {self_closing_tag: false});
だと(デフォルト)
<link rel="stylesheet" href="">

createProfile('html', {self_closing_tag: true});
だと
<link rel="stylesheet" href=""/>

createProfile('html');
だと(デフォルトの self_closing_tag: 'xhtml' になる)
<link rel="stylesheet" href="" />

になります。



1 件のコメント: