はじめに

以下の人を対象としています。モデルは私です。

Railsに関する拡張機能を入れていない
Emmetをerbファイルでも使用したいけど、どの記事を見ても上手くいかない
- マッピングに"ruby": "html"と設定したら、rbファイルまで適用されて使いづらい

なぜ出来ないのか？

VSCodeには言語モードがあり、デフォルトではRails系だとRubyしか存在しません。（右下に表示されています。確認してみましょう）
そのため、erb: htmlとマッピングを設定しても、VSCodeがerbという言語モードを用意していないため適用されません。

一方で、ruby: htmlと設定すればEmmetは適用されますが、例えばrbファイルでUser.newと書いたときに、Emmetが誤認識して展開してしまうという問題が発生します。

じゃあどうすればいいか？

まずは拡張機能の「Rails」をインストールしましょう。

インストール後、VSCodeの設定で以下の通りに記載します。

記載した後html.erbファイルで言語モードをhtml.erbに変更すると、ハイライトが付きEmmetも使用できるようになります。

おまけ

カスタムスニペット編

先ほどインストールした「Rails」にはRails向けのスニペットがある程度用意されています。
html.erbのスニペット一覧

一覧を見てる僕「...あれ？tagとforがあってform_withは無いのか？」

と、このように提供されてるスニペットじゃ足りないことがあります。
こうなったら自分でスニペットを作成してみましょう。

といってもここはおまけコーナーなので私が参考にした記事を持ってきました。
カスタムスペニットの作成はこちらをご確認ください！

シンタックスハイライト編

「Rails拡張機能を入れたら色がついたけど、<%=%>の色がHTMLタグと被って少し見づらい…」

そんな時は、以下の記事を参考にしてみましょう。

サンプル

普通のテキストで使われている白に変換しています

settings.json

    "editor.tokenColorCustomizations": {
        "textMateRules": [
          {
            "scope": [
              "punctuation.section.embedded.begin",
              "punctuation.section.embedded.end"
            ],
            "settings": {
              "foreground": "#D4D4D4"
            }
          }
        ],
      }

最後に

私自身、エンジニア未経験の超初心者です。

もし間違っている点や「ここが上手くいかない！」という部分があれば、コメントで教えていただけると幸いです。