Visual Studio Code 中的 JSX 或 HTML 自动完成 [英] JSX or HTML autocompletion in Visual Studio Code

问题描述

有没有办法在 Visual Studio Code 中使用组件或 HTML 补全?因为当我们有 Bootstrap 等类时，手动输入每个字母并不是一个好主意.例如 Emmet 中的补全:ul>li*2>a

Is there any way to use components or HTML completion in Visual Studio Code? Because typing each letter manually is not good idea when we have classes like Bootstrap etc. For example completion as in 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;

</nav>);}});module.exports = 标题；

推荐答案

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

But if you prefer to use .js extention for all your react files - you can associate JavaScript React mode with .js files in bottom right corner of VS Code window.

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

How to do this step by step (gif)

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

For those who just want to copy-paste the code:

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

如果上面的解决方案不起作用，试试这个:

If the solution above doesn't work, try this:

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

使用 VS Code v1.56.2 测试.

Tested with VS Code v1.56.2.

这篇关于Visual Studio Code 中的 JSX 或 HTML 自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！