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
の展開が
Emmet だとちゃんと
2. lorem ipsum が出力できる
p>lorem
を展開すると
p>lorem16
のように単語数を指定することもできます。
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] を以下のようにしてます。
---
前回のエントリにも書いた、 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="" />
になります。
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="" />
になります。