reactjs - 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;

Answer 1

2023:在 React 项目中为 .js 文件添加 JSX/HTML 自动完成功能的简单方法...

首先，按 Ctrl + ,(或在 Mac 上按 Cmd+,)打开 VSCode 的设置。然后...

使用 JSON 设置:

1. 在“设置”中，要打开 settings.json，请单击如下所示的“打开 JSON”按钮。或者，如果您不想全局设置此设置，可以在项目根目录创建一个 .vscode/settings.json 文件。

在 settings.json 中添加这些 JSON 值:

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

使用设置 UI 进行设置:

请注意，Emmet:语法配置文件仍然需要打开settings.json(如上所示)，但对于任何寻求此信息的人来说，这里是...

从“设置”中，使用搜索栏查找Emmet:包括语言

点击“添加项目”，然后添加 javascript 到 javascriptreact 的映射。