在开发的时候，其实很多代码都是重复的。如 Vue 代码的模板、React Hook 函数。这些都是约定俗成的模板，反复敲其实是浪费时间。
我们可以使用代码块快速输入这些代码。具体可以用到 vscode 的 snippets 扩展，当然也可以自己定义一些代码库。
一些 vscode snippets 扩展
自定义代码块
代码块配置文件可以参考 antd snippets 的 snippets.json。
简单说下创建代码块步骤：
- vscode - 首选项 - 用户代码片段 （有的也叫 用户片段）
-
出现弹框，选择创建全局代码块或者选择某种语言配置代码。
- vscode 创建了一个 json 配置文件，编辑并保存配置文件。
{
"useEffect": {
"scope": "",
"prefix": "hookUseEffect",
"body": [
"useEffect(() => {\n\t$2\n}, [$1])",
],
"description": "快速创建 useEffect"
},
"useState": {
"scope": "",
"prefix": "hookUseState",
"body": [
"const [$2, $3] = useState($1)",
],
"description": "快速创建 useState"
}
}
-
保存配置文件后即可生效。
效果
配置文件简述
scope：作用文件类型。就是代码块的作用文件类型，这里我们可以指定文件类型，多种类型之间用逗号隔开，比如如果指定作用范围类型"css, javascript" 那么这个代码块只能在这两种类型的文件中起作用。如果值为空，或者是不写这个属性，默认所有类型文件都支持该代码块。
prefix：触发代码块的字符串。写代码的时候我们只需敲出这个字符串就会触发我们的代码块。
body：代码块的主体内容。我们需要把我们的代码书写在这个属性中。仔细观察我们可以看出，代码块主体就是字符串的数组。
description：代码块的简单介绍，我们可以介绍一下这段代码块是干什么用的
作者：听雨轩_dmg
链接：https://www.jianshu.com/p/b4f8ed1a59ad
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
最后
感觉这个技巧知道的有点晚了，之前写了好多重复代码。用好代码块能提升不少开发效率。
