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

【问题标题】：How to change emmet expanding "className" to "class" in VSCode for JSX/TSX?如何在 JSX/TSX 的 VSCode 中将 emmet 扩展“className”更改为“class”？
【发布时间】：2019-12-23 14:31:32
【问题描述】：

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

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

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

typescript .st-form__upload

扩展到

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

但我需要

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

有人有同样的问题吗？

【问题讨论】：

不熟悉 TSX 元素，但也许您可以尝试使用 code.visualstudio.com/docs/editor/emmet#_emmet-configuration 将该语言映射到 html。喜欢"emmet.includeLanguages": { "javascript": "html" } 并用您的语言ID 替换javascript。（与这些文件的语言模式相同，我相信 - 右下角）。
谢谢！添加了"emmet.includeLanguages": { "typescriptreact": "html" },Currenlty 为我工作
太棒了 - 很高兴它对你有用。
@BabchenkoNikolay，此解决方案适用于 class 属性，但如果您在 .tsx 文件中编写 TypeScript 代码，则 IntelliSense 的第一个建议将使用 emmet 缩写而不是 properties/会员/等的组件。默认设置不是这种情况。

标签： visual-studio-code jsx vscode-settings stenciljs tsx

【解决方案1】：

从评论中，将 typescriptreact 映射到 Emmet：包含语言首选项中的 html 为我解决了这个问题。

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

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

要获取要映射到/从的语言标识符，请使用更改语言模式命令（⌃⇧P/⌘⇧P → 更改语言模式），这将在括号中显示语言名称及其标识符。

【讨论】：

【解决方案2】：

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

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

参考资料：

【讨论】：