HTML formatter breaks layout by introducing a newline

[lgarron]

Issue Type: Bug

Format the following HTML file contents:

<span>
  <span
    ><span>1:02</span><time-dot>.</time-dot
    ><time-decimals>27</time-decimals>
  </span>
</span>

Expected: The resulting HTML renders the same in the browser.

Observed:

The code is formatted into:

<span>
  <span><span>1:02</span>
    <time-dot>.</time-dot>
    <time-decimals>27</time-decimals>
  </span>
</span>

This introduces newlines (and spaces) before and after the <time-dot> element, which adds visual space between the elements on the page that was not there before:

This happens for me with all extensions disabled. I cannot find a reasonable workaround apart from disabling the built-in formatter. 😕

VS Code version: Code 1.64.2 (f80445acd5a3dadef24aa209168452a3d97cc326, 2022-02-09T22:00:56.651Z) OS version: Darwin arm64 21.3.0 Restricted Mode: No

System Info

|Item|Value| |---|---| |CPUs|Apple M1 Max (10 x 24)| |GPU Status|2d_canvas: enabled
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
skia_renderer: disabled_off_ok
video_decode: enabled
webgl: enabled
webgl2: enabled| |Load (avg)|8, 6, 4| |Memory (System)|64.00GB (0.06GB free)| |Process Argv|--crash-reporter-id 1c5a7035-d075-4f11-a069-6f924bdc4de4| |Screen Reader|no| |VM|0%|

Extensions (47)

Extension|Author (truncated)|Version ---|---|--- Bookmarks|ale|13.2.4 markdown-preview-github-styles|bie|1.0.1 vscode-gemfile|bun|0.4.2 npm-intellisense|chr|1.4.1 custom-window-zoom|cra|1.1.4 vscode-github-actions|csc|0.22.0 vscode-markdownlint|Dav|0.46.0 vscode-eslint|dba|2.2.2 githistory|don|0.6.19 vscode-wasm|dts|1.3.1 gitlens|eam|11.7.0 scad|efb|1.0.1 prettier-vscode|esb|9.3.0 codespaces|Git|1.5.4 vscode-pull-request-github|Git|0.36.2 go|gol|0.31.1 language-julia|jul|1.5.11 bikeshed|kai|0.0.1 endwise|kai|1.5.1 vscode-github|Kni|0.30.7 rust-analyzer|mat|0.2.948 prettify-json|moh|0.0.3 vscode-json5|mrm|1.0.0 vscode-docker|ms-|1.20.0 python|ms-|2022.0.1814523869 vscode-pylance|ms-|2022.2.4 jupyter|ms-|2022.1.1301854968 jupyter-keymap|ms-|1.0.0 jupyter-renderers|ms-|1.0.6 remote-ssh|ms-|0.74.0 remote-ssh-edit|ms-|0.74.0 cpptools|ms-|1.8.4 vsliveshare|ms-|1.0.5330 debugger-for-chrome|msj|4.13.0 synthwave-vscode|Rob|0.1.11 rome|rom|0.0.3 vs-code-prettier-eslint|rve|3.1.0 slim|sia|0.1.2 vscode-windows-xp-theme|sin|0.1.0 pegjs-language|Sir|1.0.4 fish-vscode|sky|0.2.1 rewrap|stk|1.16.3 shellcheck|tim|0.18.9 language-pde|Tob|1.4.6 vscode-status-bar-format-toggle|tom|3.0.0 vscode-java-pack|vsc|0.21.0 vscode-proto3|zxh|0.5.5 (1 theme extensions excluded)

A/B Experiments

``` vsliv368cf:30146710 vsreu685:30147344 python383cf:30185419 vspor879:30202332 vspor708:30202333 vspor363:30204092 pythonvspyl392:30443607 pythontb:30283811 pythonptprofiler:30281270 vshan820:30294714 vstes263cf:30335440 vscorecescf:30442554 pythondataviewer:30285071 vscod805cf:30301675 pythonvspyt200:30340761 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 vsc1dst:30438360 pythonvs932:30410667 wslgetstartedc:30433508 vsclayoutctrt:30437039 vsrem710cf:30416617 dsvsc009:30440023 pythonvsnew555:30442236 vsbas813:30436447 vscscmwlcmt:30438805 helix:30440343 vsnot107cf:30443615 ```

[aeschli]

We use beautifyjs as the underlying HTML formatter. Would you mind filing this request directly against https://github.com/beautify-web/js-beautify ?

[lgarron]

Would you mind filing this request directly against https://github.com/beautify-web/js-beautify ?

I gave it a go, although if I get questions about "how I'm using it" I might need to point them back here.