Vim
HTML
zenCoding

vimでhtmlをスラスラ書くためのレシピ

More than 5 years have passed since last update.


  • ただの、自己満足乱れ書き

  • ふむ、下々の文章でも見てやるかって人だけ見てくれればおk

  • 対象はvimはじめたいという人から中級者ぐらい


vimでhtmlファイルを編集するときに知ってると気持ち良くなれるコマンド

というか最低限覚えておかないと、コーディング時間が3倍以上になる系のコマンド。


アクション範囲ターゲットの3つの組み合わせコマンド

例)citとタイプ

<div>text</div> => <div></div>

↑消えて挿入モードに移行



  • citcはアクション。cの場合は削除して挿入モードに変更。他のアクションに置き換える事も可。d(削除)v(選択)など。


  • citiは範囲。iはタグの中身が範囲でaに置き換えるとタグ全体が範囲になる。上記の場合でaにすると<div></div>ごと消えて挿入モードになる。


  • cittはターゲット。tの場合はタグに対して行う。他にも'"<>{}()と言ったような何かで挟むものに使える。<>のような左右で違う記号はどちらか一方で良い。例ci<

その逆はプラグインsurround.vimで。(下の方で紹介)


アクション+検索の組み合わせコマンド

例)ct"とタイプ

image4image5



  • ct"cは削除して挿入モード。もちろん他のアクションなども使える。dvなど。


  • ct"tは次に挿入した文字の手前までカーソルを移動。fの場合は検索する文字も含める。


  • ct"は検索する文字

ちなみに、t(文字単体)のかわりに/(文字列)使うのも結構強力。

例)c/</div>などするとカーソル位置から</div>まで削除して挿入モード。


ctrl+v(矩形範囲)

矩形範囲を使うといろいろと便利

img1img2img3

1. ctrl+vで縦に選択

2. Iをタイプし適当に文字列を挿入

3. escするとあら不思議。すべてに文字列が入る。

Iを他のアクションに変える事も可。例えばdとタイプしたら選択しているところを削除。

これを使えるようになると数行一気にインデントにしたり、コメントアウトしたり、いろいろと使える。

2013/09/13 12:00追記矩形範囲を使った行末の一括追加

一日一回以上使ってる気がしたので追記。

img4img5img6img7

1. ctrl+vで縦に選択

2. $をタイプ

3. Aをタイプ後、文字列挿入

4. escするとあら不思議。すべての行末に文字列が入る。


入れていると気持ち良くなれるプラグイン


surround.vim

DL => http://www.vim.org/scripts/script.php?script_id=1697

unzip surround.zip

cp ./surround/plugin/surround.vim ~/.vim/plugin/

使用例

こんにちは ← vで選択後にS<div>と入力

<div>こんにちは</div>

タグ以外にも'"、括弧系もできる。

逆ももちろんできる。

<div>こんにちは</div> ← dstと入力

こんにちは

削除して別のものに付け替える

<div>こんにちは</div> ← cst<span>と入力

<span>こんにちは</span>

他にもあるが、主要なのはこの三つ。


emmet.vim (zen coding)

DL => https://github.com/mattn/emmet-vim

unzip emmet-vim-master.zip

cp ./emmet-vim/plugin/emmet.vim ~/.vim/plugin/
cp ./emmet-vim/autoload/emmet.vim ~/.vim/autoload/
cp -a ./emmet-vim/pautoload/emmet ~/.vim/autoload/

使用例

html:5 ← 入力後に<ctrl+y>,と入力

<!DOCTYPE html>
<html lang="en">←enをjaに変え方は一番したに記述
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

div>ul>li.class#id_$$*5 ← 入力後に<ctrl+y>,と入力

<div>
<ul>
<li id="id_01" class="class"></li>
<li id="id_02" class="class"></li>
<li id="id_03" class="class"></li>
<li id="id_04" class="class"></li>
<li id="id_05" class="class"></li>
</ul>
</div>

説明



  • >は下の階層


  • +は同階層


  • *数値は個数


  • $は連番が入る $を並べた数の桁が使える


  • .はクラス名 #はID名

  • ()はブロックにできる 複雑な階層があるときなどに使用


div>(ul>li*5)+span




  • []はプロパティなど設定


a[href=http// sytle=display:none;] → <a href="http//" sytle="display:none;"></a>


ちなみに、a:linkと書くと<a href="http://"></a>になるみたいな書き方も用意されているが、量が多いので割愛。

cssも用意されている(pos:rposition:relative;など)が量が多いので割愛。

zen coding css 一覧で先生に聞くか、ドキュメントを確認。


設定 lang="en"を"ja"に変更

sed -i -e "s/'lang': \"en\",/'lang': \"ja\",/g" ~/.vim/autoload/emmet.vim

~/.vim/autoload/emmet.vimの中にある'lang': "en"を'lang': "ja"に変更すればおk

2013/09/08 13:32追記コメントにてご指摘を受けたので追記

ソースをわざわざいじらなくてもvimrcの設定で行けるみたいです。

let g:user_emmet_settings = {

\ 'lang' : 'ja'
\ }


yankring.vim

yankの履歴をさかのぼる(コピペの履歴をさかのぼる)

DL => http://www.vim.org/scripts/script.php?script_id=1234

unzip yankring_170.zip

cp ./yankring_170/plugin/yankring.vim ~/.vim/plugin/

使用方法

pでペーストした後、ctrl+nで昔のyankにさかのぼれる。反対はctrl+p


後あれば編集に役立つプラグイン(詳しくは先生に聞いて下さい)


  • NERD_tree.vim ディレクトリのtree表示

  • changed.vim 最後に保存したときからどこの行に追加、削除、変更があったかを左側に表示

  • closetag.vim 閉じタグを自動挿入

  • mru.vim 開いたファイルの履歴を管理。NERD_treeを使っていればあまり使わない。