有什么方法可以在Visual Studio Code中使用组件或HTML补全吗？因为当我们有类似Bootstrap等的类时，手动键入每个字母不是一个好主意。例如Emmet中的完成：ul>li*2>a

var React = require('react');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;

Visual Studio代码默认情况下会检测.jsx扩展并添加emmet支持（我使用的是VS代码1.8.1）

但是，如果您希望对所有React文件都使用.js扩展名，则可以在VS Code窗口右下角将JavaScript React模式与.js文件关联。

如何逐步进行（gif）

2019年：React的直接答案

在您的React项目中获得JSX / HTML自动完成功能的最简单的方法是将其添加到用户设置或工作空间设置（<project-path>/.vscode/settings.json）：

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

您可能必须重新启动VS Code才能使更改生效。

PS：如果您不为React.js项目进行此映射，那么KehkashanFazal的答案可能对您有用。

如果有人仍在努力解决此问题：

我发现简单地设置

"emmet.syntaxProfiles": {
     "javascript": "jsx" 
 },

无法启用HTML补全功能。但是，使用：

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

做。

根据emmet docs：

"emmet.includeLanguages": {}

启用默认情况下不支持的语言的emmet缩写。在此语言和emmet支持的语言之间添加映射。
例如：{"vue-html": "html", "javascript": "javascriptreact"}

只需在屏幕右下角选择适当的语言模式：将其设置为JavaScript React。

2018年

我正在使用 VSCode (ver 1.27.2)

基于我的经验，即使我正在与一起工作React。我VSCode身上检测到的语言仍然是香草JavaScript。和emmet没用。

• 使它再次运行的方法之一是将VSCode检测到的语言更改为JavaScript React。这仅适用于单个JS文件。

• 要完全更改一次，您需要将其关联。

请点击 Configure File Association for .js...

然后选择JSX，就我而言，我已经做到了。

• 对于“工作场所设置”，如果没有一个适合您，则最后一次使用。转到“仅偏好设置”将ctrl + , (comma)其打开。

输入并搜索emmet或Emmet。然后复制您要覆盖的设置。就我而言：

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

注意：我并没有尝试jsx只使用javascriptreact。

我执行了第二步和第三步。我现在可以做Emmet。

这些解决方案均无效...但是Auto Close Tag扩展有效！ https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

2019更新

自动关闭.html，.js和.jsx中的标签

开箱即用。也就是说，在开始标记中键入结束括号后，结束标记将自动插入。

Emmet具有.jsx文件中的基本HTML

开箱即用。

Emmet具有.js文件中的基本HTML：

添加以下设置，这是Emmet缩写建议所必需的，并且选项卡扩展必须能够一致地工作。

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

Emmet在.js和.jsx文件中均带有自定义标签（例如React Components）

添加以下设置：

  "emmet.triggerExpansionOnTab": true,

请注意，使用此设置，Emmet会将所有单词扩展为自定义标签（而不仅仅是React组件名称）

还要注意，当使用Emmet扩展React组件作为自定义标签时，您实际上必须从建议列表中选择组件名称并首先完成该操作（或手动输入全名，然后使用转义键关闭建议菜单）。扩展单词后，您必须再次按Tab键以使Emmet扩展自定义标签。

有一个活动功能请求可能会删除此额外步骤（选择建议时自动展开，以使其与扩展标准html标签的方式相同）。

故障排除

确保您具有最新版本的VSCode。

确保您没有更改以下默认设置：

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,

// read the GitHub issue listed above if you're curious why this is required).
"editor.wordBasedSuggestions": true,

// you obviously don't want javascript, javascriptreact included in here if you want Emmet to be available in those files
"emmet.excludeLanguages": [
    "markdown"
],

我只需按照以下步骤解决问题：

1. 在VSCode的左下方，单击Javascript
2. 然后在顶部，您将看到一个列表，单击“配置基于Java语言的设置”

3. 将以下行添加到文件中：

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

如果您想了解更多详细信息，可以检查此链接。

2020年的简单答案

首先，选择窗口右下角的文件关联。

其次，从窗口顶部中央的下拉菜单中选择“ .js配置文件关联”。将其更改为JavaScript React。

您可以使用Visual Studio Code中的“自动关闭扩展名”。ps。安装扩展程序时，只有重新加载VS Code或重新打开VS Code或转到自动关闭标签扩展名并单击“重新加载”，自动完成功能才起作用。

自动关闭标签扩展的链接

我花了两个步骤在JSX中获取自动关闭标签。

1. 请按照上述Kehkashan Fazal的说明进行设置 "emmet.includeLanguages"
2. 从VSCode下载自动关闭标签扩展名（formulahendry.auto-close-tag）

现在，您有了不错的自动关闭JSX标签！

请仅遵循以下两个步骤：

1. 在VSCode底部的检测语言的位置单击

第一步

2. 单击“配置基于Java语言的设置...”或执行任何操作

第二步

3. 将此代码粘贴在上面，并先用逗号“，”分开并保存。

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

第三步

我扔了所有答案，这个配置对我有用。必须包括语言并添加语法配置文件。没有触发器扩展，什么都没有，但是现在我只按Tab键即可得到结果。

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

我正在从事各种项目，并且有一个很大的设置文件。

我检查了设置，发现此设置破坏了所有设置。

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

所以我发表了评论。而且一切都可以在React Apps中完美运行。谢谢

仅适用于JSX文件。让它不适用于JS。

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

直到昨天，React Babel的自动完成功能都可以正常工作。

这些答案均无济于事，所以我只是重新启动了计算机。像魅力一样工作;）