在开发的时候，其实很多代码都是重复的。如 Vue 代码的模板、React Hook 函数。这些都是约定俗成的模板，反复敲其实是浪费时间。
我们可以使用代码块快速输入这些代码。具体可以用到 vscode 的 snippets 扩展，当然也可以自己定义一些代码库。

一些 vscode snippets 扩展

• vuter 的 Snippet
• Element-UI-Snippets-VSCode
• antd-snippets

自定义代码块

代码块配置文件可以参考 antd snippets 的 snippets.json。

简单说下创建代码块步骤：

1. vscode - 首选项 - 用户代码片段 （有的也叫 用户片段）

2. 出现弹框，选择创建全局代码块或者选择某种语言配置代码。

   
   
3. 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"
    }
}

4. 保存配置文件后即可生效。

   
   效果

配置文件简述

scope：作用文件类型。就是代码块的作用文件类型，这里我们可以指定文件类型，多种类型之间用逗号隔开，比如如果指定作用范围类型"css, javascript" 那么这个代码块只能在这两种类型的文件中起作用。如果值为空，或者是不写这个属性，默认所有类型文件都支持该代码块。
prefix：触发代码块的字符串。写代码的时候我们只需敲出这个字符串就会触发我们的代码块。
body：代码块的主体内容。我们需要把我们的代码书写在这个属性中。仔细观察我们可以看出，代码块主体就是字符串的数组。
description：代码块的简单介绍，我们可以介绍一下这段代码块是干什么用的

作者：听雨轩_dmg
链接：https://www.jianshu.com/p/b4f8ed1a59ad
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

最后

感觉这个技巧知道的有点晚了，之前写了好多重复代码。用好代码块能提升不少开发效率。