这个功能在 webstorm 中叫做 live template 。就是将一段代码变成模版,就像打出 log
就会出现下来菜单提示 console.log
一样。 live template 可以实现复杂一点的事情,比如在模版内部定义变量,可以在初始时快速编辑它们。
- 首先准备好一段代码,下面是创建一个 React 组件,我们要把它变成一个模版,以后可以快速的创建组件。
|
|
- 将代码全选后,打开 actions 面板[1],输入
save as live template
,就可以打开一个操作面板了。◎ save as live template
- 1 在 user 目录下出现了一个新的条目,它就是刚刚那段代码
- 2 唤醒模板的关键词,比如
log
- 3 可以在模板中设置变量。在代码中定义变量,在按钮中给变量设置值,比如文件名、不带扩展名的文件名等等。
- 4 多个变量之间可以用
tab
快速切换光标到下一个,$END$
代表最后一个
- 点击 ok 保存设置
- 尝试一下吧,可以把刚才的代码删掉,输入
imfc
看看效果。
例子
打开设置,选择Editor > Live Templates,点右侧 + ,选 1
|
|
变量间可以互相引用,可以通过表达式进行一些自动变化,如果通过表达式计算出了值,还可以跳过用户输入。
变量
camelCase 将所有字母变为驼峰,会忽略掉其中的 - _ 等符号,只保留字母
fileNameWithoutExtension 取文件名,且不带扩展名
capitalize 将首字母大写