Edited at

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

More than 1 year has passed since last update.

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


チューニング

https://docs.emmet.io/customization/preferences/

個別にチューニングをしたい場合は、自分のホームディレクトリに下記のファイルを設置して、設定の記述をする。


  • 設定ファイル構成

~/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>