添加关于在 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

如果您没有找到可以执行此操作的扩展程序，您可以使用 sn-p 执行此操作。将其放入您的一个 sn-ps 文件中：

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

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

---

这里是 sn-p 体变换的细分。

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

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

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

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

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

---

如果您有不想评论的元素，请不要添加 sn-p 前缀。