DEV Community

Joe Purnell
Joe Purnell

Posted on

TIL: VSCode snippets can transform inputs

I'm on a quest to make my development tooling more efficient for my personal wants and needs. This lead me to adding some snippets to VSCode.

I added a snippet for creating a usage of React's useState hook and found my first rendition subpar:

//...
"reush": {
    "prefix": "React useState hook",
    "body": "const [${1:variable}, set${1:variable}] = useState<${2:type}>(${3:default});$0"
}
//...
Enter fullscreen mode Exit fullscreen mode

When I used this snippet first I'd put the variable name isEnabled which would also populate the setter which was handy.

const [isEnabled, setisEnabled] = useState<boolean>(false);
Enter fullscreen mode Exit fullscreen mode

Unfortunately, it would populate the setter with the exact same input so the setter would be left as setisEnabled so I'd have to go back and edit this entry.

Finding this I then made a discover from a quick web search: VSCode can transform the input!

A quick update to the snippet shows this in action:

"reush": {
    "prefix": "React useState hook",
    "body": "const [${1:variable}, set${1/(.*)/${1:/capitalize}/}] = useState<${2:type}>(${3:default});$0"
}
Enter fullscreen mode Exit fullscreen mode

Now, the same snippet transforms the input! I type in the variable name isEnabled which gets duplicated to the setter. When I hit tab to move to the next type field, the setter transforms to be capitalised leaving:

const [isEnabled, setIsEnabled] = useState<boolean>(false);
Enter fullscreen mode Exit fullscreen mode

Wonderful!

useStateHook

Other transforms include upcase, downcase, camelcase, pascalcase. Read more about it in the VSCode documentation.

Top comments (0)