reactjs - Emmet 表达式扩展为单行

Question

我正在学习在 TypeScript React 文件中使用Emmet和 Visual Studio Code *.tsx。

当我键入div.buttons>button.something+button.something-else并按 TAB 时，它会扩展为以下内容：

<div className="buttons"><button className="something"></button><button className="something-else"></button></div>

但是，如果我键入.outer>.inner>h1+p并按 TAB，它会像这样展开：

<div className="outer">
  <div className="inner">
    <h1></h1>
    <p></p>
  </div>
</div>

所以我有两个问题：

1. 是什么决定了某个表达式将扩展为单行还是每个标签一行？
2. 我可以强制第一个表达式扩展为每个标签一行吗？

像这样：

<div className="buttons">
  <button className="something"></button>
  <button className="something-else"></button>
</div>

---

编辑：

我找到了这个相关的问题，并将以下设置添加到 Visual Studio Code 用户设置文件中，但没有任何改变：

"emmet.syntaxProfiles": {
    "html": {
        "tag_nl": true
    }
}

Answer 1

在使用文档后，我找到了一个解决方案，可以让它按我的意愿工作。您必须将其包含在 Visual Studio Code 的用户设置文件中：

"emmet.syntaxProfiles": {
    "jsx": {
        "inline_break": 1
    }

它为每个标签强制换行。

奇怪的是，设置tag_nl为true没有产生任何效果。