Visual Studio Code 中的 JSX 或 HTML 自动完成

小能豆

Visual Studio Code 中的 JSX 或 HTML 自动完成

javascript

有没有办法在 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;

阅读 38

2024-06-11

共1个答案

小能豆

当然可以！Visual Studio Code (VS Code) 为 HTML 和 JSX 的自动完成提供了强大的支持，让您可以轻松快速地生成代码，而无需手动输入每个字母。以下是实现此目的的方法：

Emmet 缩写：

Emmet 内置于 VS Code 中，为 HTML 和 JSX 提供了强大的缩写扩展。您可以使用 Emmet 缩写快速生成 HTML 结构。

例如，键入ul>li*2>a然后按Tab将其扩展为：

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

JSX 的 IntelliSense：

VS Code 为 JSX 提供 IntelliSense，在您输入时提供 JSX 标签、属性和值的建议。其中包括建议类名，例如 Bootstrap 类。

例如，如果您开始输入className="nav"，VS Code 将根据项目中可用的 Bootstrap 类建议类名，如、等navbar。nav-link

集成扩展：

您可以通过安装专为 Web 开发定制的扩展来进一步增强 HTML 和 JSX 自动完成功能。以下是一些流行的扩展：

自动重命名标签：自动重命名配对的 HTML/XML 标签。
自动关闭标签：当您键入结束尖括号时自动添加结束标签。
HTML CSS 支持：为 HTML 类和 id 属性中的 CSS 选择器提供自动完成功能。
Bootstrap 4、Font awesome 4、Font Awesome 5 Free & Pro 片段：提供 Bootstrap 4 和 Font Awesome 片段以便快速插入。

如何使用：

确保您的设置中已启用 Emmet（"emmet.triggerExpansionOnTab": true）。
开始输入 Emmet 缩写或 HTML 标签和属性，并使用Tab扩展缩写或接受来自 IntelliSense 的建议。

通过使用 Emmet 缩写、IntelliSense 和相关扩展，您可以显著提高工作效率并简化在 VS Code 中编写 HTML 和 JSX 的过程，尤其是在使用 React 等框架和 Bootstrap 等库时。

2024-06-11