在VSC上为.tsx文件启用Emmet

Question

我正在使用Visual Studio Code。如何在.tsx文件中启用emmet？

我想要一个简单的。

.foo + tab

扩展为

<div className="Foo"></div>

然而，我尝试的所有方法似乎都不能触发上述所期望的 Emmet 行为。

这是我的 VSC 设置：

  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "typescript": "typescriptreact",
    },

- Jonca33

---

你好，你在问题中描述的设置对于支持JSX的.js和.tsx文件是可行的。可能不起作用的原因之一是"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"，理想情况下应该为"emmet.showExpandedAbbreviation": "always"，这也是我的情况。 - Aayush Goyal

Answer 1

我在我的VS Code用户设置中进行了以下设置，这样对于 .tsx 文件就能按照预期运行：

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

- Audwin Oyong

Answer 2

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

这是我的设置，它可以很好地工作。

- user7352643

Answer 3

打开设置。这里有一个快捷方式：在 Windows 上使用 Ctrl + ,，在 Mac 上按下 Command + ,

查找键 includeLanguages。在默认情况下不支持的语言中启用 Emmet 缩写。以下是一个示例：

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

根据您的需要调整“emmet.showExpandedAbbreviation”（使用Always或inMarkupAndStylesheetFilesOnly）

在设置中，应该像这样：

"emmet.showExpandedAbbreviation": "Always"

下面是可能有帮助的截图：

- Muhammad Soliman