BlueBear

WEB屋の雑記ブログ

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

ライター情報

七堂 結衣

教師→WEBデザ→フロントエンジニア

WEBマーケやWEBマスタも兼任。SNS広告で一発当てたことも…

フロント系技術を中心としたメモ書きとWEBやアフィリエイトの情報を発信しています

更新は不定期

関連記事

VScodeで特定文字列をショートカットキーで入れる
VScodeで特定文字列をショートカットキーで入れる

ショートカットキーで特定の文字列(主に装飾タグ)を入れられるようにしておくと、作業効率がアップします。 ぶっちゃけ私は、マクロが登録ができるキ

VScodeで静的サイトを作るためのおすすめプラグイン6選
VScodeで静的サイトを作るためのおすすめプラグイン6選

VSCodeで静的サイトジェネレーター用のmarkdownを書くのに便利なプラグインを紹介します。 VSCodeのプラグインは、結構かゆい所に

VScodeをwindowsにインストールする方法
VScodeをwindowsにインストールする方法

優秀なエディタであるVSCodeのインストール方法を紹介します。 まずは使っっているPCのスペックを調べる いや、ただのエディタなんで、スペック