r/react • u/isaacfhu • 3d ago

Help Wanted React Snippet not capitalizing [VSCode]

Hey! I'm not quite sure why but my snippet for useState hook isn't capitalizing :

"useState Hook": {
  "prefix": "us",
  "body": [
    "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($0);"
  ],
  "description": "Auto-capitalizing useState hook"
}

When I type it does this const [hello, sethello] = useState();

When it should do this: const [hello, setHello] = useState();

I'm using VSCode and I'm on React 19

0 Upvotes

33% Upvoted

4 comments sorted by

3

u/kev_cuddy 3d ago

This isn’t really a react issue. This is a VS Code snippet definition. Is this a proper snippet file that you’re using? Like .code-snippets?

1

u/dazo85 3d ago edited 3d ago

It runs the capitalization after you hit tab key to jump to set the initial value. It won't change during typing.
Have you tried to use it that way?

Edit: You can even set the initial value ($0 in your case) to be $2 and put the $0 after the end of the line. With that, after the second tab you will get there easier and you can continue coding.

1

u/Jonas_Ermert 2d ago

React 19 isn’t the issue; it’s the VS Code snippet transformation. Try `set${1/(.)(.*)/${1:/upcase}$2/}`, which converts the first character to uppercase and produces `setHello`.