Emmet自动完成在JSX中无法正常工作

Question

我刚开始使用 Visual Studio Code，尝试在 JSX 上使用 emmet。我读到我需要在我的设置中使用以下代码，但它仍然没有起作用。有人能帮我进行故障排除吗？

"emmet.includeLanguages": {
      "html": "html",
      "javascript": "javascriptreact",
      "xml": {
        "attr_quotes": "single"
      }
    },
    "emmet.triggerExpansionOnTab": true 
}

- user7392290

---

你尝试过从这个 Github 问题中获取任何信息吗？https://github.com/Microsoft/vscode/issues/4962 - Hawkins

如果你的JSX文件具有像home.js这样的JS扩展名，则VSCode将将其解释为javascript文件而不是javascriptreact。为此，您必须前往设置并更改文件关联属性。 - Rodrigo

Answer 1

我发现有时候 Emmet 会“忘记”在JS文件中查找HTML，但它仍然可以在JSX和CSS文件中工作。因此，我添加了几行代码来“提醒” Emmet 在JS文件中查找HTML，并与之相关联，以下是代码：

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

或者这个：

"emmet.triggerExpansionOnTab": true,
"files.associations": { "*.js": "javascriptreact" }

这里是源代码

- Alexey Nikonov

---

谢谢你，老兄，你让我今天过得非常开心。第二个选项对我有用。 - Abdulmoiz Ahmer

Answer 2

这对我有效：

"emmet.includeLanguages": {
  "html": "html",
  "javascript": "javascriptreact",
  "xml": {
    "attr_quotes": "single"
  }
},
"emmet.triggerExpansionOnTab": true

你的代码唯一不同的地方就是我删除了最后一个花括号，以便它正确包含在settings.json对象中。如果你希望这些设置适用于所有文件和项目，请确保更改已经在你的USER SETTINGS中进行了。 这里是与VSCode相关的Emmet配置文档。

- PatrickOlvera

Answer 3

如果在VS Code的设置中添加了React的Emmet，但仍然无法正常工作

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

然后在HTML文件中尝试自动完成，现在它应该可以在React中工作。

- Vivek Singh