Search code examples
cssvisual-studio-codeeditorindentationfolding

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

Solution

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