Quantcast
Channel: Vimタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 5608

Emmetを利用して連番テキストを作る

$
0
0

はじめに

atomで置換を使って連番テキストを作るという記事を見つけた。
私も以前は似たような方法を利用していたが、最近はEmmetを利用して連番テキストを生成しているので共有したい。

前提: Emmetとは

HTMLを書く方の多くはご存知だろうが、Emmetとは簡潔に言ってしまえばHTML/CSSの短縮構文と、それをHTML/CSSに変換するプログラムのことだ。
Emmetは多数のエディタでプラグインとして提供されており、Atom用も提供されている
例えば元記事で行っているinputタグを10個生成したければ下記のように書く。

変換前
input[type=text name=hoge$ id=hoge$]*10

このあと行末でTabキーを押せばHTMLに変換される。

変換後
<inputtype="text"name="hoge1"id="hoge1"><inputtype="text"name="hoge2"id="hoge2"><inputtype="text"name="hoge3"id="hoge3"><inputtype="text"name="hoge4"id="hoge4"><inputtype="text"name="hoge5"id="hoge5"><inputtype="text"name="hoge6"id="hoge6"><inputtype="text"name="hoge7"id="hoge7"><inputtype="text"name="hoge8"id="hoge8"><inputtype="text"name="hoge9"id="hoge9"><inputtype="text"name="hoge10"id="hoge10">

これだけであればわざわざEmmetを使わずとも置換機能で事足りると思うが、Emmetを使えば置換機能でやるのが面倒くさそうな構造であってもすんなりと書ける。

変換前
table#list>thead>th.no{No.}+th.content^+tbody>tr.line$$$*3>th.no{$}+td.content
変換後
<tableid="list"><thead><thclass="no">No.</th><thclass="content"></th></thead><tbody><trclass="line001"><thclass="no">1</th><tdclass="content"></td></tr><trclass="line002"><thclass="no">2</th><tdclass="content"></td></tr><trclass="line003"><thclass="no">3</th><tdclass="content"></td></tr></tbody></table>

このようにゼロパディングもお手の物だ。

本題: 連番テキストを作る

さて、本題は連番を含むHTMLを作るのではなく、連番テキストを作るのである。
結論から書くとこのように書けばよい。

{第$$$行目${newline}}*100

この状態でTabキーを押すと

第001行目
第002行目
第003行目
(中略)
第098行目
第099行目
第100行目

と生成される。

理屈

  1. 文字を入力する場合は{文字}と書く
  2. 改行を入れる場合は${newline}と書く

Emmetは記法にさえ則っていればちゃんと変換してくれる。
そのため、別にタグを含む必要はないのである。
ただし、ファイルタイプはHTMLにしておく必要がある。

おまけ: Vimの場合

Vimであれば文字と入力してyy(行をコピー)して99p(99回貼り付け)とすれば文字を100行入力できる。
また、インクリメントする<Ctrl-a>やデクリメントする<Ctrl-x>というキーバインドがあるが、ビジュアルモードで対象数字を選択した上でg<Ctrl-a>またはg<Ctrl-x>とすると連番になるようにインクリメント、デクリメントしてくれる。

そのため

第001行

と書いてyy99pとし、ビジュアルモードで001を2行目から100行目まで選択してからg<Ctrl-a>と入力すると

第001行目
第002行目
第003行目
(中略)
第098行目
第099行目
第100行目

となる。

なお、Atomでもvim-mode-plusで似たような操作が出来ることを確認したが(vim-modeでは未確認)、

第001行目
第1行目
第2行目
(中略)
第97行目
第98行目
第99行目

とゼロパディングを削除してしまった上に、ビジュアルモードで選択した1行目はインクリメントしないようである。
この辺りVimとは使用感が異なり未だに戸惑うため、Atomを利用するときは上記Emmetを利用した連番テキスト生成を用いている。


Viewing all articles
Browse latest Browse all 5608

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>