VSコードでは予測変換機能（emmet）が標順で使用出来ます。
例えば、HTML内で
div
と打ち、tab キーを押すと
<div></div>
と、予測変換されます。
HTMLおよびCSSはVSコードの標準としてemmetという機能が使えるようになっているからです。
一方で.erbファイルではemmetが有効になっておらず予測変換機能が使用出来ません。
HTML,CSSと同様に使いたいと思っている方も多いのではないでしょうか。
そこで、今回はVSコードで、erbファイルもemmetが有効にする方法を挙げてみます。
目的
VSコード内でerbファイルのemmetを有効にする
条件
バージョン： November 2020 (version 1.52)
内容
バージョンの確認
1. 上部メニューバーの ”Help” を選択
2. ４番目のリスト "Release Note"をクリック
3. 「November 2020 (version 1.52)」 を確認
（本バージョン以外は検証しておりません）
※動画参考
https://gyazo.com/517dea73b388d304a6408777a69d8097
setting.jsonへ移行
1. command + , で Settings を開く
2. Search settings に "json"と記入
3. Launch 内の Edit in setting.json をクリック
4. setting.json 内にいることを確認
setting.jsonの内容を変更
最後の2つの項目を修正します。
1.emmet.excludeLanguagesを"markdown"とする
"emmet.excludeLanguages": [
"markdown"
],
2.emmet.includeLanguagesを以下の通り編集
"emmet.includeLanguages": {
"erb": "html",
"vue": "html"
}
以上でerbファイルでもemmetが有効になると思われます。
以下参考動画では、test.html.erbで予測変換機能が実行されているものとなっております。
皆様の参考になれば、幸いです。