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

有什么方法可以在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;
15个解决方案
114 votes

2019年:React的直接答案

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

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

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

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

Julian Soro answered 2019-11-18T02:44:58Z
53 votes

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

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

如何逐步进行(gif)

enter image description here

Andrii.Vandakurov answered 2019-11-18T02:44:13Z
36 votes

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

我发现简单地设置

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

无法启用HTML补全功能。 但是,使用:

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

做。

根据emmet docs:

{"vue-html": "html", "javascript": "javascriptreact"}

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

Kehkashan Fazal answered 2019-11-18T02:46:09Z
21 votes

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

Donskikh Andrei answered 2019-11-18T02:46:33Z
8 votes

这些解决方案均无效...但是自动关闭标签扩展名有效![https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag]

Cole answered 2019-11-18T02:46:58Z
7 votes

2018年

我正在使用VSCode (ver 1.27.2)

基于我的经验,即使我正在使用Emmet。 我的javascriptreact上检测到的语言仍然是香草JS。Emmet无法正常工作。

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

vscode options

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

two

点击Emmet

three

然后选择Emmet,就我而言,我已经做到了。

four

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

键入并搜索Emmetjavascriptreact。然后复制要覆盖的设置。就我而言:

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

注意:我没有尝试只使用Emmet Emmet

settings

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

RoCk RoCk answered 2019-11-18T02:48:27Z
7 votes

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"
],
jabacchetta answered 2019-11-18T02:50:20Z
5 votes

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

  1. 在VSCode的左下方,单击Javascript
  2. 然后在顶部,您将看到一个列表,单击“配置基于Java语言的设置”
  3. 将这些行添加到文件中:

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

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

Esin ÖNER answered 2019-11-18T02:51:17Z
4 votes

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

自动关闭标签扩展的链接

zakaria kasmi answered 2019-11-18T02:51:49Z
2 votes

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

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

现在,您有了不错的自动关闭JSX标签!

bildungsroman answered 2019-11-18T02:52:35Z
2 votes

请仅执行以下两个步骤:

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

第一步

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

第二步

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

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

第三步

Ameer Hamza answered 2019-11-18T02:53:47Z
1 votes

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

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true
user9083221 answered 2019-11-18T02:54:14Z
1 votes

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

"files.associations": {
"*.js": "javascript",
"*.jsx": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascriptreact": "javascriptreact"
},
Fatih Ertuğral answered 2019-11-18T02:54:40Z
1 votes

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

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

Pixelomo answered 2019-11-18T02:55:13Z
0 votes

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

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

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

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

Oleg Shkliaiev answered 2019-11-18T02:55:52Z
translate from https://stackoverflow.com:/questions/39320393/jsx-or-html-autocompletion-in-visual-studio-code