はじめに
以下の人を対象としています。モデルは私です。
- 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"
}
}
],
}
最後に
私自身、エンジニア未経験の超初心者です。
もし間違っている点や「ここが上手くいかない！」という部分があれば、コメントで教えていただけると幸いです。