Visual Studio Code中的JSX或HTML自动补全

reactjs React.js

达蒙斯丁

2020-03-18

有什么方法可以在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;

第2032篇《Visual Studio Code中的JSX或HTML自动补全》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共14个回答
前端MandyJinJin 2020.03.18

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

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

凯逆天 2020.03.18

2020年的简单答案

首先，选择窗口右下角的文件关联。 在此处输入图片说明

Second, select Configure File Association for .js from the menu that drops down at the top-center of the window. Change it to JavaScript React. 在此处输入图片说明

Green理查德 2020.03.18

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

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

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

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

猿小宇宙小哥 2020.03.18

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

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

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

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true
番长Vicky 2020.03.18

请仅执行以下两个步骤：

  1. 在检测到语言的VSCode底部，单击该

第一步

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

第二步

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

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

第三步

猪猪Harry泡芙 2020.03.18

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

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

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

Pro乐 2020.03.18

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

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

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

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

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

Tony番长L 2020.03.18

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

自动关闭标签扩展的链接

飞云达蒙 2020.03.18

2018年

我在用着 VSCode (ver 1.27.2)

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

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

vscode选项

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

二

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

三

然后选择JSX，对于我来说，我已经做到了。

四

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

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

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

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

设定

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

神无LEY 2020.03.18

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

村村LEY宝儿 2020.03.18

2019年：React的直接答案

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

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

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

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

Mandy小小 2020.03.18

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

猪猪Mandy 2020.03.18

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

我发现简单地设置 

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

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

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

做。

根据emmet docs：

"emmet.includeLanguages": {}

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android