VSCode 中 CSS 的代码折叠

Question

我无法在 Css 的编辑器中进行代码折叠。在 html 和 js 中，我都可以根据注释折叠代码，这使我能够创建整洁的组。但是在 Css 你不能折叠评论。有谁知道启用这个或另一个在 Css 文件中创建代码组的好方法吗？这是一些图片。

在这里您可以看到自己的类评论旁边没有减号按钮：

但是在这里你可以看到注释在 js 中很好地折叠，这使我能够创建漂亮的代码组：

Answer 1

请参阅 the docs 了解 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*/

因此您的基于语法的代码折叠应该默认为 CSS 激活。您可以通过以下设置切换回 CSS 使用缩进：

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

Answer 2

在最新版本的 VS 代码中，您不必在“设置”中启用特定规则 JSON。只需使用 #region 定义一个开始评论，当您想关闭该组时，使用 #endregion 创建另一个评论。示例：

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

如果您想命名您的区域（通常是这种情况），您可以定义第一个区域评论旁边的标签，例如

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

测试版本：1.67.2

VSCode 中 CSS 的代码折叠

Code Folding for CSS in VSCode

css

visual-studio-code

editor

indentation

folding