VS Codeで.html.erbファイルでemmetを有効にする方法

こんにちは！

今回はVS Codeで.html.erbファイルでemmetを有効にする方法についてまとめます。

状況

• VS Codeで.html.erbファイルを開くと、HTMLの補完、Railsの<% %>の補完共に機能しなかった
• VS Codeの右下のステータスバーのLanguage Modeにはhtml.erbと表示されている

対策

• VS CodeのSettingsからfile: Associationsを検索

  • Add ItemでItemに*.erb、Valueにerbを入れる

• 次にVS CodeのSettingsからEmmet: Include Languagesを検索

  • Add ItemでItemにerb、Valueにhtmlを入れる

結果

• .html.erbファイルでHTMLの補完、Railsの<% %>の補完共に機能するようになった
• VS Codeの右下のステータスバーのLanguage Modeにerbが表示されるようになった

おわりに

今回の設定項目二つは、調べてみるといろいろな設定の組み合わせが出てきます。うまく動作した一例としてあげておきます。もしこの設定で動かなければ、上記の設定項目で調べると他のパターンが出てきますのでそちらを参考にしてみてください。

37/100