html.erbファイルの実装を入力補完のプラグインを使って楽に書きましょう！
Ruby on RailsでのWebアプリケーション開発を行う際のビューに関する設定を備忘録としてメモしておきます。
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 記法」などで検索してみると良いです。
参考サイト