CODEWITHSUNDEEP
cssvisual-studio-codeeditorindentationfolding
Frank
Frank

Reputation: 2431

Code Folding for CSS in VSCode

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

Upvotes: 15

Views: 10190

Answers (3)

Cloud Flower
Cloud Flower

Reputation: 1

The following code works for vs code and webstorm:

//#region This is the group label

//#endregion

Upvotes: 0

Ema Suriano
Ema Suriano

Reputation: 131

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

Upvotes: 5

andreas
andreas

Reputation: 16936

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"
},

Upvotes: 32

Related Questions