覆盖VS代码片段时如何获取文件名

Question

我正在尝试覆盖 VS 代码中的rfce sn-p，但是当有命名文件时，我似乎无法自动填充文件名。如果文件未保存（未命名），它应该只是 NameOfComponent 但如果文件已保存（有名称），sn-p 应该将组件命名为与文件名相同但没有扩展名。到目前为止，这是我所拥有的：

"React Component": {
  "prefix": "rfce",
  "body": [
    "import React, { useState, useEffect } from \"react\";",
    "",
    "const ${1:NameOfComponent} = () => {",
    "  return (",
    "    <>",
    "       ${2:<div>Hello World</div>}",
    "    </>",
    "  );",
    "};",
    "",
    "export default ${1:NameOfComponent};"
  ],
  "description": "React Component"
}

Answer 1

想必你已经从vscode snippet variables documentation中找到了$TM_FILENAME_BASE作为你需要获取当前文件的文件名而不带扩展名的变量。

理想情况下你想做的是一个choice元素（见Choice doc和类似这样的东西：

"const ${1|NameOfComponent},$TM_FILENAME_BASE|}...", // 不起作用

这是行不通的，因为根据 sn-p 语法，choice 选项只能是 text：

choice ::= '${' int '|' text (',' text)* '|}'

所以你必须尽可能地模拟choice。以下 sn-p 以两种方式做到这一点：

"React Component": {
  "prefix": "rfce",
  "body": [
    "import React, { useState, useEffect } from \"react\";",
    "",

    // "const ${1:NameOfComponent}${2:$TM_FILENAME_BASE} = () => {",      // option 1 works

    "const ${1:${2:NameOfComponent}${3:$TM_FILENAME_BASE}} = () => {",  // option 2 works
    
    "  return (",
    "    <>",
    "       ${4:<div>Hello World</div>}",
    "    </>",
    "  );",
    "};",
    "",
    "export default $1;"  // uses option 2
  ],
  "description": "React Component"
}

选项 1 简单地列出了两个 ${1:NameOfComponent}${2:$TM_FILENAME_BASE} 提供了两个“选项” - 每个将被依次选择，只需在选择时删除您不想要的一个，然后 tab 继续。这非常简单，但每次需要该值时都需要使用整个构造 ${1:NameOfComponent}${2:$TM_FILENAME_BASE}。

选项 2 将整个内容包装在另一个制表位中：

${1:${2:NameOfComponent}${3:$TM_FILENAME_BASE}}} 这有点棘手，但随后将结果放入制表符 $1 中，然后当您想要结果时（如 sn-p 的最后一行），这就是您需要参考的全部内容。

您只需练习一下 - 开始时有一个额外的 选项卡 可以选择NameOfComponent。要接受它，只需 tab 过去它以选择文件名并删除它，反之亦然 - 选择时删除 NameOfComponent 和 tab 选择文件名 - 如果你希望它只是 tab 继续到下一个制表位。

该初始制表符的结果将被放入$1，然后可以在其他地方使用，而无需再次进行选项选择。

这是使用选项 2 的演示：