Visual Studio Code中的JSX或HTML自动完成

Question

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

Answer 1

2018年:React的直截了当的答案

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

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

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

PS如果你没有为React.js项目做这个映射,那么KehkashanFazal的答案可能适合你.

Answer 2

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

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

如何逐步完成(gif)

Answer 3

如果有人仍在努力解决这个问题:

我发现只是设置

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

不启用HTML完成.但是,使用:

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

确实.

根据emmet文档:

"emmet.includeLanguages": {}

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

Answer 4

只需在屏幕右下方选择适当的语言模式:将其设置为JavaScript React.

Answer 5

2020年的简单回答

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

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

Answer 6

2022-2023：为 ReactJs 启用 JSX 自动建议的简单而现代的方法如下面的 GIF 所示。

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

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

然后转到扩展 > emmet > 包含语言并添加javascript为项目和javascriptreact值

作为视觉参考，请按照 GIF 中所示的步骤操作。

Answer 7

这些解决方案都不起作用......但Auto Close Tag扩展功能确实有效! https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Answer 8

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。

Answer 9

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"
],

Answer 10

我扔掉了所有答案，这个配置对我有用。必须包含语言并添加语法配置文件。如果没有触发器扩展，什么都不起作用，但现在我只需按 Tab 按钮即可获得结果。

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

Answer 11

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

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

Answer 12

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

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

3. 将这些行添加到文件中：

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

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