{Blog}フェアーウェイのエンジニアブログです。ニタどうも、ニタです。Conding)を紹介する機会がありました。́・ω・`)そこで今回は、vimでEmmetを使えるようにしてみます。Emmetって何?Emmetは、HTMLやCSSのコーディングを効率化してくれるツールです。テキストエディタやIDE上でショートカットコードを打つと、HTMLやCSSに転換されます。Coding」というのも出てきます。Codingの改良版と言って良いでしょう。実際にEmmetを使ってみましょう。</body></html>こんな感じに一気にHTMLコードができちゃう!更に...(div#content-id$$$.page-content-class>h1+h2)*2独自記法を使ってタグのidやクラスを指定したり、同じ要素をくり返したりも出来ます。<h2></h2></div>繰り返しはループ処理でも書ける場合もありますが、コーディングの高速化と閉じタグや属性を書く手間を最小限に抑えられるのが気に入っています。VimでEmmetを使えるようにするさていよいよ本題。VimでEmmetを使えるようにするには「emmet-vim」というプラグインをインストールします。このプラグインは、Vimのプラグイン管理ツールのNeoBundleで管理します。NeoBundleに関しては、後日改めて紹介するかもしれません。取り急ぎ、以下の様にしてNeoBundleとemmet-vimをインストールします。https://github.com/mattn/emmet-vim.gitその後、vimの設定ファイル~/.vimrcを作成してNeoBundleをインストールします。Capitanの場合、上記の設定だとインストールできないようです。./install.sh.vimrcの表記も変わります。'mattn/emmet-vim'上記を~/.vimrcに追記し、vim上で:NeoBundleInstallというコマンドを実行してプラグインをインストールします。VimでEmmetしてみるVim上でEmmetを実行するには、<C-y>,で行います。yのあとカンマ「,」をタイプします。キーバインドの設定は~/.vimrcで設定します。'<C-E>'これでVim上でも高速HTMLコーディングが可能になりました。コメントをキャンセルメールアドレスが公開されることはありません。