live-template

官网文档

这个功能在 webstorm 中叫做 live template 。就是将一段代码变成模版，就像打出 log 就会出现下来菜单提示 console.log 一样。 live template 可以实现复杂一点的事情，比如在模版内部定义变量，可以在初始时快速编辑它们。

1. 首先准备好一段代码，下面是创建一个 React 组件，我们要把它变成一个模版，以后可以快速的创建组件。

1
2
3
4
5
6
7
8
9

import React from 'react';

export default function Keyword() {
  return (
    <div>

    </div>
  )
}

2. 将代码全选后，打开 actions 面板^[1]，输入 save as live template ，就可以打开一个操作面板了。 ◎ save as live template

• 1 在 user 目录下出现了一个新的条目，它就是刚刚那段代码
• 2 唤醒模板的关键词，比如 log
• 3 可以在模板中设置变量。在代码中定义变量，在按钮中给变量设置值，比如文件名、不带扩展名的文件名等等。
• 4 多个变量之间可以用 tab 快速切换光标到下一个， $END$ 代表最后一个

3. 点击 ok 保存设置
4. 尝试一下吧，可以把刚才的代码删掉，输入 imfc 看看效果。

例子

打开设置，选择Editor > Live Templates，点右侧 + ，选 1

1

const [$NAME$, set$SETNAME$] = useState($END$)

变量间可以互相引用，可以通过表达式进行一些自动变化，如果通过表达式计算出了值，还可以跳过用户输入。

变量

camelCase 将所有字母变为驼峰，会忽略掉其中的 - _ 等符号，只保留字母

fileNameWithoutExtension 取文件名，且不带扩展名

capitalize 将首字母大写