プログラミングや電子工作などについての記事がほとんどです

Emmetで簡単に既存のタグを他のタグで囲む方法

0 件のコメント

外側にタグを追加するのは面倒

Emmet-Vimを使用していますが、例えば次のコードの外側を<div>タグで囲みたいとします。
<!-- これを -->
<p>
    I am a vimmer.
    As yet I have no name.
    I've no idea where I was born.
</p>

<!-- こうする -->
<div>
    <p>
        I am a vimmer.
        As yet I have no name.
        I've no idea where I was born.
    </p>
</div>
まともに変更しようとすると、まず<p>の上に<div>を入力して、</p>の下に移動して</div>を入力するといった手間がかかります。
これを少しのコマンドで簡単に行いましょう。

Emmet-Vimを使用して入力文字数を削減!

以下に手順を紹介します。

今回の例では、
1. <p>タグの行でShift + v(Visual Lineモードに切り替え)
2. </p>タグの行へ移動
3. Ctrl + Y,を入力
4. VimのステータスラインにTag:と表示されるのでdivと入力

これで希望のコードが生成できます。

手順を一般的に書くと
1. 囲みたい部分の最初の行でShift + v(Visual Lineモードに切り替え)
2. 囲みたい部分の最終行へ移動
3. Ctrl + Y,を入力
4. VimのステータスラインにTag:と表示されるので挿入したい任意のタグを入力

複数のタグで囲みたいときに本領発揮

先ほどの例では、作業手順数に大差がないため、あまり有効性を感じられなかった方もいらっしゃると思います。この手法が真に力を発揮するのは複数のタグで囲む場合です。次の例を紹介しましょう。
<!-- これを -->
<p>
    I am a vimmer.
    As yet I have no name.
    I've no idea where I was born.
</p>

<!-- こうする -->
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <p>
                    I am a vimmer.
                    As yet I have no name.
                    I've no idea where I was born.
                </p>
            </div>
        </div>
    </div>
</body>

一気に面倒な作業に感じますね。
これでも簡単に変更できるのがEmmetのスゴい所。

手順3までは先ほどと同様で、異なる点はTag:以降に記述するコマンドのみです。Tag:以降に次を入力してください。
body>div.container>div.row>col-md-4

期待どおりのコードが生成できたはずです。
つまり、Emmetの記法をそのまま使って任意の選択箇所をタグで囲むことが可能ということになります。

Sublime TextのEmmetでも同様な操作が可能だと思います。ぐぐってみたところAlt + Shift + wらしいです。動作確認していないので保証はしませんが!

0 件のコメント :

コメントを投稿