0

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);
LazyOne
  • 158,824
  • 45
  • 388
  • 391
G. Vallereau
  • 141
  • 3
  • 8

1 Answers1

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$

enter image description here
(use proper abbreviation/description of course)

LazyOne
  • 158,824
  • 45
  • 388
  • 391
  • Very close to what I did except that I put `capitalize(NAME)` in default value. Probably a lack of understanding so I'll change that. Thank you – G. Vallereau Feb 22 '23 at 18:58
  • The column does not really matter as long as it works well for you and produces expected result. At the and it is what matters the most. From personal experience: I have never tried to use "Default" column for such intermediate variable stuff. Because in my mind it's for the value that you _may still be_ changing .. while here you will not. – LazyOne Feb 22 '23 at 19:01