背景
最近純粋なvimでは飽きたらずついにプラグインに手を出してしまいました。 そこで今回はHTMLでタグ補完を行える「emmet-vim」をご紹介
対象
NeoBundleって何？
NeobundleはShougoさんによって作られた、vimプラグインのパッケージマネージャーです。 日本人発のOSSはどこか惹かれますね
emmet-vimって何？
HTMLやCSSののコーディング高速化ツールです。 指定されたタグを展開することでコードを書けるようになります。 うまく使うことができれば, 高速かつ楽にコーディングできるようになると思います.
Neobundleのインストール
$ curl https://raw.githubusercontent.com/Shougo/neobundle.vim/master/bin/install.sh > install.sh $ bash ./install.sh
上記を実行する事でvimrcに書くべき内容が出力されます。 私の環境だと下記のようになっています。 これをvimrcの先頭に追加してください。
"NeoBundle Scripts-----------------------------
if &compatible
set nocompatible " Be iMproved
endif
" Required:
set runtimepath+=/Users/Ryuichi/.vim/bundle/neobundle.vim/
" Required:
call neobundle#begin(expand('/Users/Ryuichi/.vim/bundle'))
" Let NeoBundle manage NeoBundle
" Required:
NeoBundleFetch 'Shougo/neobundle.vim'
" Add or remove your Bundles here:
NeoBundle 'Shougo/neosnippet.vim'
NeoBundle 'Shougo/neosnippet-snippets'
NeoBundle 'tpope/vim-fugitive'
NeoBundle 'ctrlpvim/ctrlp.vim'
NeoBundle 'flazz/vim-colorschemes'
" You can specify revision/branch/tag.
NeoBundle 'Shougo/vimshell', { 'rev' : '3787e5' }
" Required:
call neobundle#end()
" Required:
filetype plugin indent on
" If there are uninstalled bundles found on startup,
" this will conveniently prompt you to install them.
NeoBundleCheck
"End NeoBundle Scripts-------------------------
上記でneobundleの設定は完了です。 ここからはHTML用の補完プラグインを追記します。
下記をvimrcへ追記してください
NeoBundle 'mattn/emmet-vim'
あとは適当にテキストを開くのみで適用されます。
<C-y>を入力後に「,」を実行することでタグが自動展開されます
<!-- 展開前 --> html<C-y>, <!-- 展開後 --> <html></html>
主なタグ
| 記号 | 機能 |
|---|---|
| # | IDとして展開する |
| . | classとして展開する |
| > | 階層を1つ下げる |
| + | 要素を同階層に展開する |
| * | 要素を繰り返す |
| $ | アスタリスクと一緒に使うことで連番を振る |
| () | 1つのブロックとしてまとめる |
| [] | srcやhrefなどの属性の追加を行う |
| {} | テキストの挿入 |
