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


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$);

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);

>Solution :

  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.

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$);

(use proper abbreviation/description of course)

Leave a Reply Cancel reply