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

の展開が


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

になります。

Y.A.M の雑記帳

2012年12月18日火曜日

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

0 件のコメント:

コメントを投稿