vscode 片段 - 轉換和替換文件名

Question

我的文件名是

some-fancy-ui.component.html

我想使用 vscode 片段將其轉換為

SOME_FANCY_UI

所以基本上

1. 對每個字符應用大寫
2. 全部替換 - 用 _
3. 刪除 .component.html

目前我有

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

這給了我這個

'設置-打印機-服務器-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"
}

您可以在此處檢查正則表達式的工作情況。

• \\.component\\.html$ - 匹配字符串末尾的.component.html
• | - 或者
• (^|[-.])捕獲字符串的開頭或- / . 進入第一組
• ([^-.]+)捕獲除-和.之外的任何 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 演示。