VS Code:如何将片段占位符从驼峰式大小写转换为 SCREAMING_SNAKE_CASE? [英] VS Code: How to convert snippet placeholder from camelCase to SCREAMING_SNAKE_CASE?

问题描述

我想创建一个用于创建 redux 减速器的 VS 代码片段.

我想要一个带有占位符的片段，它需要驼峰式大小写，然后将匹配的占位符转换为 SCREAMING_SNAKE_CASE.

这是我尝试的片段，但不起作用:

测试":{前缀":测试"，"body": "${1} -> ${1/([a-zA-Z])(?=[A-Z])/${1:/upcase}_/g}"},

产生不想要的结果:

changeNetworkStatus ->changeE_NetworkK_Status

所需流程

1. 输入test(片段名称)
2. 点击 tab 加载代码片段.

3. 输入 changeNetworkStatus 得到:

   changeNetworkStatus ->更改网络状态

4. 点击 tab 以获得预期结果:

   changeNetworkStatus ->CHANGE_NETWORK_STATUS

如何更改我的代码片段以获得所需的结果?

---

片段版本:

camelCaseModify":{前缀":测试"，身体":[//第一次低效尝试，最多可用于三个单词//"${1} ->${1/^([az]*)([AZ])([az]+)*([AZ])*([az]+)*/${1:/upcase}_$2${3:/upcase}${4:+_}$4${5:/upcase}/g}""${1} ->${1/([az]*)(([AZ])+([az]+))?/${1:/upcase}${2:+_}$3${4:/upcase}/g}"],描述":下划线分隔符"；},

这适用于任意数量的驼峰式单词，从一到无穷大...

${2:+_} 表示如果有捕获组 2，则附加下划线".如果没有第二个单词/捕获组，则组 3 和 4 无论如何都将为空，因为它们在捕获组 2 内.捕获组 2 始终是下一个单词(以一个大写开头，后跟至少一个小写字母).

例如，使用changeNetworkStatus:

匹配 1完全匹配 0-13 `changeNetwork`第 1 组.0-6`变化`第 2 组. 6-13 `网络`第 3 组. 6-7 `N`第 4 组. 7-13 `网络`第 2 场比赛全场比赛 13-19 `状态`第 1 组. 13-13 ``第 2 组. 13-19 `状态`第 3 组. 13-14 `S`第 4 组. 14-19 `tatus`第 3 场比赛全场19-19``第 1 组. 19-19 ``

样本输出:

abcd ->A B C D两条鱼 ->两条鱼三鱼更多 ->THREE_FISH_MORE四鱼一个更多 ->FOUR_FISH_ONE_MORE五条鱼两条更多鱼 ->FIVE_FISH_TWO_MORE_FISH六鱼鳗蛇狗猫老鼠老鼠时钟岩石 ->SIX_FISH_EELS_SNAKES_DOGS_CATS_MICE_RATS_CLOCKS_ROCKS

使用 regex101.com 确实有助于可视化正在发生的事情！

I'd like to create a VS Code snippet for creating redux reducers.

I would like to have a snippet with placeholder that expects camelCase and then transform a matching placeholder to SCREAMING_SNAKE_CASE.

Here's my attempted snippet, which is not working:

"test": {
    "prefix": "test",
    "body": "${1} -> ${1/([a-zA-Z])(?=[A-Z])/${1:/upcase}_/g}"
},

Which produces a non-desired result:

changeNetworkStatus -> changE_NetworK_Status

Desired Flow

1. type test (name of snippet)
2. hit tab to load the snippet.

3. type changeNetworkStatus to result in:

   changeNetworkStatus -> changeNetworkStatus
   

4. hit tab to get expected result of:

   changeNetworkStatus -> CHANGE_NETWORK_STATUS
   

How can I change my snippet code to get the desired result?

Here's a related solution which requires a different flow.

解决方案

Update: Keybinding version:

VScode is adding the editor.action.transformToSnakecase in v1.53 so the requested operation can be done easier without having to figure out the neccessary regex to make it work as shown in the previous answer. And because some people might find this question looking for snake case (snake-case) information.

What I show now is NOT a snippet however. You just type your text and then trigger the keybinding. The keybinding itself fires a macro extension command from the multi-command extension. In keybindings.json:

      {
        "key": "alt+3",                        // whatever keybinding you wish
        "command": "extension.multiCommand.execute",
        "args": {
          "sequence": [
            "cursorWordLeftSelect",            // select word you just typed
            "editor.action.transformToSnakecase",
            "editor.action.transformToUppercase",
            // "cursorLineEnd"                   // if you want this
          ]
        },
        "when": "editorTextFocus && !editorHasSelection"
      },

Demo of keybinding version:

---

Snippet version:

"camelCaseModify": {
    "prefix": "test",       
    "body": [
       
       //  first inefficient try, works for up to three words
       //  "${1} -> ${1/^([a-z]*)([A-Z])([a-z]+)*([A-Z])*([a-z]+)*/${1:/upcase}_$2${3:/upcase}${4:+_}$4${5:/upcase}/g}"

       "${1} -> ${1/([a-z]*)(([A-Z])+([a-z]+))?/${1:/upcase}${2:+_}$3${4:/upcase}/g}"           
    ],
    "description": "underscore separators"
},

This works with any number of camelCase words, from one to infinity...

The ${2:+_} means "if there is a capture group 2 then append an underscore." If there isn't a second word/capture group then groups 3 and 4 will be empty anyway because they are within capture group 2. Capture Group 2 is always the next Word (that starts with one capital and followed by at least one small letter).

for example, using changeNetworkStatus:

Match 1

Full match    0-13    `changeNetwork`
Group 1.      0-6     `change`
Group 2.      6-13    `Network`
Group 3.      6-7     `N`
Group 4.      7-13    `etwork`

Match 2

Full match    13-19    `Status`
Group 1.      13-13     ``
Group 2.      13-19     `Status`
Group 3.      13-14     `S`
Group 4.      14-19     `tatus`

Match 3

Full match    19-19    ``
Group 1.      19-19    ``

Sample Output:

abcd -> ABCD
twoFish -> TWO_FISH
threeFishMore -> THREE_FISH_MORE
fourFishOneMore -> FOUR_FISH_ONE_MORE
fiveFishTwoMoreFish -> FIVE_FISH_TWO_MORE_FISH
sixFishEelsSnakesDogsCatsMiceRatsClocksRocks -> SIX_FISH_EELS_SNAKES_DOGS_CATS_MICE_RATS_CLOCKS_ROCKS

Using regex101.com really helps to visualize what is going on!

这篇关于VS Code:如何将片段占位符从驼峰式大小写转换为 SCREAMING_SNAKE_CASE?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！