Sublime Text 3 に Emmet を導入する

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 を押下して展開

主な記述ルール

項目 書き方
idを付与 # #hoge
classを付与 . .piyo
入れ子 > ul>li
並べる + h1+p
くくる ( ) (ul>li)+(ul+li)
n個繰り返す *n li*4
タグの中身 { } h1{見出し}
タグの属性 [ ] a[href=index.html target=_blank]

Comments

  • スパム対策のため、コメント本文にURLが含まれている場合は「承認待ち」となり、すぐに投稿が反映されません。ご了承ください。
  • 公序良俗に反する内容、個人が特定できる情報、スパム投稿と思われるコメント等については、予告なく編集・削除する場合があります。