jsxで記述したクラスネーム名をcssを記述する時のオートコンプリートに出てくるようにしたい

Question

経緯

reactのjsxを書いている時に、VScodeにこういう機能があったら便利なのに、それを実現する為のプラグインや設定方法が調べても分からなかったので質問に至りました。

質問

①

<div className="teratail">teratail</div>

.teratail{
font-size:24px;
}

このようにjsxで記述したdiv要素にcssでスタイルを充てようした時、恥ずかしながら
毎回毎回「teratail」とタイプしてます。cssを記述する時、jsxで定義されたクラス名がオートコンプリートとして出てくるようにする為には
どのような設定が必要になるのか教えて欲しいです。

②
HTMLファイルにはタグをクリックした時に、そのタグに対応する開きタグまたは閉じタグが白くなる仕様があります。
下記の画像のような機能です。

jsxではこの機能が働きません。jsxでタグをクリックした時に、そのタグに対応する閉じタグまたは開きタグが出るようにする為にはどのような設定が必要になるのか教えて欲しいです。

Comments

[hoshi-takanori]

① は自分も全部タイプするか、コピペしてました。そうか恥ずかしいことだったのか…。
② は今まで気にしたことがなかったのですが、jsx でもそんな感じで表示されてますね。特に設定をいじった覚えはありませんが。

[usui_orange]

teratailのようにクラス名が短ければよいのですが、長いクラス名になってくると、自分でタイプするのは時間がかかりますし、コピーもマウスを動かす手間がかかったりするので、大体の人はオートコンプリートとして出てくるようにしてるのかなと、勝手に思っていました。。；；
オートコンプリートとして出てくるようにすれば、時間が効率化出来るのに、それをしていないのは、恥ずかしいなと思ったって感じです；；
なんかごめんなさい；；

[hoshi-takanori]

あ、いえ。自分はそんなに CSS を書かないので、その発想がなかっただけで、CSS をバリバリ書く人には当然必要な機能だと思います。役に立たないコメントでこちらこそ失礼しました。