emmetのいろいろな機能をまとめてみた

はじめに

もともとは別の方法でコーディングを効率化しようと考えていたのだが、
emmetを編集する方法でもいけるのではないかと思い、調べてみた。
emmetをある程度使っていて、もうちょっと他の使い方がないか探している人向けです。

参考にしたサイトは以下である。

略語の展開にTabキーを使う。

"emmet.triggerExpansionOnTab": true

マルチカーソルでemmetを使う。

試しに画像のようにしてみても、emmetは機能する。

コメントを自動で付ける。

「重要なタグ」の前後にコメントを入力することができる。「重要なタグ」はデフォルトでは、「id属性」と「class属性」になっている。

div>div#page>p.title+p|c

で、

<div>
        <div id="page">
            <p class="title"></p>
            <!-- /.title -->
            <p></p>
        </div>
        <!-- /#page -->
    </div>

となる。（デフォルト設定の場合）

設定できるのは、
・filter.commentTrigger: コメント出力のトリガーとなるべき属性のリスト。デフォルトはid, class
・filter.commentAfter: 「重要なタグ」の直後に配置されるべきコメント。
・filter.commentBefore: 「重要なタグ」の直前に配置されるべきコメント。
である。

私はコメントが「重要なタグ」の前にある方が好みなので、
setting.jsonには、

"emmet.preferences": {
    "filter.commentBefore": "<!-- comment -->\n",
    "filter.commentAfter": ""
}

と記入している。
（使う機会はあるのだろうか？という疑問は残る）

lang="en"を"lang="ja"にする。

setting.jsonに以下を記述する。

"emmet.variables": {
    "lang": "ja"
}

まとめ

enをjaに自動化できたことは、効率化に繋がった。
自動でのコメントを置くのも役に立つかもしれない。
!でできる限り入力したいので、User Snippetsなどの変更も視野に入れていきたい。

追記

ユーザースニペットについて詳しく書かれたサイトがありましたので、ご紹介します。