Emmet expression expanded to single line

Question

I'm learning to use Emmet with Visual Studio Code in TypeScript React files *.tsx.

When I type div.buttons>button.something+button.something-else and hit TAB, it is expanded to the following:

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

However, if I type .outer>.inner>h1+p and hit TAB, it is expanded like this:

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

So I have two questions:

1. What determines if some expression will be expanded to a single line or to one line per tag?
2. Can I force the first expression to expand to one line per tag?

Like this:

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

---

EDIT:

I found this related question, and I added the following setting to the Visual Studio Code user settings file, but nothing changed:

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

Answer 1

After playing with the documentation I have found a solution to make it work as I want. You have to include this in the Visual Studio Code's user settings file:

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

It forces a new line for each tag.

Bizarrely, setting tag_nl to true didn't produce any effect.