如何在 vscode 中添加对 .mdx / markdown react 文件类型的 emmet 支持答案

【问题标题】：How to add emmet support for .mdx / markdown react file types in vscode如何在 vscode 中添加对 .mdx / markdown react 文件类型的 emmet 支持
【发布时间】：2020-11-05 13:48:00
【问题描述】：

我在 gatsby 中使用 .mdx 文件，并希望能够让 emmet 将其识别为扩展/支持的有效文件类型。 .mdx 文件已经在 vscode 中被识别为“Markdown React”，我之前通过以下方式添加了 .jsx 支持：

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

但似乎无法让它对降价反应起作用。我试过"javascript": "markdownreact"，有"markdown react"、"Markdown React"的变化：

即

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

想知道我的语言名称是否仍然错误，或者它是否不支持多个文件关联。还是键值对中的顺序应该切换？

【问题讨论】：

你只是想能够做html标签吗？
@soulshined 是的 - 只是 html 标签。

标签： reactjs visual-studio-code markdown gatsby emmet

【解决方案1】：

这可能不是规范的答案（或最好的答案）；一个解决方案。

Re html 标签：一种方法是在字符串中启用html quickSuggestions：

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

对于 .mdx 文件，您需要确保将 language mode 设置为 Markdown React，或使用包含此文件关联的扩展名。

然后将其添加到包含的emmet语言中：

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

【讨论】：

几乎为我工作。这做到了："emmet.includeLanguages": { "mdx": "html" }！谢谢！