如何在 VSCode for JSX/TSX 中将 emmet 扩展“className”更改为“class”？

Question

在 stencil's.js 中，类选择器的 TSX 元素属性是class而不是className（如在 React 中）。

在 VSCode 中找不到更改 emmet 扩展的类属性名称的方法。

尝试了 emmet 的偏好，但没有帮助。

typescript .st-form__upload

扩展到

<div className="st-form__upload"></div>

但是我需要

<div class="st-form__upload"></div>

有人有同样的问题吗？

Answer 1

从评论中，映射typescriptreact到htmlEmmet：包括语言首选项为我解决了这个问题。

\n

"emmet.includeLanguages": {\n    "javascriptreact": "html",\n    "typescriptreact": "html",\n},\n

\n

\n

使用这个，我没有注意到任何错误建议的问题，但可能会有一些

\n

要获取要映射到/从其映射的语言的标识符，请使用“更改语言模式”命令 (\xe2\x8c\x83\xe2\x87\xa7P/\xe2\x8c\x98\xe2\x87\xa7P \xe2\x86\x92更改语言模式），这将在括号中显示语言名称及其标识符。

\n

Answer 2

如果您想要更多自定义，例如在 JSX/TSX 中的属性值周围使用单引号，同时仍希望保留.html文件的现有行为，您可以使用：

{
  "emmet.includeLanguages": {
    "javascriptreact": "xml",
    "typescriptreact": "xml"
  },
  "emmet.syntaxProfiles": {
    "xml": {
      "attr_quotes": "single"
    }
  }
}

参考：

• 其他文件类型中的 Emmet 缩写
• 语法配置文件.json