Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
React-hooks are already 🔥, but remember that when writing react-hooks, value + setValue is very similar, but very different, and always needs to copy value to set. Then manually change the initial letter to uppercase 🤪, write too much is almost 1w 🐑, of course, if the state is a lot of indeed can also use the useReducer substitution, but we are going to talk about the skill actually does not conflict, The ability to add variables to WebStorm’s Live Template custom Template makes it much faster to write hooks like useState every time.
VSCode has a similar feature called Snippets, but I’m not sure if there is a custom variable in template. If you are interested, try it out. Let’s use WS as an example.
Introduction to Live Template
First of all, WebStorm Live Template comes with a lot of code templates. We can see the following figure, which almost includes templates of each front-end technology stack. Code blocks can be generated quickly through these templates and corresponding keywords during coding:
As you can see in the figure above, the IDE already provides a lot of templates for us to use by default, but there will always be places where we want to customize, so WebStorm also provides the ability to add custom templates.
Custom generated useState code template
We here by creating a custom template to improve the efficiency of the hooks we write, by clicking on the top right corner + number, start creating, here we create a new usehook template can take) random (name, enter a roughly the complete block of code, can be added anywhere in the middle of the variables, each variable can provide the function of the operation, We want to use the value function to automatically capitalize the first letter of the value:
We set the SET_STATE variable to capitalize the capitalize letter of an expression in Edit Variables. Once we’ve built it, we’ll see what it looks like. Press Tab to generate the code, and the cursor will hover over the first variable. As you type, the name after set will automatically change to uppercase. After confirming the name, press Tab to jump to the default value of INITIAL_STATE. Cursor jumps to the end of the line:
Seems to feel more comfortable, 🤶 no longer need to be careful every time I manually change my temper 😂. If you often write states that default to [] arrays, you can also create a template that generates default arrays. You can simply write the last variable above as [] :
The above is to produce a Template to write useState code quickly through Live Template, of course we are not limited to useState at all, any hook, as long as you feel uncomfortable with it, you can find a way to use templates to reduce your handwriting input, let the tool to help you do more repetitive things. 😇