0

我想在右括号上添加注释，因此当代码嵌套过多时，我可以知道每个括号所属的位置，如下所示：


.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

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

4

1 回答 1

3

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

"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 评论过滤器。但是您可以使用您希望触发片段的任何前缀。这是一个演示：

添加带有注释的缩进 css 元素的演示

这是片段主体转换的细分。

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

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

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

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

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

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

于 2019-11-20T01:03:51.083 回答