Webstorm react hooks 模板配置

在React hooks的开发中，经常需要使用到各种的hooks。比如

const [user, setUser] = useState();

这里就得用到Webstorm的动态模版（Live templates）的功能了。

打开设置页面：

image.png

进入这个功能的设置，就可以开始配置了。

想useState这个，主要是有一个问题，如何让setUser变成set后面的字母大写，也就是user的首字母大写。

经过查看文档可以看到，Live templates提供了一个Live template variables的功能。

方法	说明
capitalize(<String>)	将字符串的第一个字母大写。例如，大写("name")返回Name。或者你可以把它合并成大写(camelCase(“my awesome class”))来得到MyAwesomeClass。

其他方法可以查看：

https://www.jetbrains.com/help/webstorm/template-variables.html#predefined_functions

首先输入模版

const [$a$,set$b$] = useState($end$)

这样的话，就可以愉快的设置大写字母开头了。

image.png

这里面的a就是第一个输入的，相当于 user这个。

点击ok保存就好了。其他的模版可以参考：

 useEffect(() => {
   $1$
   return () => {
     $2$
   }
 }, [$3$])

import React from 'react'

interface IProps {}

/**
 * 说明：$1$
 * 创建人：$USER$
 * 创建时间：$DATE$
*/
const $TM_FILENAME_BASE$: React.FC<props: IProps>=()=> {
  return (
    <div>
      $END$
    </div>
  )
}
export default $TM_FILENAME_BASE$

后面就可以自由发挥了。