自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

vimプラグインのemmetとsurroundのインストール方法と使い方【NeoBundleは不要】

  • 作成日時：
  • 最終更新日時：
  • Categories： others
  • Tags： vim 作業効率化
thumbnail

vimを使用して本格的にHTMLのコーディングをしたいと思ったので、有名なemmet.vimとsurround.vimをインストールすることにしました。忘れてはいけないので備忘録として使い方や活用例なども含めて書き残します。

巷では、プラグイン管理ツールであるNeoBundleをインストールする必要があると言われていますが、無くても問題なくできました。むしろNeoBundleはすでに開発が止まっていて、公式からも使用は非推奨であると言われているようです。今回はNeoBundleは無しでプラグインを実装させます。

emmet.vimの概要とインストール方法

emmet.vimの概要

emmet.vimは挿入モードで文字列を入力してショートカットキーを押すことでHTMLを自動的に組み立てる機能を持つプラグインです。例えば挿入モードで以下のように入力します。

p

このpを入力した状態で<c-y>,を押すとこうなります（Ctrlキーを押しながらyを押して,を押す）。すぐに押さないと待ち時間が切れてしまうのですぐに押しましょう。待ち時間はおよそ1秒から2秒ほどです。

<p></p>

他にもspanやcodeなど代表的なタグが使用できるようになっています。他にも以下のような使い方もできます。

ul>li*4（ここで<c-y>,を押す）
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

ul>li*4はulタグの配下にliタグを4個挿入させます。このように>などを使用することで柔軟なコーディングにも対応可能です。

emmet.vimのインストール方法

emmet.vimは【外部リンク】https://github.com/mattn/emmet-vimからダウンロードが可能です。リンクからダウンロードしたzipファイルは~/.vim/にコピーして展開します。

cp ~/Download/emmet-vim-master.zip ~/.vim/
cd ~/.vim/
unzip ~/emmet-vim.master.zip

これでインストールは完了です。最初からNeoBundleは不要だったのです。~/.vimディレクトリが存在しない場合はmkdirで作ってください。

emmet.vimの使い方

emmet.vimの使い方を下記に列挙します。

タグの配下にタグを設置する

タグの配下にタグを設置する場合は>を使います。

実行前のコード
ol>li
実行後のコード
<ol>
    <li></li>
</ol>

タグを指定した回数だけ作る

タグを指定した回数だけ作るには*を使用して数値を指定します。

実行前のコード
ol>li*5
実行後のコード
<ol>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ol>

タグの次に別のタグを作る

タグの次にタグを作るには+を使用します。

実行前のコード
h2+div
実行後のコード
<h2></h2>
<div></div>

タグをグループ化させる

タグを()でグループ化させることによって*で指定した回数の繰り返し処理を正常にまとめることができます。

実行前のコード
(h2+div)*5
実行後のコード
<h2></h2>
<div></div>
<h2></h2>
<div></div>
<h2></h2>
<div></div>
<h2></h2>
<div></div>
<h2></h2>
<div></div>

タグにクラスやIDを指定する

IDを指定するときには#を、クラスを指定する際には.を入力しましょう。

実行前のコード
h2#chapter1+div.sample
実行後のコード
<h2 id="chapter1"></h2>
<div class="sample"></div>

クラス名やID名をナンバリングさせる

$と*を使用すれば簡単にナンバリングができます。

実行前のコード
ol>li.sample$*5
実行後のコード
<ol>
	<li class="sample1"></li>
	<li class="sample2"></li>
	<li class="sample3"></li>
	<li class="sample4"></li>
	<li class="sample5"></li>
</ol>

タグの中にテキストを挿入する

タグの中にテキストを挿入する場合は{}を使用します。

実行前のコード
a{これがリンクです}
実行後のコード
<a href="">これがリンクです</a>

タグの中にデータを挿入する

aタグやimgタグを使用するときに中のデータを挿入しておきたい場合は[]を使用します。

実行前のコード
a[href=http://example.com/]{example.com}
実行後のコード
<a href="http://example.com/">example.com</a>

emmet.vimの活用例

以上の使い方を踏まえて、具体的な活用例を紹介します。

目次を作る

ul>(li>a[href="#chapter$"])*5

*は指定されたタグを繰り返して書き込む機能があり、それがグループ化されたliタグに反映されているので以下のようになります。liタグの個数を増やしたい場合は行末の5を任意の数字に変更してください。

<ul>
	<li><a href="#chapter1"></a></li>
	<li><a href="#chapter2"></a></li>
	<li><a href="#chapter3"></a></li>
	<li><a href="#chapter4"></a></li>
	<li><a href="#chapter5"></a></li>
</ul>

このように$でナンバリングも可能です。予め作っておいた見出しを矩形選択でヤンクしてペーストすれば、一瞬でこんなふうになります。

<ul>
	<li><a href="#chapter1">見出し1</a></li>
	<li><a href="#chapter2">見出し2</a></li>
	<li><a href="#chapter3">見出し3</a></li>
	<li><a href="#chapter4">見出し4</a></li>
	<li><a href="#chapter5">見出し5</a></li>
</ul>

手順は予め作っておいた見出しを矩形選択して$を押してヤンク、先の展開したコードの先頭のaタグのテキスト部分にpキーを押してペーストさせるだけです。

h2見出しを作る

h2見出しを作る際にも先程と同じように*を使用して繰り返しタグを表示させます。

h2#chapter$*5

<h2 id="chapter1"></h2>
<h2 id="chapter2"></h2>
<h2 id="chapter3"></h2>
<h2 id="chapter4"></h2>
<h2 id="chapter5"></h2>

こちらも先程と同様に見出しの矩形選択によって一気に作れます。

<h2 id="chapter1">見出し1</h2>
<h2 id="chapter2">見出し2</h2>
<h2 id="chapter3">見出し3</h2>
<h2 id="chapter4">見出し4</h2>
<h2 id="chapter5">見出し5</h2>

テーブルタグで表を作る

theadとtbodyで分けてテーブルを作る場合は以下のようにしましょう。

table>(thead>tr>th+th)(tbody>(tr>th+th)*3)

tbodyのtrタグを増やしたい場合は*の数値を適当に変更してください。展開すると以下のようになります。

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </tbody>
</table>

入力するヘッダの文字列が決まっているのであれば{}を使用して入力しておけば簡単です。

table>(thead>tr>th{コマンド}+th{効果})(tbody>(tr>th+th))
<table>
    <thead>
        <tr>
            <th>コマンド</th>
            <th>効果</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </tbody>
</table>

内部リンクを挿入する

内部リンクの貼付けはpタグとaタグを使います。

p{【内部リンク】}>a[href=/post/xxxx/]{記事タイトル}
<p>【内部リンク】<a href="/post/xxxx/">記事タイトル</a></p>

[]と{}を使用してaタグの中の値とタグで囲む文字列を指定します。

emmet.vimを効率的に使うためには

これらの長い文字列を使うたびに、一から入力していると時間がかかってしまいます。だから雛形によく使うコードを予め入力しておくことをおすすめします。

例えば、HUGOを利用している方はdefault.mdに以下の内容をまとめて記入しておけば記事の編集が容易です。

<!-- Emmet用の雛形
##目次を表示させる##
ul>(li>a[href="#chapter$"])*10
##見出しを表示させる##
h2#chapter$*10
##内部リンクを表示させる##
p{【内部リンク】}>a[href=/post/2019xxxx/]{記事タイトル}
##画像を貼る##
p>img[src=/images/2019xxxxxxx.jpg alt=test]
##テーブルを作る##
table>(thead>tr>th+th)(tbody>(tr>th+th))
-->

起動時にこれらのコメントが表示されるので、編集の際にコードをヤンクしてペーストした後、emmetのショートカットキーを押して展開しましょう。このコードの行番号を覚えておけば一瞬でヤンクすることも可能です。

surround.vimの概要とインストール方法

surround.vimの概要

surround.vimはビジュアルモードで指定した文字列を指定したタグで囲むことができます。例えば以下のようにpタグで囲みたい文字列があるとします。

ここをpタグで囲む

ビジュアルモードで選択した後、Sを押してsurround.vimを呼び出し、<p>を入力するとこのようになります。

<p>ここをpタグで囲む</p>

emmet.vimとは違って、囲むことができるタグは一つしか指定できない点に注意しましょう。ビジュアルモードで一行を選択するときはBvEと入力することで、改行させずに一行まるごと選択してタグで囲むことができます。

surround.vimのインストール方法

surround.vimのインストール方法もemmet.vimと同様で、~/.vim/ディレクトリにダウンロードしたzipファイルを展開すれば良いだけです。surround.vimは【外部リンク】https://www.vim.org/scripts/script.php?script_id=1697から最新版のsurround.zipをダウンロードします。

そして以下のコマンドを実行して展開させます。

cp ~/Download/surround.zip ~/.vim/
cd ~/.vim/
unzip ~/surround.zip

これだけです。surround.vimにもNeoBundleは不要です。

surround.vimの使い方

先の項目で説明したとおり、surround.vimはビジュアルモードで範囲を選択した後、Sを押して任意のタグ名を入力するだけで自動的に補完して文字列を囲んでくれます。

もちろん、タグだけでなく"や'などでも囲むことはできます。

任意の文字またはタグで囲む

ビジュアルモードを使用して任意の文字やタグで囲むには先ほど説明したとおり、vキーを押して範囲を選択した後、Sを押して文字やタグを入力するだけです。

例として、文字列がHello vim worldでHからdまで選択した状態から以下のコマンドを実行した結果をまとめます。

コマンド 実行結果 覚え方
S[ [ Hello vim world ] Surround [ (訳:[で囲む）
S] [Hello vim world] Surround ] (訳:]で囲む）
S@ @Hello vim world@ Surround @ （訳:@で囲む）
S<p> <p>Hello vim world</p> Surround <p> （訳:pタグで囲む）
S( ( Hello vim world ) Surround ( （訳:(で囲む）
S) (Hello vim world) Surround ) （訳:(で囲む）

普通の括弧の記号でくくると、文字列の前後に空白がひとつできてしまいます。これを避けるためには逆側の括弧を指定すれば良いのです。

文字列を囲んでいる要素を除去する

文字列を囲んでいる要素を除去する場合は、タグを除去する場合と普通の記号を除去する場合によってコマンドが異なります。

文字列が@Hello vim world@の場合にds@コマンドを実行するとHello vim Worldになります。ds@コマンドは[delete surround @]と覚えましょう。

一方でタグで囲まれた部分の除去は簡単でdstコマンドを実行するだけです。[delete surround tag]と覚えましょう。

コマンド 実行結果 覚え方
ds@ Hello vim world delete surround @ (訳:囲んでいる@を削除する）
ds[ Hello vim world delete surround [ (訳:囲んでいる[を削除する）
dst Hello vim world delete surround tag （訳:囲んでいるタグを削除する）

文字列を囲んでいる要素を変更する

文字列を囲んでいる要素を変更したい場合はcsコマンドを使用します。

例えば@Hello vim world@を[Hello vim world]に変更したい場合はcs@]と入力すればいいのです。

一方でタグをで囲まれている文字列を別のタグに変更したい場合はcst<div>と入力しましょう。

コマンド 実行結果 覚え方
cs@] [Hello vim world] change surround @ to ] (訳:囲んでいる文字を@から]に変更する）
cs@$ $Hello vim world$ change surround @ to $ (訳:囲んでいる文字を@から$に変更する）
cst<div> <div>Hello vim world</div> change surround tag to <div> （訳:囲んでいるタグをdivタグに変更する）

ビジュアルモードを使用せずに任意の文字で囲む

ビジュアルモードを使用しなくても任意の文字で囲むことができます。ysコマンドを使いましょう。[you surround]と覚えます。

1単語を@で囲みたいのであればysaw@コマンドを使用します。[you surround a word @]と覚えます。文字列一行を@で囲みたい場合はyss@と入力します。

コマンド 実行結果 覚え方
ysaw@ @Hello@ vim world you surround a word @ (訳:一単語を@で囲む）
yss@ @Hello vim world@ you surround sentence @ (訳:一文を@で囲む）
yss<div> <div>Hello vim world</div> you surround sentence <div> （訳:一文をdivタグで囲む）

surround.vimの活用例

surround.vimの活用例は上記の使い方をマスターしていれば十分でしょう。emmet.vimでタグを作り忘れたときに、文字列をタグで囲んだりできるので便利です。

HTMLのコーディングにはyssコマンドを使用した一文のタグ囲みとビジュアルモードで選択してからのSコマンドを頻繁に使用するので、それだけ覚えていれば特に問題はありません。

結論

結論を言うと、emmet.vimとsurround.vimのインストールにはNeoBundleは不要です。vimのプラグイン管理ツールであるNeoBundleは開発が止まっているので、インストールすると何らかの不具合が発生してしまうことを考慮しておきましょう。

基本的にはプラグインのzipを~/.vim/に展開すればいいだけなので簡単です。後は使い方を覚えるまでチートシートを紙に印刷してそのへんに貼り付けておきましょう。

スポンサーリンク

シェアボタン

Twitter LINEで送る Facebook はてなブログ