自动将标签添加到VSCode中的React组件

Question

I'm doing some work in React, and want to be able to auto-expand my custom components so that I don't have to keep manually adding < , /> and > .

Since Emmet already expands traditional markup ( div , h1 , etc.) I was wondering if I could expand my own components with some plugin/setting. The | character represents my cursor.

How it works right now

import Items from '../components/Items'

...
render() {
  return (
    <div>
     Ite| [Suggestions: Item] 
    </div>
  )
}
...

I see the suggestion, press [Tab], and it expands to this

<div>
  Items|
</div>

What I'm looking for

<div>
  <Items>|</Items>
</div>

Is there an extension or setting that I need to toggle somewhere to achieve this?

---

EDIT

Okay after some more working with react, I've found that Emmet will expand certain words but not others? Are my component names just edge cases or am I missing something?

Answer 1

Use Auto Close Tag extension. It immediately adds the closing tag when you type in the opening tag in front.