Y.A.M の雑記帳: 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

の展開が

view plain print ?

<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 だとちゃんと

view plain print ?

<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

を展開すると

view plain print ?

<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

のように単語数を指定することもできます。

view plain print ?

<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] を以下のようにしてます。

view plain print ?

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

になります。

Y.A.M の雑記帳

2012年12月18日火曜日

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

0 件のコメント:

コメントを投稿