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;

原文由 owais 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

如何一步一步地做到这一点（gif）

2021 年更新

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

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

如果上述解决方案不起作用，请尝试以下操作：

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

使用 VS Code v1.56.2 测试。

原文由 Andrii.Vandakurov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2022 ：为 React 项目中的 .js 文件添加 JSX/HTML 自动完成的直接方式…

首先，打开 VSCode 的 settings.json。 To open settings.json, press Ctrl + , (or Cmd + , on Mac), then click the Open JSON button shown以下。或者，如果您不想全局设置它，您可以在项目根目录下创建一个 .vscode/settings.json 文件。

接下来，在 settings.json 中添加这些 JSON 值：

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

原文由 julian soro 发布，翻译遵循 CC BY-SA 4.0 许可协议