Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 964
Frank Avatar asked Jun 11 '18 06:06

Frank


1 Answers

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"
},
like image 85
andreas Avatar answered Sep 20 '22 12:09

andreas