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

How to get file name when overriding VS Code snippet

我试图覆盖 VS 代码中的 rfce 片段,但当存在命名文件时,我似乎无法自动填充文件名。在文件未保存(未命名)的情况下,它应该只是 NameOfComponent 但如果文件已保存(有名称),则代码段应将组件命名为与文件名相同但没有扩展名。这是我目前所拥有的:

"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"
}

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

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

"const ${1|NameOfComponent},$TM_FILENAME_BASE|}...", // 无效

那是行不通的,因为根据片段语法 choice 选项只能是 text:

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

因此您必须尽可能模拟 choice。以下代码段以两种方式执行此操作:

"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 ;"  // uses option 2
  ],
  "description": "React Component"
}

选项 1 简单地列出了两个 ${1:NameOfComponent}${2:$TM_FILENAME_BASE} 提供了两个“选项”——每个选项将依次 selected,只需删除你不想要的 select ed 和 tab 继续。这非常简单,但确实需要您每次需要该值时都使用整个结构 ${1:NameOfComponent}${2:$TM_FILENAME_BASE}

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

${1:${2:NameOfComponent}${3:$TM_FILENAME_BASE}}} 这有点棘手,但是结果会被放入 tabstop </code> 然后这就是你想要结果时需要参考的全部内容(如最后一行片段)。</p> <p>你只需要稍微练习一下 - 在 select <code>NameOfComponent 的开头有一个额外的 tab。要接受它,只需 tab 将其传递到 select 文件名并删除它,反之亦然 - 在 selected 时删除 NameOfComponenttab 到 select 文件名 - 如果你想要它只是 tab 继续下一个制表位。

初始 tabstop 的结果将被放入 中,然后可以在其他地方使用,而无需再次通过选项 selection stuff。

这是使用选项 2 的演示: