Minimap section headers are not shown for regions in HTML and CSS

[Chrysaloid]

Type: Bug

1. Open any .html or .css file.
2. Type a comment: in .html

   <!-- #region Test -->
   <!-- #endregion -->

   or in .css:

   /* #region Test */
   /* #endregion */

3. Look at the minimap and see that there is no "Test" section header displayed.

I have tried different layouts: HTML

<!--
    #region Test 1
-->
<!-- #endregion -->

<!-- #region Test 2
-->
<!-- #endregion -->

<!--
    #region Test 3 -->
<!-- #endregion -->

<!--
    // #region Test 4
-->
<!-- #endregion -->

<!--
    //#region Test 5
-->
<!-- #endregion -->

CSS

/*
  #region Test 1
*/
/* #endregion */

/* #region Test 2
*/
/* #endregion */

/*
  #region Test 3 */
/* #endregion */

/*
    // #region Test 4
*/
/* #endregion */

/*
    //#region Test 5
*/
/* #endregion */

None of them work.

In both HTML and CSS comments 1-3 produce foldable regions and 4-5 don't produce foldable regions.

In JS though, line comments like // #region <NAME> produce section headers correctly.

For now I have figured a workaround for this by using MARK::

<!-- #region MARK: Test -->
<!-- #endregion -->

/* #region MARK: Test */
/* #endregion */

which does produce section header in the minimap, but it also includes the ending comment part so the resulting header is Test --> (or Test */). Not ideal but works for now.

VS Code version: Code 1.88.1 (e170252f762678dec6ca2cc69aba1570769a5d39, 2024-04-10T17:41:02.734Z) OS version: Windows_NT x64 10.0.19043 Modes:

System Info

|Item|Value| |---|---| |CPUs|12th Gen Intel(R) Core(TM) i9-12900K (24 x 3187)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|undefined| |Memory (System)|31.79GB (16.77GB free)| |Process Argv|--crash-reporter-id e9ca0812-669b-4c22-96cc-6578a0e47256| |Screen Reader|no| |VM|0%|

Extensions (56)

Extension|Author (truncated)|Version ---|---|--- es6-string-css|bas|0.1.0 vscode-toggle-quotes|Bri|0.3.6 xml|Dot|2.5.1 code-runner|for|0.12.2 vscode-embrace-line|HAS|1.0.0 fracturedjsonvsc|j-b|4.0.0 latex-workshop|Jam|9.20.0 javadoc-generator|Kee|3.0.7 javadoc-tools|mad|1.6.0 vscode-autohotkey-plus-plus|mar|5.0.3 language-matlab|Mat|1.2.1 rainbow-csv|mec|3.11.0 vscode-language-pack-pl|MS-|1.88.2024041009 csdevkit|ms-|1.4.29 csharp|ms-|2.23.15 vscode-dotnet-runtime|ms-|2.0.3 vscodeintellicode-csharp|ms-|2.0.25 debugpy|ms-|2024.4.0 python|ms-|2024.4.1 vscode-pylance|ms-|2024.4.1 jupyter|ms-|2024.3.1 jupyter-keymap|ms-|1.1.2 jupyter-renderers|ms-|1.0.17 vscode-jupyter-cell-tags|ms-|0.1.9 vscode-jupyter-slideshow|ms-|0.1.6 remote-wsl|ms-|0.88.0 cmake-tools|ms-|1.17.17 cpptools|ms-|1.19.9 cpptools-extension-pack|ms-|1.3.0 powershell|ms-|2024.2.1 vsliveshare|ms-|1.0.5918 copyplaintext|p26|1.1.5 colorful-comments|Par|1.0.0 material-icon-theme|PKi|4.34.0 vscode-template-literal-editor|pli|0.10.0 java|red|1.29.0 vscode-xml|red|0.26.1 vscode-sort-json|ric|1.20.0 action-buttons|seu|1.2.2 toggle-boolean|sil|0.10.0 html-to-css-autocompletion|sol|1.1.2 es6-string-html|Tob|2.15.0 cmake|twx|0.0.17 sort-lines|Tyr|1.11.0 remove-empty-lines|use|1.0.1 intellicode-api-usage-examples|Vis|0.2.8 vscodeintellicode|Vis|1.3.1 intouch-language|Vit|1.4.0 vscode-java-debug|vsc|0.57.0 vscode-java-dependency|vsc|0.23.6 vscode-java-pack|vsc|0.26.0 vscode-java-test|vsc|0.41.0 vscode-maven|vsc|0.44.0 JavaScriptSnippets|xab|1.8.0 json|Zai|2.0.2 ts-essential-plugins|zar|0.0.77 (1 theme extensions excluded)

A/B Experiments

``` vsliv368:30146709 vspor879:30202332 vspor708:30202333 vspor363:30204092 vscod805cf:30301675 binariesv615:30325510 vsaa593cf:30376535 py29gd2263:30899288 c4g48928:30535728 azure-dev_surveyone:30548225 2i9eh265:30646982 962ge761:30959799 pythongtdpath:30769146 welcomedialogc:30910334 pythonidxpt:30866567 pythonnoceb:30805159 asynctok:30898717 pythontestfixt:30902429 pythonregdiag2:30936856 pyreplss1:30897532 pythonmypyd1:30879173 pythoncet0:30885854 2e7ec940:31000449 pythontbext0:30879054 accentitlementst:30995554 dsvsc016:30899300 dsvsc017:30899301 dsvsc018:30899302 cppperfnew:31000557 d34g3935:30971562 fegfb526:30981948 bg6jg535:30979843 ccp2r3:30993541 dsvsc020:30976470 pythonait:31006305 gee8j676:31009558 dsvsc021:30996838 9c06g630:31013171 ```

[alexdima]

The current implementation uses the folding rules of the outer language for the entire file https://github.com/microsoft/vscode/blob/4af0c6a8f4e8b7ba223d27acd2d894a76a912a5e/src/vs/editor/contrib/sectionHeaders/browser/sectionHeaders.ts#L108-L110 , so in HTML , the following markers will be searched for https://github.com/microsoft/vscode/blob/4af0c6a8f4e8b7ba223d27acd2d894a76a912a5e/extensions/html/language-configuration.json#L28-L33

[VSCodeTriageBot]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[troy351]

It would be better to support embed language regions in minimap. The most useful case is in .vue file's <script> section when using composition api

[ICF-M78]

I am a developer of vue. I really can't use tags in vue, but it can be used normally in .ts. Because the combination API can easily cause confusion in the code structure, I need this function more.

[dominique-mueller]

Multi-line comments in pure JavaScript using /* ... */ are also not recognized.

Seems the feature is very limited as of right now, at least out-of-the-box. Bit of a shame, especially larger CSS files could benefit so much from proper region & mark support.

[vs-code-engineering[bot]]

This feature request has not yet received the 20 community upvotes it takes to make to our backlog. 10 days to go. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[vs-code-engineering[bot]]

:slightly_smiling_face: This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!