React中的Hooks已经🔥的不得了，但是在大家写React Hooks的时候有没有感觉到他的value + setValue的写法写起来很麻烦，很相似但是又很不一样，经常性需要value复制一遍到set后面，然后手动把首字母改成大写🤪，写多了简直1w个🐑，当然如果state很多确实也可以用useReducer这种替换，但是我们接下来要讲的技巧其实不冲突，我们通过WebStorm里的Live Template自定义模板加入变量的功能可以大大提升每次写useState等hooks的速度。
TIP: VSCode也有类似叫做snippets的功能，但是我不确定有没有template里加入自定义变量的功能，有兴趣的可以去试试，我们这里以WS作为例子。
Live Template 基本介绍
首先WebStorm Live Template自带了很多代码模板，我们可以通过下图看下，几乎包括了前端各个技术栈的模板，通过这些模板及对应的关键字可以在编码时快速生成代码块:
上图可以看到IDE默认已经提供了很多的模板供我们使用，但是总是会有一些地方我们想自定义的时候，所以WebStorm也提供了添加自定义模板的功能。
自定义生成useState代码模板
我们这里就通过创建自定义模板来提升我们写hooks的效率，通过点击右上角+号，开始创建，这里我们新建一个usehook的模板（名字可以随便取），输入一个大致完整的代码块，在中间的任意地方可以添加变量，每个变量可以提供函数的操作，我们这里其实就是想把value通过函数自动把首字母大写：
我们主要通过Edit Variables里设置SET_STATE变量为一个表达式来capitalize首字母，建完后我们看看下面的效果，直接在function组件里开始输入useho..., 然后提示就出来了，选择后按Tab，生成代码，光标会停留在第一个变量出，一边输入时，set后面的名字会跟着变自动换成首字母大写，名字确定后再按Tab会跳到INITIAL_STATE默认值的地方，输入默认值后按Tab后整段语句就结束了，光标跳到行最后面：
看起来是不是感觉舒服多了，🤶再也不用当心我每次手动改发脾气了😂。
假如你经常写一些默认为[]数组的state, 你也可以直接专门搞一个生成默认数组的模板，直接可以把上面的模拟最后一个变量写死改成[]就行了：
以上就是通过Live Template生产了一个快速写useState代码的模板，当然我们完全不局限于useState，任何hook, 只要你觉得哪里用起来不爽，就可以想办法用模板来减少你的手写输入，让工具来帮你做更多的重复的事情。😇
