Vscode: vsCode+Emmet autocompletion - setting to insert newline inside div after hit 'tab'

[Gennady-G]

Greetings!

by default vsCode does not split div tag into lines:

<div></div>

As I understand this is because div is a block element. But I want it to autocomplete like this:

    <div>
        _
    </div>

Underline here is cursor position.

Is there a setting for it?

What I've already found is endWithNewLine, but it is different setting, for files

Best regards,
Gennady

[Mlocik97-issues]

Is it hard to press enter? I Often need it without new line

[Gennady-G]

I Often need it without new line

That's why I suggest setting for it, so I can turn it on, but You can leave as it is..

Or there could be a setting for all types of tags.. for example for <p></p>

[Mlocik97-issues]

It's not hard to press enter, i think it's useless setting and I don't want to have milion settings, because it's problem to find needed setting...

And <p> is unpaired tag

[ramya-rao-a]

@Gennady-G

As I understand this is because div is a block element.

No, div being a block element has nothing to do with this. You will see the same behavior with span or a which are inline elements.

There is no setting to introduce a new line.

You can define custom snippets with the new line if you want though. See https://code.visualstudio.com/docs/editor/emmet#_using-custom-emmet-snippets

The emmet library being used is what provides the expansion of the emmet abbreviations. You can log a feature request there if you want the ability to have newlines between the tags. Though, honestly I don't see it getting implemented as you can easily add the newline manually.

[Gennady-G]

You can log a feature request there if you want the ability to have newlines between the tags. Though, honestly I don't see it getting implemented as you can easily add the newline manually.

Ok @ramya-rao-a , thank You much for response! :)

Best regards,
Gennady

[ramya-rao-a]

No problem, Happy Coding!

[doktordata]

@Gennady-G you could use:

"emmet.preferences": {
  "format.forceIndentationForTags": [
    "div"
  ]
}

From https://docs.emmet.io/customization/preferences/

format.forceIndentationForTags
A comma-separated list of tag names that should always get inner indentation.

[Gennady-G]

@doktordata , Your soulution works, thank You very much! :)