VSコード内でemmetを有効にする2021.01.29

3012 ワード
erb コーディング効率化 emmet erb テキストリンク

VSコードでは予測変換機能（emmet）が標順で使用出来ます。
例えば、HTML内で

test.html
div

と打ち、tab　キーを押すと

<div></div>

と、予測変換されます。

HTMLおよびCSSはVSコードの標準としてemmetという機能が使えるようになっているからです。
一方で.erbファイルではemmetが有効になっておらず予測変換機能が使用出来ません。
HTML,CSSと同様に使いたいと思っている方も多いのではないでしょうか。
そこで、今回はVSコードで、erbファイルもemmetが有効にする方法を挙げてみます。

目的

VSコード内でerbファイルのemmetを有効にする

条件

バージョン： November 2020 (version 1.52)

内容

バージョンの確認
1. 上部メニューバーの　”Help”　を選択
2. ４番目のリスト　"Release Note"をクリック
3. 「November 2020 (version 1.52)」　を確認
（本バージョン以外は検証しておりません）

※動画参考
https://gyazo.com/517dea73b388d304a6408777a69d8097

setting.jsonへ移行
1. command + ,　で Settings を開く
2. Search settings　に　"json"と記入
3. Launch 内の　Edit in setting.json　をクリック
4. setting.json　内にいることを確認

setting.jsonの内容を変更
最後の2つの項目を修正します。

1.emmet.excludeLanguagesを"markdown"とする

setting.json
    "emmet.excludeLanguages": [
        "markdown"
    ],

2.emmet.includeLanguagesを以下の通り編集

setting.json
 "emmet.includeLanguages": {
        "erb": "html",
        "vue": "html"
    }

以上でerbファイルでもemmetが有効になると思われます。
以下参考動画では、test.html.erbで予測変換機能が実行されているものとなっております。
皆様の参考になれば、幸いです。

※参考動画
https://gyazo.com/0812cb736f9cc43162e2f78c9692b453