WebStorm中定义React函数组件模板

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(
        

            
        
    );
};

3 关于文件名，定义了一个变量fileName，然后到右边点击"EDIT VARIABLES"，在弹窗中可以定义变量的表达式。表达式的含义可参考如下链接：

https://www.jetbrains.com/help/webstorm/edit-template-variables-dialog.html

编辑模板内容

4 注意左下角会显示"No Applicable contexts"，要设置一下应用场景，比如选择js文件。

未配置应用场景的告警

选择js文件

5 这样，在写代码的时候输入快捷键，就可以直接插入设定好的模板代码了。