Search code examples
cssvisual-studio-codesectionscode-organization

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

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.

Solution

  • 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