[解決済み] Visual Studio CodeでのJSXまたはHTMLのオートコンプリート

質問

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;

どのように解決するのですか？

Visual Studio コードが .jsx 拡張子を検出し、デフォルトで emmet サポートを追加します (VS code 1.8.1 を使用しています)。

しかし、すべてのリアクトファイルに .js 拡張を使用したい場合、VS Code ウィンドウの右下隅にある .js ファイルに JavaScript React モードを関連付けることができます。

ステップバイステップの方法（gif)

2021年更新

コードをコピーペーストしたいだけの人へ。

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

上記の解決策でうまくいかない場合は、これを試してみてください。

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

VS Code v1.56.2でテストしています。