hello-world
webエンジニアのメモ。とりあえずやってみる。

[vim]Emmetを導入してhtmlマークアップを効率化する

公開日時
#emmet#vim

emmet-vimを使うとvimにEmmet環境を構築できます。

  • インストール
# ~/.vimrc

NeoBundle 'mattn/emmet-vim'
  • キーバンドと言語設定とインデント設定
# ~/.vimrc

"------------------------------------
" emmet-vim
"------------------------------------
let g:user_emmet_leader_key='<c-e>'
let g:user_emmet_settings = {
    \    'variables': {
    \      'lang': "ja"
    \    },
    \   'indentation': '  '
    \ }

「Ctrl-e,」で変換できるようにしました。

また、言語設定は他のサイトでは'lang': "ja"だけで変更可能と書かれていたのですが、自分の環境だとうまく動かなかったのでvariables内にlangを設定しました。

indentationはインデント幅でスペース2つに設定しています。

  • 使ってみる
div#hoge>ul>li.sample$*5

5にカーソルがある状態で、「Ctrl-e,」を入力すると

<div id="hoge">
  <ul>
    <li class="sample1"></li>
    <li class="sample2"></li>
    <li class="sample3"></li>
    <li class="sample4"></li>
    <li class="sample5"></li>
  </ul>
</div>

すごい！ これはお手軽ですね。

あと ! で「Ctrl-e,」を入力すると

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

</body>
</html>

に一発で変換してくれるのもいいですね。

あとは少しずつ記法を覚えていきます。

Emmet記法を覚えるのに参考になるサイト