Help us understand the problem. What is going on with this article?

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を使っていればあまり使わない。
Yufu4
Hello World!と叫びまくるヘッポコプログラマ
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした