Is there a way to collapse multiple functions at once but not all of them in vscode? [duplicate]

by

I want to group multiple lines of CSS code into a single collapsible section, is there a way to do that in vscode?

enter image description here

I tried to use brackets but that didnt work. I tried other things as well but nothing seems to work.

Visual Studio Code supports folding regions for markers if the language of the file have markers defined.

For CSS, by default its markers is defined as /*#region*/ and /*#endregion*/:

/* #region Header */
.nav {
  width: 40px
}

#Boutons {
  width: 30px;
}
/* #endregion */

/* #region Footer */
.footer {
  height: 30px;
}

.footer p {
  height: 30px;
}
/* #endregion */

folding regions opened
folding regions folded

For other languages that doesn’t have default markers defined, you would need to follow all steps to create a language extension, and define markers in language-configuration.json. For example, the following official example creates folding markers for //#region and //#endregion.

{
 "folding": {
    "markers": {
      "start": "^\\s*//\\s*#?region\\b",
      "end": "^\\s*//\\s*#?endregion\\b"
    }
  }
}

…Or alternatively, use the new Create/Remove Manual Folding Ranges from Selection commands. (Ctrl+K Ctrl+, and Ctrl+K Ctrl+.) These manual folding arrows will stick around even if you edit the code. However, the drawback is that they couldn’t be tracked by source control (not that I am aware of). Also, be aware that there is no visual difference when it overwrites the default folding providers (like the arrows for each selector).

Fold by manual folding ranges

Leave a Comment