Visual Studio 代码中的 JSX 或 HTML 自动补全

Question

有没有什么方法可以在 Visual Studio 代码中使用组件或 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;

Answer 1

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

但是，如果您更喜欢对所有 React 文件使用 .js 扩展名 - 您可以在 VS Code window.[=14] 的右下角将 JavaScript React 模式与 .js 文件相关联=]

How to do this step by step (gif)

2021 年更新

对于那些只想 copy-paste 代码的人：

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

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

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

使用 VS Code v1.56.2 测试。

Answer 2

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

我发现只需设置

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

不启用 HTML 完成。但是，使用：

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

会。

根据emmet docs：

"emmet.includeLanguages": {}

Enable emmet abbreviations in languages that are not supported by default. Add a mapping here between the language and emmet supported language.
Eg: {"vue-html": "html", "javascript": "javascriptreact"}

Answer 3

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

Answer 4

None 这些解决方案有效...但自动关闭标签扩展有效！ https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Answer 5

2019：React 的直截了当的答案

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

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

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

P.S。如果您不是为 React.js 项目执行此映射，那么 KehkashanFazal 的回答可能对您有用。

Answer 6

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

link auto close tag 分机

Answer 7

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

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

现在你有了漂亮的自动关闭 JSX 标签！

Answer 8

2018

我正在使用 VSCode (ver 1.27.2)

根据我的经验，即使我正在使用 React。在我的 VSCode 上检测到的语言仍然是普通语言 JavaScript。而且 emmet 没有用。

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

整改一次，需要关联。

点击Configure File Association for .js...

和 select JSX ，就我而言，我已经做到了。

对于工作场所设置，最后如果 none 适合您。转到 ctrl + , (comma) 的首选项打开它。

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

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

注意：我没试过只用jsx javascriptreact.

我实现了第二步和第三步。我现在可以做到 Emmet。

Answer 9

2019 年更新

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

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

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

开箱即用。

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

添加以下设置，这是 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"
],

Answer 10

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

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

Answer 11

React Babel 的自动完成对我来说直到昨天都工作正常。

None 这些答案有帮助，所以我刚刚重新启动了计算机。工作得很好 ;)

Answer 12

只需执行以下两个步骤：

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

1st step

点击 "Configure 'Javascript(Babel)' language based settings..." 或点击

2st step

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

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

3rd step

Answer 13

我按照以下步骤简单地解决了这个问题：

在VSCode的左下角点击Javascript
然后在顶部，你会看到一个列表，点击"Configure 'Javascript' language based settings"

将这些行添加到文件中：

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

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

Answer 14

我在做各种项目，我有一个很大的设置文件。

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

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

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

Answer 15

仅适用于 JSX 文件。让它不能与 JS 一起工作。

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

Answer 16

2020年简单回答

首先，select window 中右下角的 文件关联 。

其次，select 从 window 顶部中央的下拉菜单中为 .js 配置文件关联。将其更改为 JavaScript React。

Answer 17

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

如有疑惑，请参考下图：

Answer 18

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

a screen shot of my settings

Answer 19

只需将您正在处理的文件命名为 .js 到 .jsx 就可以了。

Answer 20

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

转到

文件 > 首选项 > 设置

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

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

扩展 > JSON

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

JSON:Schemas
Associate schemas to JSON files in the current project.
Edit in settings.json

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

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

并保存文件。现在去检查你的 js 文件是否支持 jsx 自动完成。这已通过

测试

VS 代码版本 1.61.2。

P.S。 -: 以下部分仅供不了解json.

的学习者使用

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

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

Answer 21

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

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

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

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

Visual Studio 代码中的 JSX 或 HTML 自动补全

JSX or HTML autocompletion in Visual Studio Code

autocomplete

jsx

emmet

reactjs

visual-studio-code

2021 年更新

2019 年更新

2020年简单回答