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

user_287436 0
Viewed 859

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?

emmet gatsby visual-studio-code reactjs markdown
1 Answers

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

user_23535230
Related