覆盖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 时删除 NameOfComponent
和 tab 到 select 文件名 - 如果你想要它只是 tab 继续下一个制表位。
初始 tabstop 的结果将被放入
中,然后可以在其他地方使用,而无需再次通过选项 selection stuff。
这是使用选项 2 的演示:
我试图覆盖 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 时删除 NameOfComponent
和 tab 到 select 文件名 - 如果你想要它只是 tab 继续下一个制表位。
初始 tabstop 的结果将被放入 中,然后可以在其他地方使用,而无需再次通过选项 selection stuff。
这是使用选项 2 的演示: