今よりもほんのちょっとだけEmmetを使いこなしてコーディング速度を上げたいTips #CSS

「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>