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;

推荐答案

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

Visual studio code detect .jsx extensions and add emmet support by default ( i'm using VS code 1.8.1)

但是，如果您希望对所有React文件都使用.js扩展名，则可以在VS Code窗口右下角将JavaScript React模式与.js文件相关联.

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.

如何逐步执行此操作(gif)

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