hi3103の備忘録

Emmetとは

Emmet — the essential toolkit for web-developers
https://emmet.io/

• HTMLとCSSの記述を効率化するテキストエディタ用のプラグイン
• 2017年から利用しているが、いつだか仕様が変わり独自スニペットの登録などができなくなった（不便）
• 現在はHTMLを展開する用途でのみ使っている

手順

1. Package Controllから「Emmet」をインストール
2. Ctrl + E で展開できるように Key Binding を設定
3. 展開時にコメントが挿入されるように Emmet のSetting – User を設定

Preferences > Key Bindings

//[Emmet]Ctrl+Eで展開
{ "keys": ["ctrl+e"], "command": "emmet_expand_abbreviation" },

Preferences > Package Settings > Emmet > Settings -User

{
    "comment": true,//展開時のコメントを有効化
    "comment_template": "<!-- /[#ID][.CLASS] -->",//コメントのフォーマットを設定
}

展開時のコメント例

• #hoge を展開

  <div id="hoge"></div><!-- /#hoge -->

• .piyo を展開

  <div class="piyo"></div><!-- /.piyo -->

• #hoge.piyo を展開

  <div id="hoge" class="piyo"></div><!-- /#hoge.piyo -->

使い方

1. 記述ルールにのっとって1行で書く
2. 行末にカーソルを合わせる
3. 設定したショートカットキー Ctrl + E を押下して展開

主な記述ルール