React (setState({})); react ({});

The answer is yes, webStorm’s Live Tempalte solves this problem perfectly,

Enter SST and press Tab or Enter. The system automatically generates the following code

this.setSate();
Copy the code

Similarly, react-req is generated automatically by pressing Tab

this.props.().then(res => { if (res.error) { notification.error({ message: '', }); return; }});Copy the code

The system automatically generated a large section of code, is not very convenient.

If you want to see more abbreviations, check them outsetting -> Editor -> Live TemplateView, as shown in figure:

React – related abbreviation

Secondary development

The system-preset SST generates this.setsate (); Actually, it’s not what you want most, it’s better to generate the sum like this, just write the variable

this.setState({

});
Copy the code

So how do you set it up? Webstorm uses the $variable_name$syntax, we can reserve some edit points $NAME$for variables and function names (we can have multiple edit points in the same template), and then set the last position of the cursor with $END$.

So let’s modify the SST generated content of the system

SetState ({$END$}); // Select SST from Live Template and change Template text to this.setState({$END$});Copy the code

Enter SST and Tab or Enter again to generate the following content, and point the mouse cursor to the second line. Set variables directly

this.setState({

});
Copy the code

If you also want to call the first line: and, you can change the SST tempalte text to

this.setState({
    $KEY$: $VALUE$,$END$
});
Copy the code

Automatic completion, generate the following code

this.setState({
    : ,
});
Copy the code

The configuration is as follows: