KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

emmet.vim (Vimのhtml5補完)をインストールした。

経緯

VSCodeからVimに移行して二ヶ月が立つ。

クリップボードにコピーしたりもスムーズにできるようになってきた(参考記事)し、

kei-s-lifehack.hatenablog.com

レジスタとやらも少し知る機会になってよかった。

しかしHTML5ファイルを一から書く機会は実はなかった。 先ほど初めてHTML5ファイルを書こうとして DOCTYPE宣言のスペルが書けずに気が付いた。

VSCodeでは ! と打てば補完してくれるから、気にしたことはなかったなと。

コピペに毎回頼るのも非効率なのでPlug-inを探すことにした。

たどり着いたのがこのページだ

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

これのemmet.vim (zen coding)を導入してみた。

....が、これまでの記事のように初心者向けに画像を多用しての丁寧な説明はなかったので

少しハマったw

導入手順

手順をわかりやすく説明すると

Emmet.vim - vim plugins for HTML and CSS hi-speed coding. : vim online

emmet.vimのサイトの下の方に 最新のDLリンクがあるのでそれをOSのDownloadsあたりにDLして

~/.vim/bundle

HOME下の.vimフォルダの/bundleフォルダに送り unzip(解凍)する。この中にREADMEやTUTORIALもあるので親切だ。

そしていつものようにNeoBundle先生に頼めばいいだけだ。 NeoBundle 'mattn/emmet-vim'

これで html5: とだけ書いて Ctrl y , のキーを押せば

<!DOCTYPE html> ここまでやってくれるのだ!!!!

他にもタグをバシバシかける機能もあるので活用していこうと思う!!! HTML5ゲーム制作頑張るぞ!!!

LINKS

github.com

Emmet.vim - vim plugins for HTML and CSS hi-speed coding. : vim online

EOF