背景画像

VScodeのemmetをmarkdownで有効にする方法

2019年 8月 15日  2019年 8月 20日

VScodeのemmetをmarkdownで有効にする方法

ショートカットをいくら作ろうとも、markdownでemmet使えるのは便利なので・・・

ちょっとばかし設定に、戸惑ったので備忘録です。

VScodeのsettings.jsonを書き換える

ctrlshiftp

を押して、setting.jsonを開きます。

VSCodeでsettings.jsonを開く

以下のコードを追加します。

    // 有効にすると、TAB キーを押したときに Eemmet 省略記法が展開されます。
    "emmet.triggerExpansionOnTab": true,

    // Emmet 省略記法を展開すべきでない言語の配列。(デフォルトでは"markdown"空白で埋める)
    "emmet.excludeLanguages": [],

    // 既定でサポートされていない言語で Emmet 略語を有効にします。ここに、その言語と Emmet でサポートされる言語のマッピングを追加します。
    //  例: `{"vue-html":"html"、"javascript":"javascriptreact"}`
    "emmet.includeLanguages": {
        "markdown": "html",
    },

画像だとこんな感じ

VSCodeでsettings.jsonを開いて、設定を書き換える

markdownファイル上で、pを入力後、tabを押してみてください。

こうなるはずです。

<p></p>

お疲れさまでした。

解説

打ち消しが入っている理由は

    // Emmet 省略記法を展開すべきでない言語の配列。(デフォルトでは"markdown"空白で埋める)
    "emmet.excludeLanguages": [],

dafaultSettings.jsonでmarkdownは対象外になっているからです。

    // Emmet 省略記法を展開すべきでない言語の配列。
    "emmet.excludeLanguages": [
        "markdown"
    ],

まさかこんなトラップがあるとは思いませんでした。

参考 stackoverflow