• 重复代码的克星,高效工具 VSCode snippets 的使用指南


    为什么要用 snippets(代码段)?

    不管你使用何种编程语言,在我们日常的编码工作中,都会存在有大量的重复代码编写,例如:

    • 日志打印: console.log,log.info('...')
    • 输出到控制台:System.out.println("...."), fmt.Println("...")
    • 循环:switch(...){},for(i := 0, i <= len, i++),for...i 等等

    这种模板代码在 java,go 中静态语言会比较多,实际上,平时除了 模板代码,还有很多模板文件,也是存在很多重复编码的工作,例如:vue文件,html文件,xml文件,里面的很多标签,方法,属性基本都是固定的,我平时遇到比较多的还是 java,go 里面的模板文件和代码,关于重复代码不胜枚举,这里就不过多概述了。

    写这些模板代码和模板文件,实际上除了练习你的打字速度外,不会给你带来任何技能上的提升,是属于 重复而且低价值的事情,比如就算你把 "hello world" 练习一千遍,你也不会成为高手一样,

    那么作为一个高效的程序员,要懂利用如何节省自己的时间,把有限的精力投资在高价值,高回报的事情上,对于这些无法逃避的重复的编码工作,我们需要用技术和工具来把他们解决就好,所以 VSCode 提供的 user snippets 用户代码段(在 jetbrains 家族中也称为 Live templates )就是用来做这个事情的

    怎么使用 snippets ?

    知道了为什么要用代码段,我们来说说 VSCode 中的 snippets 的具体作用

    熟悉 Jetbrains 家族产品的同学应该知道 Live Templates 功能非常好用,其实 VSCode snippets 就是类型 Jetbrains 的 Live Templates 功能,他们解决的是相同的问题。

    VSCode 官方对于 snippets 的描述如下:

    Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

    简单翻译就是:

    代码段是一种模板,可以更容易地输入重复的代码模式,例如循环或条件语句

    使用 snippeets 代码段对 javascript 中的 ajax 的重复代码进行封装,只需要输入关键字:ajax,就可以把整个代码段带出来,非常的高效,具体参见下面来自官方的示例:

    ajax snippet

    查看已有的 snippets

    其实 VSCode 对于每种语言都有默认初始化的 snippets,能够满足日常的使用,在 VSCode 打开命令行界面输入:insert snippets 即可查看当前可以用的 snippets,如图:

    JavaScript 内置的 snippets

    以上是在 JavaScript 语言环境下看到的 snippets (目前内置对 JavaScript 支持比较友好)

    当我切换到 golang 的时候,查看的 snippets 如下(未安装语言包的情况下):

    VSCode 初始化内置的 snipptes

    这么少的 snippets 肯定是不够用的,好在 VSCode 的丰富插件为我们提供了扩展的可能性,通常相关联的语言工具包都内置的大量常用的 snippets,我们通常只要安装即可。

    在 VSCode 的扩展使用:@category:snippets 过滤搜索安装对应的工具即可,如图:

    18gJTC

    安装语言包完成后,在 VSCode Command 页面输入:insert snippets 即可看到新增的大量的 snippets :

    J6Hz0r

    熟练使用语言包内置的 snippets 可以满足 80% 场景。

    但是可能还是无法满足和覆盖所有场景,

    这样场景下我们需要创建自己的 snippets 来完全解决代码重复的问题。

    创建你自己的 snippets

    在 VSCode 中创建 snippets 是非常简单的事情(无需安装任何扩展),有两种方法实现:

    1. 在 macOS 中选择:Code -> Preferencts -> User Snippets 选项
    2. 或者在 VSCode Command 中输入:configure user snippets 即可

    如果是创建 snipperts 选择 选择 New Global Snippets file ,输入你要创面的 snipperts name 即可进入配置

    snipperts 文件是 JSON 风格,刚创建后的默认格式内容如下:

    SpCk5J

    我简单描述的一下属性的作用:

    • scope:限定代码段的作用域,例如 go 语言的代码段不会出现在 js 中,反之亦然
    • prefix:是快捷关键字,当 VSCode 检测到代码中出现 prefix 关键字就会在编辑器中替换为 body 的内容
    • body:是重复的代码模板内容,通常是程序员想要自动化的一些重复,模板代码,录入在这里
    • description:顾名思义就是对这段 snippets 的具体描述

    这里值得再提一下的就是, body 里面的 $1 关键字是模板代码替换后鼠标光标的所在位置,当出现多个 $1$2 的时候,可以通过键盘 TAB 按键快速切换鼠标光标所在位置,用于提高效率,这块就不具体深入描述了,有兴趣的小伙伴可以自行去探索。

    关于 snipperts 配置文件的细节还有很多,这里就不深究了,

    有兴趣深入研究的伙伴可以 VSCode Snippets 官方的相关的文档,里面解释的非常详细。

    参考资料:

    • [Snippets in Visual Studio Code
  • 相关阅读:
    RocketMQ 概念
    CentOS7使用firewalld管理防火墙
    java应用启动报错Unable to access jarfile xxxxx.jar
    docker启动redis并设置密码
    sql优化整理(二)
    sql优化整理(一)
    dubbo配置的覆盖关系
    dubbo配置加载优先级
    ZooKeeper的数据模型
    leetcode104:permutations
  • 原文地址:https://www.cnblogs.com/xiao2shiqi/p/14466133.html
Copyright © 2020-2023  润新知