如何在覆盖 VS Code 片段时获取文件名

Question

我正在尝试覆盖rfceVS 代码中的代码片段，但当存在命名文件时，我似乎无法自动填充文件名。如果文件未保存（未命名），则应该如此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"
}

Answer 1

如果您想将代码片段制作为新文件的模板，请参阅/sf/answers/5113020321/。代码片段模板功能已内置到 vscode 中。

想必您已经$TM_FILENAME_BASE从vscode 片段变量文档中找到了获取当前文件的文件名（不带扩展名）所需的变量。

理想情况下，您想要做的是一个choice元素（请参阅Choice 文档和类似的内容：

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

选项 1 只是列出了两个${1:NameOfComponent}${2:$TM_FILENAME_BASE}“选项” - 每个选项都会被依次选择，只需在选择时删除您不想要的选项即可tab继续。${1:NameOfComponent}${2:$TM_FILENAME_BASE}这非常简单，但确实需要您每次需要该值时都使用整个结构。

选项 2 将整个内容包装在另一个 tabstop 中：

${1:${2:NameOfComponent}${3:$TM_FILENAME_BASE}}}这有点棘手，但结果会被放入 tabstop 中$1，然后当您想要结果时，您需要引用它（如代码片段的最后一行）。

你只需要稍微练习一下——tab开始时有一个额外的选择NameOfComponent。要接受它，tab就选择文件名并删除它，反之亦然 -NameOfComponent选择它时删除并tab选择文件名 - 如果您希望它只是tab继续到下一个制表符。

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

这是使用选项 2 的演示：

Answer 2

您可以使用TM_FILENAME_BASE - 当前文档的文件名，不带扩展名

反应函数类型组件的示例：

  "create react functional component": {
"prefix": "trafce",
"body": [
  "import { FC } from \"react\"",
  "\n",
  "interface Props {\n\n}",
  "\n",
  "const $TM_FILENAME_BASE:FC<Props> = ({}) => {",
  "   return (",
  "       <div> ${1:$TM_FILENAME_BASE} </div>",
  "   )",
  "}",
  "\n",
  "export default $TM_FILENAME_BASE"
],
"description": "Create a react-typed functional component "
}

代码片段请参见演示Demo