在 VScode 中添加关于自动关闭 SASS/CSS 括号的评论

Question

我想在右括号上添加注释，这样当代码嵌套太多时，我可以分辨出每个括号的位置，如下所示：


.parent{
    position: relative;
    height: 100px;
    width: 100px;

   .child{
       position: absolute;
       height: 50px;
       left: 25px;
       width: 50px;

       &:before{
           content: '';
           background: red;
           position: absolute;
           height: 50px;
           top: 25px;
           width: 50px;
       } // before
   } // .child
} // .parent

如果这可以在我键入或自动保存时实现，那就太棒了。

Answer 1

如果找不到可以执行此操作的扩展程序，则可以使用代码段来执行此操作。将其放入您的代码片段文件之一：

"css: add comment": {
  "prefix": "|c",
  "body": [
    "${TM_CURRENT_LINE/(\s*)&*:*(.*)?\s*\|c/{\n${1:-\t}\n} \/*  *\//}",
  ],
  "description": "add comment after closing bracket"
},

我使用 |c 作为前缀，因为它与 emmet html 评论过滤器相同。我不知道您是否可以让 emmet 使用 css 评论过滤器。但是您可以使用任何您希望触发代码段的前缀。这是一个演示：

这里是片段正文转换的细分。

${TM_CURRENT_LINE/(\s*)&*:*(.*)?\s*\|c/ 获取当前行，捕获组 1 将具有下一个缩进子元素所需的缩进量。捕获组 2 将具有当前元素的名称 - 但任何前面的 &: 都不会包含在名称捕获组中。

/{\n${1:-\t}\n} \/* *\// 是转换后的文本。

添加一个换行符，然后添加适当数量的缩进（空格）。如果之前没有缩进——比如第一个 .parent 条目——捕获组 1 将为空，但无论如何我们仍然需要在下一个子元素的中间添加一个制表符。

${1:-\t} 是一个 else 条件，它将在捕获组 1 为空时添加一个制表符，就像在父元素开始时向左齐平时一样。

最后，添加右括号和由 css 注释指示符包围的当前元素（捕获组 2）的名称。

如果您有不想评论的元素，请不要添加代码段前缀。

在 VScode 中添加关于自动关闭 SASS/CSS 括号的评论

Add a comment on closing SASS/CSS brackets automatically in VScode

regex

sass

visual-studio-code

vscode-snippets