HTMLをそのままスニペットに登録

Emmetのスニペット機能を使ってHTMLをそのまま登録しておけば、元の改行を崩さなくていいし予想外の指示があってもHTMLを直でいじれるのでとても便利。ただ、HTMLをそのまま登録する場合は改行を\nにしたりクォートをエスケープしたりと手作業だととても面倒臭い。楽に登録出来る方法無いかなと探していたらRegReplaceというSublimeText3のパッケージがあったのでこれを使っている。その名の通り正規表現で置換してくれるもの。

置換前 hoge.html

<section>
  <div class="heading">
    <a class="block" href="#">
      <h2 class="title">H2-Title</h2>
      <p class="sub_title">SubTitle</p>
    </a>
    <p>Paragraph</p>
  <!-- ./heading --></div>
</section>

置換後 hoge.html

<section>\n\t<div class=\"heading\">\n\t\t<a class=\"block\" href=\"#\">\n\t\t\t<h2 class=\"title\">H2-Title</h2>\n\t\t\t<p class=\"sub_title\">SubTitle</p>\n\t\t</a>\n\t\t<p>Paragraph</p>\n\t<!-- ./heading --></div>\n</section>

コマンド実行すれば置換前のコードが置換後のようになる。

記事とは関係無いが、メモ帳時代の名残である閉じタグ前のインラインコメントはいつになったら無くなるのか…。こいつのせいでPugの出番がなかなかない。

設定

基本設定 > Package Settings > RegReplace > Rules-User

reg_replace_rules.sublime-settings

{
    "replacements": {
        "replace_1": { "find": "\"", "replace": "\\\"" }, // " → \"
        "replace_2": { "find": "\n", "replace": "\\\\n" }, // 改行 → \n
        "replace_3": { "find": " {2}", "replace": "\\\\t" } // 半角スペース2つ → \t
    }
}

基本設定 > Package Settings > RegReplace > Commands-User

Default.sublime-commands

[
    {
        "caption": "RegReplace: HTML→Emmet",
        "command": "reg_replace",
        "args": {
            "replacements": [
                "replace_1",
                "replace_2",
                "replace_3"
            ]
        }
    }
]

Ctrl+Shift+Pでコマンドパレットを呼び出し、rehと打てば「RegReplace: HTML→Emmet」が出てくるので実行。置換後のコードをパーツ名等で登録。