Emmetの導入
「Package Controll」で「Emmet」をインストール。
[command] + [Shift] + [P] で「Command Palette」を開き「install」と入力してパッケージインストーラーを選択。
「Emmet」を選択してインストール。
参考
タグの短縮入力
html:5←ここで**[ctrl]+[E]**
↓
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
タグの囲み入力
なぜかこれについて触れているサイトがほとんど無い。
ほげほげ ←この文章を選択して**[ctrl] + [alt] + [enter]**
↓
<div>ほげほげ</div>
画面下部に「Enter Abbreviation:」の入力枠が表示されるので、HTMLのタグか、Zen-codingのショートコードを入力する。
a[href=http://google.com/].colorbox
上記のように入力すると……
<div>ほげほげ</div>
↓
<a href="http://google.com/" class="colorbox">ほげほげ</a>
ショートコードのカスタマイズ
「html:5」で変換すると下記のようになるので、ちょとカスタマイズします。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Preferences ＞ Package Settings ＞ Emmet ＞ Settings - User
でカスタマイズ。
{
"snippets": {
"html": {
"snippets": {
"html:5": "<!doctype html>\n<html lang=\"ja-JP\">\n<head>\n\t<meta charset=\"${charset}\">\n\t<meta name=\"description\" content=\"\">\n\t<title>${1:Document}</title>\n</head>\n<body>\n\t${child}${2}\n</body>\n</html>",
"dldt": "<dl>\n<dt>${child}</dt>\n<dd></dd>\n</dl>"
}
}
}
}
下記のようになります。
<!doctype html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<title>Document</title>
</head>
<body>
</body>
</html>
ショートコードの追加
{
"snippets": {
"html": {
"snippets": {
"html:5": ～略～,
// 追加
"dldt": "<dl>\n\t<dt>${1:title}</dt>\n\t<dd>${2:data}</dd>\n</dl>"
}
}
}
}
dldt
↓
<dl>
<dt>title</dt>
<dd>data</dd>
</dl>
選択文字を囲む方法がわからない！！