htmlのコード実装で入力補完してくれるEmmet

htmlファイルのコードを記述する際、これまで入力補完による楽な記述ができていました。

ですが、Ruby on RailsでのWebアプリケーション開発を行う際、html.erbという拡張子のファイルを作成する際には、入力補完が機能しないことに気づきました。

そんな時はEmmetというプラグインの設定をいじることで解決できます。

Emmetとは？

Emmetとは、HTMLやCSSを省略記法で入力できるプラグインのことを言います。

省略コードの書き方

箇条書きリストのタグを入力したい場合、このような感じで省略コードを書きます。

箇条書きリスト

html.erb

ul>li*10

このように入力してEnterを押すと、以下のように補完して自動的に入力してくれます。

html.erb

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

箇条書きリスト（リンク付き）

html.erb

ul>li*10>a

html.erb

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

最後に

Emmetを設定することでコーディングが格段に楽になり、ミスも減ります。
上記以外にも、いろいろな省略コードがありますので、何か知りたい場合は、「Emmet 記法」などで検索してみると良いです。

参考サイト