Vimって☆Emmetさん

タグ: , | 投稿日: 投稿者:

どうも、ニタです。先日、社内でEmmet(Zen Conding)を紹介する機会がありました。
当日は、IDEやテキストエディタのアプリ上でデモを行ったのですが、vimmerが多いせいか、そもそもHTMLコーディングをする機会が少ないのか、あまり採用されてない感じです(´・ω・`)
そこで今回は、vimでEmmetを使えるようにしてみます。

Emmetって何?

Emmetは、HTMLやCSSのコーディングを効率化してくれるツールです。
テキストエディタやIDE上でショートカットコードを打つと、HTMLやCSSに転換されます。

Emmet

Zen Codingというのもあります

Emmentで検索すると「Zen Coding」というのも出てきます。これはEmmetの前身となるプロジェクトで、EmmetはZen Codingを基に作られており、Zen Codingの改良版と言って良いでしょう。

閑話休題。実際にEmmetを使ってみましょう。

html:5

Emmetのプラグインが入ったエディター上で、こんな感じに入力して展開させると…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

こんな感じに一気にHTMLコードができちゃう!
更に…

(div#content-id$$$.page-content-class>h1+h2)*2

独自記法を使ってタグのidやクラスを指定したり、同じ要素をくり返したりも出来ます。

<div id="content-id001" class="page-content-class">
    <h1></h1>
    <h2></h2>
</div>
<div id="content-id002" class="page-content-class">
    <h1></h1>
    <h2></h2>
</div>

繰り返しはループ処理でも書ける場合もありますが、コーディングの高速化と閉じタグや属性を書く手間を最小限に抑えられるのが気に入っています。

VimでEmmetを使えるようにする

さていよいよ本題。
VimでEmmetを使えるようにするには「emmet-vim」というプラグインをインストールします。
このプラグインは、Vimのプラグイン管理ツールのNeoBundleで管理します。NeoBundleに関しては、後日改めて紹介するかもしれません。
取り急ぎ、以下の様にしてNeoBundleとemmet-vimをインストールします。

NeoBunbleとemmet-vimのインストール

NeoBundleは以下のように

# 配置先のディレクトリを作成する
mkdir -p ~/.vim/bundle
cd ~/.vim/bundle

# NeoBundleをgitHubのリポジトリから取得する
git clone git://github.com/Shougo/neobundle.vim

# emmet-vimをgitHubのリポジトリから取得する
git clone https://github.com/mattn/emmet-vim.git 

その後、vimの設定ファイル~/.vimrcを作成してNeoBundleをインストールします。

set nocompatible
filetype plugin indent off

if has('vim_starting')
  set runtimepath+=~/.vim/bundle/neobundle.vim
  call neobundle#rc(expand('~/.vim/bundle'))
endif 

NeoBundleFetch 'Shougo/neobundle.vim'

# 以下は必要に応じて追加
NeoBundle 'Shougo/unite.vim'
NeoBundle 'Shougo/neosnippet.vim'

filetype plugin indent on

また、Mac OSX El Capitanの場合、上記の設定だとインストールできないようです。

# インストール用シェルファイルをダウンロードし、実行
$ curl https://raw.githubusercontent.com/Shougo/neobundle.vim/master/bin/install.sh > install.sh
$ sh ./install.sh

.vimrcの表記も変わります。

" Note: Skip initialization for vim-tiny or vim-small.
 if 0 | endif

 if has('vim_starting')
   if &compatible
     set nocompatible               " Be iMproved
   endif

   " Required:
   set runtimepath+=~/.vim/bundle/neobundle.vim/
 endif

 " Required:
 call neobundle#begin(expand('~/.vim/bundle/'))

 " Let NeoBundle manage NeoBundle
 " Required:
 NeoBundleFetch 'Shougo/neobundle.vim'

 " My Bundles here:
 " Refer to |:NeoBundle-examples|.
 " Note: You don't set neobundle setting in .gvimrc!

 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
NeoBundle 'mattn/emmet-vim'

上記を~/.vimrcに追記し、vim上で:NeoBundleInstallというコマンドを実行してプラグインをインストールします。

VimでEmmetしてみる

Vim上でEmmetを実行するには、<C-y>,で行います。control + yのあとカンマ「,」をタイプします。
キーバインドの設定は~/.vimrcで設定します。

# 実行時のキーバインド変更する場合(ここではYからEに変更)
let g:user_emmet_leader_key = '<C-E>'

これでVim上でも高速HTMLコーディングが可能になりました。

それではまた来年!

Share on Google+Tweet about this on TwitterShare on StumbleUponShare on Facebook

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>