ソースを書いていく際、divタグが増えていくと、どれがどのdivを閉じたのか？わからなくなる時がありますよね。今回そういった事が一発で解消できる方法のご紹介です。
目次
まず、目指す最終形
[quads id=”1″]
<div class="test"></div> <!-- /.test -->
このコメントアウトが各id, classごとに自動ででるようにします。
で、参考にしたのがここ。
が、同じようにしてもプラグイン認識をしてくれず、エラーも出、諦める結果になりました。ですが、この方法での改善点も見えたので後ほどそちらも記載いたします。
今回は、諦めたことでみつけた、もっと簡単な方法のご紹介★
ということでいってみよー （サクっとかきます）
１．Emmetプラグインをインストール
まず、EmmetプラグインをSublimeText3にインストールしましょう。
２．Emmetユーザー設定をする。
インストールしたら、Sublime Text のメニューで、Preferences > Package Settings > Emmet > Settings -Userを開き、Emmetセッティングをします。
以下のコードを追加
{
"snippets": {
"html": {
"filters": "html,c"
}
}
}
保存したら、再起動。 これだけ。 えっ？ と思うくらいこれだけ。（前述リンクよりサクっといきます！）
３．テストとしてなにか書いてみよう！
Emmetなので、Emmetの書き方になります。
例えば、idタグならば、#名前 ＋ Tag（ボタンを押す） だけ。
すると・・すると・・・・・
こんな画面が出るはず！！
#test
test真横にカーソルを置いたままTabを押せば・・・・
<div id="test"></div> <!-- /#test -->
おぉ～～～っ！
これで、自動でコメントが入りました！
これなら、divタグが沢山閉じていく中でも、どこのdivタグが閉じたのか一目でわかります。（安心）
Emmetを知らない方は、こちらをチェックしてみてくださいね。
できたら、前にもコメントを入れたい場合
次に、divタグ前にもコメントを入れたい場合のやり方のご紹介です。
イメージとしたらこんな感じ
<!-- #test --> <div id="test"></div> <!-- /#test -->
Emmetユーザー設定に次のコードを入力
{
"snippets": {
"html": {
"filters": "html,c"
}
},
"preferences": {
"filter.commentBefore": "<!-- <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->\n"
}
}
これで、このように表示されます。
#test
↓ Tab push!
<!-- #test --> <div id="test"></div> <!-- /#test -->
ちなみに、コメントの言葉も編集したい場合は、こうなります。
{
"snippets": {
"html": {
"filters": "html,c"
}
},
"preferences": {
"filter.commentBefore": "<!-- begin <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->\n",
"filter.commentAfter": "\n<!-- <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> end -->"
}
}
するとこう表示されるようになります。
<!-- begin #test --> <div id="test"></div> <!-- #test end -->
前にも後ろにもかけるので、お好みで試してみてくださいね。
ちなみに、最初の参考にしたリンク先方法で、嵌っちゃった人向けのアドバイス
１．Emmet.sublime-packageをZIPにして、別ディレクトリに戻す際に、二重になるからと事前にPackegeコントロールからEmmetを消さない。
２．別ディレクトリに入れたら、SublimeTextを再起動して、Emmetが動くかを確認。（認識させる）
３．上記リンク先通り、所定ファイルを書き換え、再起動。
これでどうやらOKのようです。
お試し下さい。