2023/4/12 時点でこちらの記事の最終更新が３年前と、かなり古くなっていましたが、
現在でも emmet の設定について情報を求めてる方がいらっしゃるようなので、更新しました。
また、記事を保存されてる方も多いようなので、念の為、過去に記載していた内容もページ下部にそのまま記載しておきます。
emmet の設定方法
設定は簡単です。
- VSCode の左下の歯車マークをクリックし、settings（設定) を開きます。
- 検索窓に
emmetと入力し、Emmet: Include Languagesという項目を見つけます。 -
Add Itemをクリックし、keyとvalueに以下の値を入力します。
| key | value |
|---|---|
| ruby | html |
最後にOKをクリックしたら完了です。
手元で確認したところ、上記記載のみで、.erbおよび.rbファイルどちらでも emmet を利用できました。
補足
.htmlファイルは初期状態から emmet が利用できるので設定は不要です。
そして設定の変更は、settings.json にも自動で反映されます。（反対にsettings.jsonの変更も設定画面側に反映されます。）
settings.json の開き方はこちらの記事を参考にしてください
両者の違いは、VSCodeの設定をGUIから行うかファイルから行うかという違いだけなので、変更時はお好みで。
ちなみにsettings.json ファイルを使うメリットは、
チーム開発などで皆同じVSCodeの設定が必要な場合に、コードなら簡単に共有できるというのが利点です。
頭の片隅に入れておくと今後の開発に役立つかもしれません。
過去の記載
このセクションは、2023/4/12 以前 にこの記事を参考に設定をしていた人のために、念のため残しています。
これから 初めて emmet の設定をする人は見る必要はありません。
クリックで展開
この記事は情報が古い可能性があります。
後述の Expension on Tab を true にするだけで解決するかもしれません。
VSCode で Rails開発 してるんだけど、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 をクリック
ファイルが開くので以下を追記
{
"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人でも多くの人のお役に立てたらと願っていますが、至らない所あるかもしれません。
その際は遠慮なく教えていただけると幸いです。
参考
ではみなさん、良い開発を！