Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
65
Help us understand the problem. What is going on with this article?
@Yohei_Shiina

VScode x Rails:erbファイルでEmmet(エメット)を使う方法

More than 1 year has passed since last update.

この記事は情報が古い可能性があります。
後述の Expension on Tab を true にするだけで解決するかもしれません。

VSCodeRails開発 してるんだけど、erbファイルEmmet 使えない!という人や
そもそ もHTMLファイル でも Ememt 使えないよ! という人は以下を試してみてください。

VSCode の設定

まず VSCode の左下の歯車マークをクリック
次に、 settings をクリック

検索窓で、

"Trigger Expansion On Tab" と検索
Emmet:Trigger Expansion on tab の左のチェックマークを入れる

これで Html ファイルでは Emmet が使えるようになったはず。

セッティングファイルの記述

さらに続けて、検索窓で

edit in settings” と検索
少し小さい文字の Edit in settings.json をクリック

ファイルが開くので以下を追記

settings.json
{
    "workbench.iconTheme": "vscode-icons",
    "window.zoomLevel": 0,
    "emmet.triggerExpansionOnTab": true,

    # ここから記述
    "emmet.includeLanguages": {
        "erb": "html"
    }
}

これで試しに erbファイル
h1 と打ってから Tabキー を叩いてください。

それでうまくいかなければ,

拡張機能のインストール

VSCode 画面上 の左上側 にあるアイコンの 下の方 にある、
四角のアイコンの拡張機能 ( Extentions ) をクリック
erb と検索してerbをインストール

コレです⬇︎
https://marketplace.visualstudio.com/items?itemName=CraigMaslowski.erb


上記全て終えたら、晴れて Emmet が使用できるはずです。

※ Emmet は VSCode じゃなくても使えます。

たくさんコードを書いてみんなで爆速になりましょう

ごあいさつ

実はこの記事がQiitaでの初投稿になります。
1人でも多くの人のお役に立てたらと願っていますが、至らない所あるかもしれません。
その際は遠慮なく教えていただけると幸いです。

参考

65
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Yohei_Shiina
未経験から某プログラミングスクールで受講 & メンターを経験後、 受託 & 自社開発企業のサテライトオフィスでエンジニアとして就職し、オフィスリーダーとして日々奮闘中。 なるべく感情を無にして多くにチャレンジし、経験を積んで行こうと思います。 南国が大好きです。セブ / バリ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
65
Help us understand the problem. What is going on with this article?