CODEWITHSUNDEEP
reactjsvisual-studio-codemarkdowngatsbyemmet
mheavers
mheavers

Reputation: 30158

How to add emmet support for .mdx / markdown react file types in vscode

I am using .mdx files in gatsby and want to be able to have emmet recognize this as a valid file type for expansion / support. The .mdx files already get recognized in vscode as "Markdown React", and I have previously added .jsx support via:

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
},

but can't seem to get it to work for markdown react. I've tried "javascript": "markdownreact", with variations on "markdown react", "Markdown React":

i.e.

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "javascript": "markdownreact",
},

wondering if I either have the language name down wrong still, or if it doesn't support multiple file associations. Or maybe the order should be switched in the key value pair?

Upvotes: 4

Views: 1550

Answers (1)

soulshined
soulshined

Reputation: 10572

This may not be the canonical answer (or the best one); a solution nonetheless.

Re html tags: One approach is just to enable html quickSuggestions in strings:

"emmet.includeLanguages": {
    "javascript": "html"
},
"[javascript]": {
    "editor.quickSuggestions": {
        "strings": true
    }
},

js

For .mdx files specifically, you need to make sure the language mode is set to Markdown React, or use an extension that incorporates this file association.

Then add it to the included emmet languages:

"emmet.includeLanguages": {
    "mdx": "html"
},

enter image description here

Upvotes: 6

Related Questions