vscode: [html] HTML breadcrumbs don't work right when optional end tags omitted

  • VSCode Version: 1.42.0-insider
  • OS Version: Linux Mint 19.3

Steps to Reproduce:

  1. Create an HTML document. Sprinkle liberally with <p>, <li> (inside of <ul> or <ol>, obviously), <tr> or <td> inside of <table>, and any other elements noted in the HTML5 spec as having optional end tags (see https://html.spec.whatwg.org/#syntax-tag-omission).
  2. If you closed the various tags above with their end tags (e.g., </p>), then run the page through something like HTML Tidy (I am using v5.7.28), passing in the --omit-optional-tags yes argument.
  3. Open the reformatted file in VSCode and navigate somewhere where there are multiple <p> or <li> or similar in a row. Note that there will be a breadcrumb for each open tag, because VSCode is apparently looking for end tags to close off the element, even though it is not required.

In a complex document, this make VSCode breadcrumbs pretty worthless. Here is an example, before a Tidy reformat, with focus on the third list item element in the fourth paragraph (note breadcrumbs working as expected):

BeforeReformat

And here are the breadcrumbs after the Tidy reformat, with focus on the same list item element:

AfterReformat

Does this issue occur when all extensions are disabled?: Yes

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 2
  • Comments: 15 (7 by maintainers)

Most upvoted comments

v1.11.0 of js-beautify fixes the formatting issue that @nikeee commented on. This doesn’t fix the breadcrumb issue.