webstorm编辑器-事半功倍的动态模板(live template)

2018-12-06
tool
5054

最近在开发react过程中,经常遇到很多的setState({}),等类似重复性的代码,然后问题来了,有没有自动补全的快捷键,快速生成这种系统代码?

答案是有的,webStorm 的动态模板(live tempalte)完美的解决了这个问题,

代码中输入sst接着按Tab或者Enter,系统就自动生成如下代码

this.setSate();

类似的还有 react-req接着按 Tab,自动生成

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

});

系统自动生成了大段代码,是不是很方便。

如果要查看更多的简写,可以查看 setting -> Editor -> Live Template 查看,如图:

还可以使用快捷键 command + J 查看支持的动态模板

react 相关简写

二次开发

系统预置的sst生成this.setSate();其实还不是最想要的,最好能生成如下和形式,直接写变量就行

this.setState({

});

那该如何设置呢?webstorm使用 $variable_name$ 语法,我们可以给变量和函数名字预留一些编辑点$NAME$(我们可以在同一个模板中有多个编辑点),然后通过 $END$ 设置光标最后指向的位置.

所以我们来修改系统自带的sst的生成内容

// 在Live Template 面板找到sst,把 Template text 修改如下
this.setState({
    $END$
});

再次输入sstTab或者Enter生成如下内容,并且鼠标广光标指向第二行,直接上手设置变量即可

this.setState({

});

如果还想把第一行的:,也叫上可以将sst的tempalte text 修改为

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

自动补全,生成如下代码

this.setState({
    : ,
});

具体配置如下: