在 VSCode 中为 React 组件自动添加标签

Question

我在 React 中做一些工作，并希望能够自动扩展我的自定义组件，这样我就不必手动添加 <、/> 和 >。

由于 Emmet 已经扩展了传统标记（div、h1 等），我想知道是否可以通过一些插件/设置扩展我自己的组件。 | 字符代表我的光标。

现在如何运作

import Items from '../components/Items'

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

我看到建议，按 [Tab]，它会展开为这个

<div>
  Items|
</div>

我在寻找什么

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

是否有我需要在某处切换以实现此目的的扩展程序或设置？

---

编辑

好吧，在使用 react 之后，我发现 Emmet 会扩展某些单词，但不会扩展其他单词？我的组件名称只是边缘情况还是我遗漏了什么？

Answer 1

使用Auto Close Tag 扩展名。当您在前面输入开始标签时，它会立即添加结束标签。