VSCode 代码段 - 根据用户输入的长度动态生成字符

Question

我有这个 vue-html

的基本片段

{
    "BANNER1": {
        "prefix": "banner",
        "body": ["<!-- ----------------", "/// ", "--------------------- -->"]
    }
}

它渲染这个

<!-- ----------------
/// ADD VALUES 
--------------------- -->

现在，我硬编码了 16 个破折号 -

我可以根据我的 1 美元动态生成 - 的金额吗？

比方说，我输入包含 5 个字符的“你好”

我希望得到这个

<!-- -----
/// Hello
----- -->

Answer 1

试试这个片段：

"BANNER1": {
  "prefix": "banner",
  "body": [
    "<!-- ${1/./-/g}",
      "/// ", 
      "${1/./-/g} -->"
  ]
}

{1/./-/g} 会将 </code> 中的每个字符替换为 <code>-。这样你就可以有效地计算 </code>. 中的字符数 <a href="https://i.stack.imgur.com/8y497.gif" rel="nofollow noreferrer"><WBIMG:17845548-1.gif></a> <hr /> 如果你想加一个小于<code>的长度怎么办，那么用这个：

"<!-- ${1/^.|(.)/${1:+-}/g}"

第一个字符 . 未在正则表达式组中捕获。所以如果你想使用 length-2 你会改变第一部分 ^.. 所以 ${1/^..|(.)/${1:+-}/g} 或一般

${1/^.{n}|(.)/${1:+-}/g}

并将 n 替换为您要从 </code> 中减去的任何数字。 tabstop $1 的其余部分一一匹配（感谢全局标志）。然后是条件 <code>${1:+-}表示如果有捕获组1，则加一个-。捕获组 1 本身永远不会添加到替换中。

VSCode 代码段 - 根据用户输入的长度动态生成字符

VSCode Snippet - Dynamically generating characters based on user input length

html

vue.js

visual-studio-code

vscode-snippets