在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${1:-\t}\n$1} \\/* $2 *\\//}",
  ],
  "description": "add comment after closing bracket"
},

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

---

这是摘要正文转换的细分。

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

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

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

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

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

---

如果您有不想注释的元素，则不要添加代码段前缀。