regexcamelcasingvscode-snippetssnakecasing

How to convert snippet placeholder from CamelCase to snake_case


I would like to create a VS Code snippet where I input a part in CamelCase, and the same string is output in snake_case at some other place in the snippet.

Based on this SO post Here's my attempted snippet, but I have a trailing _ that needs to be removed by hand, not ideal:

"test": {
    "prefix": "test",
    "body": "${1} -> ${1/([A-Z])+([a-z]+)/${1:/downcase}${2}_/g}"
},

Solution

  • "camelToSnakeCase": {
      "prefix": "test",
      "body": [
    
        "${1} -> ${1/([A-Z][a-z]+$)|([A-Z][a-z]+)/${1:/downcase}${2:/downcase}${2:+_}/g}"
      ],
      "description": "transform from CamelCase to snake_case"
    }
    

    In order to differentiate between some last capture group like Abcd and the preceding capture groups, I used an alternation:

    ([A-Z][a-z]+$)|([A-Z][a-z]+) must be in this order

    so group 1 will be at the end of the input because of the $ indicator and group 2 will not be at the end. And group 2s will always have at least one more group after them. Then, using the conditional ${2:+_} only insert an underscore if there is a group 2 - because there must be a following group 1.


    This keybinding version also works if you have a different workflow:

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

    Type your word and trigger the keybinding. Uses the macro extension multi-command.