使用 VSCode 代码块提高开发效率

2021-02-11  本文已影响0人  VioletJack

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

一些 vscode 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"
    }
}
  1. 保存配置文件后即可生效。


    效果

配置文件简述

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

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

最后

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

上一篇下一篇

猜你喜欢

热点阅读