- ただの、自己満足乱れ書き
- ふむ、下々の文章でも見てやるかって人だけ見てくれればおｋ
- 対象はvimはじめたいという人から中級者ぐらい
vimでhtmlファイルを編集するときに知ってると気持ち良くなれるコマンド
というか最低限覚えておかないと、コーディング時間が3倍以上になる系のコマンド。
アクション範囲ターゲットの3つの組み合わせコマンド
例)citとタイプ
<div>text</div> => <div></div>
↑消えて挿入モードに移行
-
citのcはアクション。cの場合は削除して挿入モードに変更。他のアクションに置き換える事も可。d(削除)v(選択)など。 -
citのiは範囲。iはタグの中身が範囲でaに置き換えるとタグ全体が範囲になる。上記の場合でaにすると<div></div>ごと消えて挿入モードになる。 -
citのtはターゲット。tの場合はタグに対して行う。他にも'や"、<>、{}、()と言ったような何かで挟むものに使える。<>のような左右で違う記号はどちらか一方で良い。例ci<。
その逆はプラグインsurround.vimで。(下の方で紹介)
アクション+検索の組み合わせコマンド
例)ct"とタイプ
→ 
-
ct"のcは削除して挿入モード。もちろん他のアクションなども使える。dやvなど。 -
ct"のtは次に挿入した文字の手前までカーソルを移動。fの場合は検索する文字も含める。 -
ct"の”は検索する文字
ちなみに、t(文字単体)のかわりに/(文字列)使うのも結構強力。
例)c/</div>などするとカーソル位置から</div>まで削除して挿入モード。
ctrl+v(矩形範囲)
矩形範囲を使うといろいろと便利
→ 
→ 
- ctrl+vで縦に選択
-
Iをタイプし適当に文字列を挿入 -
escするとあら不思議。すべてに文字列が入る。
Iを他のアクションに変える事も可。例えばdとタイプしたら選択しているところを削除。
これを使えるようになると数行一気にインデントにしたり、コメントアウトしたり、いろいろと使える。
2013/09/13 12:00追記矩形範囲を使った行末の一括追加
一日一回以上使ってる気がしたので追記。
→ 
→ 
→ 
- ctrl+vで縦に選択
-
$をタイプ -
Aをタイプ後、文字列挿入 -
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:rでposition: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"に変更すればおｋ
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を使っていればあまり使わない。