How to create a live template in JetBrains IDEs to create hook state in React?

Question

I'd like to create a live template to quickly add a new state variable using React hooks in PyCharm for example.

I think I got something close to what I want (including state type for TypeScript):

const [$1$, set$1$] = useState<$2$>($3$);
$END$

But doing that with count for example, I still have to rename the function setcount for it to be CamelCase because I get:

const [count, setcount] = useState<number>(0);

Answer 1

1. Avoid using numbers for variable names, use proper names. It's easier to read and reference them.

2. Introduce another variable for set$1$, e.g. set$NAME2$.

3. Then on the Edit variables screen, for that new NAME2 variable just reference the original variable and use with capitalize() function. https://www.jetbrains.com/help/webstorm/template-variables.html#configure_template_variables

This way that intermediate $NAME2$ variable will be used (transformed) but you will not be filling it manually and it will be skipped when jumping between edit points once that live template is expanded.

const [$NAME$, set$NAME2$] = useState<$TYPE$>($VAL$);
$END$

(use proper abbreviation/description of course)