在 VisualStudio 代码中使用 JSX 或 HTML 自动完成

在 VisualStudio 代码中是否有使用组件或 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;
145381 次浏览
小开
最佳答案

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

但如果你想用。所有反应文件的 js 扩展-您可以将 JavaScript 反应模式与。Js 文件在 VS 代码窗口的右下角。

如何一步一步做到这一点(gif)

enter image description here

2021年最新情况

对于那些只想复制粘贴代码的人:

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

如果上面的方法行不通，试试这个:

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

使用 VS Code v1.56.2进行测试。

小开

如果有人还在纠结这个问题:

我发现简单的设置

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

不支持 HTML 完成，但使用:

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

是的。

根据 Emmet 文件:

"emmet.includeLanguages": {}

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

小开

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

小开

这些解决方案都不起作用... 但自动关闭标签扩展可以！ Https://marketplace.visualstudio.com/items?itemname=formulahendry.auto-close-tag

小开

2022 : 在 做出反应项目中为 .js文件添加 JSX/HTML 自动完成的简单方法..。

首先，打开 VSCode 的设置.json。要打开 setings.JSON，请按 Ctrl + ,(或者 Mac 上的 Cmd + ,) ，然后单击如下所示的 Open JSON 按钮。或者，如果不想全局设置，可以在项目根目录下创建一个 .vscode/settings.json文件。

Button for settings.json file

接下来，在 setings.JSON 中添加这些 JSON 值:

"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
}
小开

可以在 VisualStudio 代码中使用“自动关闭”扩展插件。 注意。当您安装扩展时，自动完成将无法工作，直到您重新加载 VS 代码，只需重新打开 VS 代码，或进入自动关闭标签扩展并单击重新加载。

自动关闭标签自动关闭标签分机的连接

小开

在 JSX 中获得自动关闭标记需要两个步骤。

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

现在您有了很好的自动关闭 JSX 标记！

小开

二零一八年

我用的是 VSCode (ver 1.27.2)

基于我的经验，即使我的工作与 React。在我的 VSCode上检测到的语言仍然是香草 JavaScript。Emmet 没有成功。

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

vscode options

  • 要完全改变它一次，你需要把它联系起来。

two

按 Configure File Association for .js...

three

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

four

  • 适用于工作场所设置，如果它们都不适合您，则最后使用。转到偏好只是 ctrl + , (comma)打开它。

键入并搜索 emmet或 Emmet。然后复制要重写的设置。 就我而言:

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

注意 : 我没有尝试只使用 javascriptreact。

settings

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

小开

2019年最新情况

在. html、 . js 和. jsx 中自动结束标记

打破常规。也就是说，在输入开始标记的结束括号后，将自动插入结束标记。

Emmet 使用.jsx 文件中的基本 HTML

打破常规。

Emmet 使用.js 文件中的基本 HTML:

添加以下设置，这是 Emmet 缩写建议所必需的，也是选项卡扩展一致工作所必需的。

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

Emmet 使用.js 和.jsx 文件中的自定义标记(例如 React Component)

添加以下设置:

  "emmet.triggerExpansionOnTab": true,

注意，有了这个设置，Emmet 将把所有单词展开为自定义标记(而不仅仅是 React 组件名称)

还要注意的是，当使用 Emmet 展开 React 组件作为自定义标记时，您必须实际从建议列表中选择组件名称并首先完成该项(或者手动键入整个名称并用转义键关闭建议菜单)。在单词展开之后，您必须再次使用制表符来使 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"
],
小开

我去抛出所有的答案，这个配置为我工作。必须包含语言以及添加 syntaxProfile。没有触发器扩展什么工作，但现在我只按 Tab 按钮得到的结果。

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

自动完成反应巴别塔工作良好，直到昨天为我。

这些答案都没有帮助，所以我重新启动了我的电脑

小开

仅遵循以下两个步骤:

  1. 在 VSCode 的底部，检测语言点击这里

第一步

  1. 点击“配置‘ Javascript (Babel)’基于语言的设置... ...”或者其他什么

第二步

  1. 首先用逗号“”将此代码粘贴到其中，然后保存。

“ emmet.include 语言”: { “ javascript”: “ javascriptreact” }, “ emmet.riggerExpsionOnTab”: true

第三步

小开

我通过以下步骤简单地解决了这个问题:

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

  3. 将以下行添加到文件中:

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

If you want to more details, you can check this link.

小开

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

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

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

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

小开

只能在 JSX 文件中工作。

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

2020年的答案很简单

首先，选择窗口右下角的 档案协会。 enter image description here

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

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

如有疑问，请参阅以下图片: enter image description here

小开

在设置中的 Emmet 部分添加一个名为 javascript 的项目，其值为 javascriptreact。

我设置的屏幕截图

小开

只要命名的文件，你正在从 .js到 .jsx的工作，你是罚款。

小开

将扩展名从。到。“ jsx”将做这项工作。但如果你想保留。按照下面的步骤进行扩展。

去吧

档案 > 首选项 > 设定

在设置选项卡中，您将看到两个分别命名为“ user”和“ workspace”的选项卡(查看搜索栏底部)。两个选项卡将显示相同的设置，但是用户设置将影响 VS Code 中的所有项目，而工作区将仅影响当前项目。选择您想要的任何选项，工作区或用户。

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

扩展 > JSON

然后在右边，你可以看到几个设置。向下滚动一点，你会看到这样的东西。

图式
将模式与当前项目中的 JSON 文件关联。
在设置中编辑 json

点击“ Edit in settigns.JSON”，它将打开一个 JSON 文件。

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

并保存文件。现在检查您的 js 文件是否支持 jsx 自动完成

VS Code version 1.61.2 .

附注-: 以下部分仅供不了解 JSON 的学习者使用。

将上面的代码复制并粘贴到 setings.json 文件的 底部，如下图所示。不要忘记添加一个 逗号(由红色箭头指向) ，代码应该粘贴在 最后一个闭合花括号之前(由黄色箭头指向)。

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

小开

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

对于 Windows = > File > Preferences > Settings

对于 MacOs = > Code > Preferences > Settings

然后，goto 扩展 > emmet > include language，并添加 javascript作为项目，javascriptreact作为值

按照 GIF 所示的步骤进行操作，以供视觉参考。

enter image description here

小开

进入设置 > 扩展 > Emmet > include language 并添加 javascript 作为项目，javascriptreact 作为值


提交答案