vscode 片段 - 转换和替换文件名

Question

我的文件名是

some-fancy-ui.component.html

我想使用 vscode 片段将其转换为

SOME_FANCY_UI

所以基本上

对每个字符应用大写
将所有 - 替换为 _
删除。component.html

目前我有

'${TM_FILENAME/(.)(-)(.)/${1:/upcase}${2:/_}${3:/upcase}/g}'

这给了我这个

'SETUP-PRINTER-SERVER-LIST.COMPONENT.HTML'

文档没有解释如何在正则表达式组上应用替换及其转换。

Answer 1

如果您需要上层的块用 - 或 . 分隔，您可以使用

"Filename to UPPER_SNAKE_CASE": {
    "prefix": "usc_",
    "body": [
        "${TM_FILENAME/\.component\.html$|(^|[-.])([^-.]+)/${1:+_}${2:/upcase}/g}"
    ],
    "description": "Convert filename to UPPER_SNAKE_CASE dropping .component.html at the end"
}

您可以检查regex workings here。

\.component\.html$ - 匹配字符串末尾的 .component.html
| - 或
(^|[-.]) 捕获字符串的开头或 - / . 到组 1
([^-.]+) 将 - 和 . 以外的任何 1+ 个字符捕获到第 2 组中。

${1:+_}${2:/upcase}替换的意思是：

${1:+ - 如果第 1 组不为空，
_ - 替换为 _
} - 第一组处理结束
${2:/upcase} - 放回上面的第 2 组值。

Answer 2

这是一个非常简单的交替正则表达式：

"upcaseSnake": {
  "prefix": "rf1",
  "body": [
    "${TM_FILENAME_BASE/(\..*)|(-)|(.)/${2:+_}${3:/upcase}/g}",

    "${TM_FILENAME/(\..*)|(-)|(.)/${2:+_}${3:/upcase}/g}"
  ],
  "description": "upcase and snake the filename"
},

两个版本都可以。

(\..*)|(-)|(.) 三个捕获组的交替在概念上很简单。组的顺序很重要，这也是正则表达式如此简单的原因。

(\..*) 文件名中第一个点 . 之后的所有内容（包括第一个点）都将进入第 1 组，该组不会在转换中使用。

(-)第2组，如果有第2组，用下划线替换${2:+_}.

(.) 第 3 组，所有其他字符进入第 3 组，将被大写 ${3:/upcase}。

见regex101 demo。

vscode 片段 - 转换和替换文件名

vscode snippet - transform and replace filename

regex

visual-studio-code

vscode-snippets