【问题标题】：JSX or HTML autocompletion in Visual Studio CodeVisual Studio Code 中的 JSX 或 HTML 自动完成
【发布时间】：2023-03-10 23:11:02
【问题描述】：

有没有办法在 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;

【问题讨论】：

见github.com/microsoft/vscode/issues/18427#issuecomment-286013222

标签： reactjs autocomplete visual-studio-code jsx emmet

【解决方案1】：

下面的 GIF 中显示了为 ReactJs 启用 JSX 自动建议的简单而现代的方法。

对于 Windows => 文件 > 首选项 > 设置

对于 MacOs => 代码 > 首选项 > 设置

然后按照 GIF 中显示的步骤进行操作。

【讨论】：

【解决方案2】：

将扩展名从“.js”更改为“.jsx”即可。但如果您想保留“.js”扩展名，请按照以下步骤操作。

前往

文件 > 首选项 > 设置

在设置选项卡中，您将看到两个名为“用户”和“工作区”的选项卡（靠近搜索栏底部）。两个选项卡都将显示相同的设置，但用户设置将影响 VS Code 中的所有项目，而工作区仅对当前项目有效。选择您想要的任何选项，工作区或用户。

然后在左侧菜单栏上你必须去

扩展 > JSON

然后在右侧你可以看到几个设置。向下滚动一点，您会看到类似这样的内容。

JSON：架构
将架构与当前项目中的 JSON 文件相关联。
在 settings.json 中编辑

点击“在 settigns.json 中编辑”。它将打开一个 json 文件。将以下代码添加到 json 文件中。

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

然后保存文件。现在去检查你的 js 文件是否支持 jsx 自动完成。这已经过测试

VS 代码版本 1.61.2。

附： -：以下部分仅供不了解json的学习者使用。

将上述代码复制并粘贴到settings.json文件的底部，如下图所示。不要忘记添加逗号（由红色箭头指向），代码应粘贴在最后一个右大括号（由黄色箭头指向）之前。

如果您选择工作区设置选项卡，那么您的 settings.json 文件中可能没有任何内容。如果是这样，只需将代码粘贴在大括号内。

【讨论】：

有人请编辑底部的空白区域。它没有被删除。我不知道为什么..真的很抱歉..

【解决方案3】：

只需将您正在处理的文件从.js 命名为.jsx 即可。

【讨论】：

【解决方案4】：

在设置的 emmet 部分添加一个名为 javascript 且值为 javascriptreact 的项目对我有用。

a screen shot of my settings

【讨论】：

最简单最简单的解决方案。 ?

【解决方案5】：

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

但是，如果您更喜欢对所有 react 文件使用 .js 扩展名 - 您可以将 JavaScript React 模式与 VS Code 窗口右下角的 .js 文件相关联。

How to do this step by step (gif)

2021 年更新

对于那些只想复制粘贴代码的人：

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

如果上面的解决方案不起作用，试试这个：

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

使用 VS Code v1.56.2 测试。

【讨论】：

您能否再解释一下最后一部分？我需要使用 js 作为我所有 react 文件的扩展名。
从 gif 图中不明显的是，他在按 TAB 以自动完成之前，先按 ESC 手动退出智能感知窗口。
如果您喜欢纯文本，请将"emmet.syntaxProfiles": { "javascript": "jsx" } 添加到您的用户设置中...
"emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": { "javascript": "javascriptreact" } 为我做的
第二个非常适合我，谢谢！

【解决方案6】：

只需转到 vscode 中的设置即可。
在设置类型emmet中可以看到搜索栏。
向下滚动，有一个选项包括语言。
单击包含语言中的添加项目按钮。
将项目添加为 javascript，将值添加为 javascriptreact。

如果您感到困惑，请参考下图：

【讨论】：

【解决方案7】：

2020年的简单答案

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

其次，从窗口顶部中心的下拉菜单中选择 Configure File Association for .js。将其更改为 JavaScript React。

【讨论】：

你的截图真的很有帮助，它可以工作，在 vs 代码更新到 1.62.3 之后我无法做到这一点，你的截图帮助了我。谢谢。

【解决方案8】：

2019：React 的直截了当的答案

在您的 React 项目中获得 JSX/HTML 自动完成的最直接的方法是将其添加到您的用户设置或工作区设置 (<project-path>/.vscode/settings.json)：

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

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

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

【讨论】：

"javascript": ["javascript", "javascriptreact"] - 为 .js 和 .jsx 文件设置它。
这行得通！然而！如果您打开了建议，点击选项卡将从该列表中获取最重要的建议...解决此问题的方法是使用 Editor: Quick Suggestions Delay 设置建议的延迟。将其设置为 600 之类的值，您将能够键入元素 -> 点击标签 -> 瞧。
感谢您的回答！它就像一个魅力！

【解决方案9】：

对于我来说，React Babel 的自动完成功能直到昨天都运行良好。

这些答案都没有帮助，所以我只是重新启动了我的电脑。像魅力一样工作;)

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

我只是按照以下步骤解决了这个问题：

在 VSCode 的左下角点击 Javascript
然后在顶部，您会看到一个列表，点击“配置基于‘Javascript’语言的设置”

将这些行添加到文件中：

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

如果您想了解更多详情，可以查看this 链接。

【讨论】：

【解决方案12】：

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

我检查了设置，发现这个设置毁了这一切。

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

所以我评论了它。一切都在 React Apps 中完美运行。谢谢

【讨论】：

【解决方案13】：

只需执行以下两个步骤：

在 VSCode 底部检测语言的地方点击那个

1st step

点击“配置 'Javascript(Babel)' 基于语言的设置...”或其他任何内容

2st step

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

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

3rd step

【讨论】：

【解决方案14】：

我抛出了所有答案，这个配置对我有用。必须包括语言以及添加语法配置文件。没有触发器扩展没有任何效果，但现在我只需按 Tab 按钮即可获得结果。

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

【讨论】：

【解决方案15】：

2019 年更新

.html、.js 和 .jsx 中的自动关闭标记

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

Emmet 使用 .jsx 文件中的基本 HTML

开箱即用。

在 .js 文件中使用基本 HTML：

添加以下设置，这是 Emmet 缩写建议所必需的，也是选项卡扩展工作所必需的。

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

在 .js 和 .jsx 文件中使用自定义标签（例如 React 组件）的 Emmet

添加以下设置：

  "emmet.triggerExpansionOnTab": true,

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

另外请注意，当使用 Emmet 将 React 组件扩展为自定义标签时，您必须从建议列表中实际选择组件名称并首先完成该名称（或手动输入整个名称并使用转义键关闭建议菜单）。单词展开后，您必须再次 Tab 才能让 Emmet 展开自定义标签。

active feature request 可能会删除这个额外的步骤（选择建议时自动展开，使其工作方式与展开标准 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"
],

【讨论】：

【解决方案16】：

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。

【讨论】：

可视化有帮助，谢谢?

【解决方案17】：

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

按照上面 Kehkashan Fazal 的说明设置"emmet.includeLanguages"
从 VSCode (formulahendry.auto-close-tag) 下载自动关闭标签扩展

现在你有了很好的自动关闭 JSX 标签！

【讨论】：

【解决方案18】：

您可以使用 Visual Studio Code 中的自动关闭扩展。附言。当您安装扩展时，自动完成将无法工作，直到您重新加载 VS Code ，只需重新打开 VS Code ，或转到自动关闭标签扩展并单击重新加载。

auto close tag Extension 的链接

【讨论】：

【解决方案19】：

这些解决方案都不起作用...但是自动关闭标签扩展程序可以！ https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

【讨论】：

这里也一样。最佳答案。
是的，我不想使用每个小功能的扩展

【解决方案20】：

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

【讨论】：

对，我敢肯定，每次重新打开 VS 代码时，您都会希望对大型项目中的每个文件都执行此操作...
是啊，好笑=) 更新后默认支持jsx + emmet。
默认支持什么？
完美！感谢您的回答

【解决方案21】：

如果有人还在为这个问题苦苦挣扎：

我发现只需设置

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

不启用 HTML 补全。但是，使用：

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

会。

根据emmet docs：

"emmet.includeLanguages": {}

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

【讨论】：

这对我有用。使用 ` "emmet.includeLanguages": { "javascript":"javascriptreact", } ` 或 ` "emmet.includeLanguages": { "javascript":"jsx", } 对我不起作用