Code Folding for CSS in Vscode

Code Folding for CSS in VSCode

See the docs to read about code folding in VS Code:

Since the 1.22 release, folding ranges can also be computed based on
syntax tokens of the editor's configured language. The following
languages already provide syntax aware folding:

Markdown, HTML, CSS, LESS, SCSS and JSON

CSS/Less/SCSS: /*#region*/ and /*#endregion*/

So your code folding based on syntax should be activated by default for CSS. You can switch back to using indentation for CSS with the following setting:

"[css]": {
  "editor.foldingStrategy": "indentation"
},

How do I collapse sections of code in Visual Studio Code for Windows?

Folding has been rolled out and is now implemented since Visual Studio Code version 0.10.11. There are these keyboard shortcuts available:

• Fold folds the innermost uncollapsed region at the cursor:

  • Ctrl + Shift + [ on Windows and Linux
  • ⌥ + ⌘ + [ on macOS

• Unfold unfolds the collapsed region at the cursor:

  • Ctrl + Shift + ] on Windows and Linux
  • ⌥ + ⌘ + ] on macOS

• Fold All folds all regions in the editor:

  • Ctrl + K, Ctrl + 0 (zero) on Windows and Linux
  • ⌘ + K, ⌘ +0 (zero) on macOS

• Unfold All unfolds all regions in the editor:

  • Ctrl + K, Ctrl + J on Windows and Linux
  • ⌘ + K, ⌘ + J on macOS

---

References: https://code.visualstudio.com/docs/getstarted/keybindings

How can I fold or collapse multiple CSS rules in VS Code?

/* #region */
.css{}
/* #endregion */

or

/* #region optional name for the section */
.css{}
/* #endregion */

This works for VS Code, haven't checked for other editors.

Edit: A code snippet to create a region for vs code:

"css-region": {
    "body": [
        "/* #region ${1: name} */",
        "$0",
        "/* #endregion ${1: name} */",
    ],
    "description": "Create a css region section",
    "prefix": "#reg"
}

Is it possible to place the code folding icons in VSCode?

No, this is not possible as of VS Code 1.24.

If this is something that you would like to see, please file a feature request

how to use Indentation folding strategy and custom folding rules?

So to solve that, need to change folding rules in language-extension settings.

C:\Users\usr\.vscode\extensions\geequlim.godot-tools-1.1.2\configurations\gdscript-configuration.json

Now, need to put this to end of language settings:

"folding": {
    "offSide": true,
    "markers": {
        "start": "#\\s*region\\b",
        "end": "#\\s*end\\b"
    }
}

Or what you need.
Actually, I notice that there already was some Implementation of #region, but a bit harder to match that pattern.
Sorry for wasting ur time.

How to keep code-folding on save in Visual studio code

Thank you for bringing up the extensions Mark. It was indeed an extension: lonefy.vscode-js-css-html-formatter.

Once this was disabled, the folding kept its state after saving.

---

Related Topics