「ul>(li>a[href="#"])」くらいしか使っていなかったため、もう少しEmmetを使いこなすためのTipsです。
Emmetとは？
主にHTMLやCSSの記述・編集をサポートするプラグインのこと。
たとえば、
.test{
m10--10+d:i+c#c+fz10
}
と入力して、ctrl+eで展開すると、
.test{
margin:10px -10px;
display:inline;
color:#ccc;
font-size:10px;
}
となったり、
!
と入力して、ctrl+eで展開すると、
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
となる。
どんなショートカットが利用できるかはチートシートで確認しながら覚える
※fz10,fse10がどちらもfont-size:10px;だったり、あいまいな使い方もできる。
https://docs.emmet.io/cheat-sheet/
チューニング
個別にチューニングをしたい場合は、自分のホームディレクトリに下記のファイルを設置して、設定の記述をする。
- 設定ファイル構成
~/emmet/preferences.json
snippets.json
syntaxProfiles.json
例）CSS展開時「:」の後のスペースを取る場合
preferences.jsonに記述。
preferences.json
{
"css.valueSeparator": ":"
}
例）CSS展開時ベンダープリフィックスを勝手につけないようにする場合
preferences.jsonに記述。
preferences.json
{
"css.autoInsertVendorPrefixes": false,
"less.autoInsertVendorPrefixes": false,
"scss.autoInsertVendorPrefixes": false,
"sass.autoInsertVendorPrefixes": false,
"caniuse.enabled": false
}
HTML展開時インデントをいれない
preferences.jsonに記述。
preferences.json
{
"format.noIndentTags": "address,article,aside,audio,blockquote,body,canvas,div,dl,figcaption,figure,footer,form,head,header,html,iframe,main,map,nav,object,ol,p,pre,script,section,style,table,tbody,td,tfoot,th,thead,tr,ul,video"
}
便利なショートカットをピックアップ
emmetとエディタのショートカットが重複する場合があるので、
その場合は、エディタのキーマップで適宜変更する。
-
タグと内包されているコンテンツを選択
ctrl-shift-E
-
入力する場所に移動
Ctrl-alt-left(right)
-
前後タグを削除
Ctrl+Shift+;
-
改行とタブを消去して、一行化
Ctrl+Shift+M
-
タグを変更する
Ctrl-Shift-'
※Atomだと「Ctrl-Shift-'」のキーマップが効かないので適宜変更する(私の場合は：ctrl+u)
-
テキストをタグで包括する
Ctrl-alt-w
※Atomで利用しない場合はキーマップが異なる場合があるので注意！
※ctrl-shift-Eやctrl-shift-Rとの組み合わせが多いためCtrl-shift-wと変更すると便利。
テキストをタグで包括するCtrl-alt-wの記述例
ul>li[title=$#]*>{$#}+img[alt=$#]
<div class="test">
test1 <-- ここから
test2
test3 <-- ここまでを選択
</div>
↓
<div class="test">
<ul>
<li title="test1">test1<img src="" alt="test1" /></li>
<li title="test2">test2<img src="" alt="test2" /></li>
<li title="test3">test3<img src="" alt="test3" /></li>
</ul></div>