Visual Studio代码中的JSX或HTML自动完成

pgky5nke 于 2022-09-21 发布在 React

关注(0)|答案(22)|浏览(276)

有什么方法可以在Visual Studio代码中使用组件或HTML完成功能吗？因为当我们有像Bootstrap之类的类时，手动输入每个字母都不是好主意。

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;

来源：https://stackoverflow.com/questions/39320393/jsx-or-html-autocompletion-in-visual-studio-code

22条答案

按热度按时间

2019：直截了当地回答Reaction

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

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

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

附注：如果你不是为一个React.js项目做这个Map，那么KehkashanFazal的答案可能对你有用。

赞(0）回复(0）举报 2022-09-21

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

但是，如果您更喜欢对所有的Reaction文件使用.js扩展名-您可以在VS代码窗口的右下角将JavaScript Reaction模式与.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进行了测试。

赞(0）回复(0）举报 2022-09-21

如果有人仍然在这个问题上苦苦挣扎：

我发现，简单地设置

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

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

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

的确如此。

根据emmet docs：
"emmet.includeLanguages": {}

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

赞(0）回复(0）举报 2022-09-21

只需在屏幕右下角选择合适的语言模式，设置为JavaScript Reaction。

赞(0）回复(0）举报 2022-09-21

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了。

赞(0）回复(0）举报 2022-09-21

2020年简单答案

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

第二步，从窗口中央上方的下拉菜单中选择[为.js配置文件关联]。将其更改为JavaScript Reaction。

赞(0）回复(0）举报 2022-09-21

这些解决方案都没有奏效。但自动关闭标记扩展做到了！https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

赞(0）回复(0）举报 2022-09-21

2019更新

.html、.js、.jsx中的自动结束标签

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

在.jsx文件中使用基本的超文本标记语言

开箱即用。

在.js文件中使用基本的Html：

添加以下设置，这是Emmet缩写建议所必需的，也是制表符展开一致工作所必需的。

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

在.js和.jsx文件中使用自定义标记(例如，Reaction组件)进行Emmet

添加以下设置：

"emmet.triggerExpansionOnTab": true,

请注意，使用此设置，Emmet会将所有单词扩展为定制标记(而不仅仅是Reaction组件名称)

还请注意，当使用Emmet将Reaction组件展开为自定义标记时，您必须从建议列表中实际选择组件名称并首先完成(或者手动输入全名，然后使用退出键关闭建议菜单)。在单词展开后，您必须再次按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"
],

赞(0）回复(0）举报 2022-09-21

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

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

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

然后按照GIF中所示的步骤操作。

赞(0）回复(0）举报 2022-09-21

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

1.在VSCode的左下角，点击到Javascript
1.然后，在顶部，您将看到一个列表，点击“配置基于‘脚本’语言的设置”
1.将以下行添加到文件中：

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

如果你想了解更多细节，你可以点击这个链接。

赞(0）回复(0）举报 2022-09-21

我尝试了所有的答案，这个配置对我很有效。必须包括语言以及添加语法配置文件。没有触发器展开，什么都不起作用，但现在我只按Tab键就可以得到结果。

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

赞(0）回复(0）举报 2022-09-21

1.只需进入vscode中的设置即可。
1.您可以在设置类型Emmet中看到搜索栏。
1.向下滚动，有一个包含语言的选项。
1.点击Include Language中的Add Item按钮。
1.将Item添加为Java脚本，将Value添加为Java脚本。

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

赞(0）回复(0）举报 2022-09-21

您可以在Visual Studio代码中使用自动关闭扩展。PS.当你安装扩展，自动补全不会工作，直到你重新加载VS代码，只需重新打开VS代码，或转到自动关闭标记扩展并单击重新加载。

auto close tag扩展的链接

赞(0）回复(0）举报 2022-09-21

将扩展名从“.js”更改为“.jsx”就可以了。但如果您想保留“.js”扩展名，请执行以下步骤。

去

文件>首选项>设置

在设置选项卡中，你会看到名为‘User’和‘Workspace’的两个选项卡(靠近搜索栏的底部)。这两个选项卡将向您显示相同的设置，但用户设置将影响VS代码中的所有项目，而工作区将仅影响当前项目。选择您想要的任何选项，工作区或用户。

然后在左边的菜单栏上，你必须

扩展>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文件中可能没有任何内容。如果是这样的话，只需将代码粘贴到花括号中。

赞(0）回复(0）举报 2022-09-21

在设置中的Emmet部分添加一个名为javascript的值为javascriptreact的项目对我来说很管用。

a screen shot of my settings

赞(0）回复(0）举报 2022-09-21

相关问题

热门标签

Java query python Node 开发语言 request Util 数据库 Table 后端算法 Logger Message Element Parser

最新问答

xxl-job 安全组扫描到执行器端口服务存在信息泄露漏洞
回答(1) 发布于 3个月前
xxl-job 不能和nacos兼容？
回答(3) 发布于 3个月前
xxl-job 任务执行完后无法结束，日志一直转圈
回答(3) 发布于 3个月前
xxl-job-admin页面上查看调度日志样式问题
回答(1) 发布于 3个月前
xxl-job 参数512字符限制能否去掉
回答(1) 发布于 3个月前