WebStrom中可以定义快捷键直接生成代码模板，React16后，由于hooks的加入，新的项目逐步更改为全函数组件的方式，采用hooks进行状态管理，针对此情况，做了个WebStorm的函数组件模板。记录如下：
打开："File"-"Settime"-"Editor"
配置界面
1 打开Live Templates，选中"JavaScript"，新建一个代码模板，并定义快捷键。
Live Templates
设置快捷键
2 还是这个窗口，在下面的Template text中，编写模板代码：
import React, { useEffect, useState } from 'react'
export const $fileName$ = (props) => {
/**state state部分**/
/**effect effect部分**/
/**methods 方法部分**/
/**styles 样式部分**/
/**render**/
return(
<div>
</div>
);
};
3 关于文件名，定义了一个变量fileName，然后到右边点击"EDIT VARIABLES"，在弹窗中可以定义变量的表达式。表达式的含义可参考如下链接：
https://www.jetbrains.com/help/webstorm/edit-template-variables-dialog.html
编辑模板内容
4 注意左下角会显示"No Applicable contexts"，要设置一下应用场景，比如选择js文件。
未配置应用场景的告警
选择js文件
