12

I can't get code folding to work in the editor in Css. In both html and js I can fold code according to comments, which enables me to create neat groups. But in Css you can't fold comments. Does anyone know of a way to enable this or another nice tip for creating groups of code in a Css file? Here are some pictures.

Here you can see there is not minus button next to the Own Classes comment:

enter image description here

But here you can see the comments fold nicely in js, this enables me to create nice groups of code:

enter image description here enter image description here

andreas
  • 16,357
  • 12
  • 72
  • 76
Frank
  • 2,109
  • 7
  • 25
  • 48

3 Answers3

27

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*/

enter image description here

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"
},
andreas
  • 16,357
  • 12
  • 72
  • 76
3

In the latest version of VS code you don't have to turn on specific rule inside Settings JSON. Just define an opening comment with the #region and when you want to close the group create another one with #endregion. Example:

/* #region */
.class { 
  color: red
}
/* #endregion */

In case you want to name your regions (which is normally the case), you can define the label next to the first region comment like

/* #region This is the group label */
.class { 
  color: red
}
/* #endregion */

Tested on Version: 1.67.2

Ema Suriano
  • 81
  • 4
0

The following code works for vs code and webstorm:

//#region This is the group label

//#endregion
Cloud Flower
  • 1
  • 1