# 高级开发技巧-自定义代码片段

本帮助文档主要说明主流编辑器,IDEA编辑器和VSCode编辑器,如何通过自定义代码片段管理实现类似“命令汇总”、“代码缩写”等功能。

开发中我们经常会遇到如下场景和需求:

  • 自定义代码:插件内置的代码片段不可能满足所有开发人员的需求,此时需要自定义代码片段;
  • 命令汇总: 当你对代码没有任何印象时,输入汇总命令,可以查看所有的内置辅助代码;
  • 代码缩写:对于系统内置或自定义代码片段,当我们进行编码时只输入关键的字符,或印象中的代码,编辑器自动给出提示。

以上这些功能都是通过编辑器的“自定义代码片段”功能实现的,善用自定义代码片段功能可以有效的提高开发效率,如Java常见的System.out.println()语句可以通过sout缩写来快速输入。

现代主流编辑器,已经对主流编程语言Java、Javascript等已经提供了强大的代码提示和代码片段管理功能,不用再开发插件实现自定义代码的管理和提示。

# 代码片段管理介绍

代码片段管理是指编辑器能够帮助用户有效地组织、存储、重复使用和共享代码片段的一套工具。代码片段是一小段可以重复使用的代码,它可能是一个函数、一个循环结构、一段特定的样式规则或者是一些配置代码等。

主要功能特点

  1. 存储与分类

    • 编辑器允许用户将代码片段存储在一个集中的地方。这些存储位置通常具有良好的组织结构,用户可以根据自己的需要创建文件夹或者标签来分类代码片段。
    • 编辑器还支持对代码片段添加详细的描述。比如,对于一个复杂的排序算法代码片段,用户可以添加其算法的时间复杂度、适用场景、输入输出说明等信息,方便日后自己或者其他开发者理解和使用。
  2. 插入与复用

    • 方便的插入功能是代码片段管理的核心优势之一。在编写代码过程中,用户可以通过简单的快捷键、菜单选项或者代码自动补全机制来插入已存储的代码片段。
    • 这一功能大大提高了编码效率,减少了重复编写相同代码的工作量。特别是对于一些复杂的、不易记忆的代码结构,如正则表达式模式或者复杂的数据库查询语句,复用代码片段尤为重要。

代码片段管理功能能够极大地提升编码的效率和质量,是开发者在使用编辑器时值得关注的一个重要功能。

# 代码片段管理

# IDEA编辑器

IDEA编辑器代码片段管理功能通过其“实时模板功能”实现,以下是详细使用介绍。

实时模板功能可以新增、修改、删除自定义代码片段。

操作步骤:

  1. 打开 IntelliJ IDEA,依次点击 文件 -> 设置。
  2. 在设置窗口中,找到 编辑器 ->实时模板;
  3. 实时模板是分组管理的,选择现有的组,例如 Java,或者创建一个新的组;
  4. 新增、修改、删除自定义代码片段。

img.png

在编写对应语言的程序时,输入实时模板缩写可以提示匹配的模板,按TAB键可以自动生成对应的模板代码。

img.png

# VSCode编辑器

VSCode编辑器的代码片段管理功能是通过其“用户代码片段功能”实现,以下是详细使用介绍。

用户代码片段功能可以修改、新增、删除自定义代码片段。

操作步骤:

  1. 打开 VSCode,点击左侧菜单栏最下方的齿轮图标,选择"用户代码片段";
  2. 在弹出的输入框中,可以选择为全局(Global Snippets)创建代码片段,这样该代码片段适用于所有项目;
  3. 选择为特定语言(如 java.json、javascript.json 等)创建代码片段,仅在对应语言的文件中生效。

img.png

一个javascript语言代码片段示例:

img.png

提示效果(按Tab键生成模板代码):

img.png

# 命令汇总实现方案

命令汇总的主要需求场景是快速查看所有自定义代码片段,这可以通过规范代码片段缩写前缀来实现。

# IDEA编辑器

实现方法如下:

  1. 以固定前缀定义通用代码片段,如“hostpl-”,具体操作参考代码片段管理:VSCode编辑器

最终实现效果如下:

img.png

# VSCode编辑器

实现方法如下:

  1. 以固定前缀定义通用代码片段,如“hostpl-”,代码片段管理:VSCode编辑器;;

最终实现效果如下:

img.png

# 配置发布方案

对于编辑器间如何共享代码片段配置,可以通过如下方式实现:

  • VSCode编辑器:将对应配置的json文件发布到代码仓库,开发下载到本地,然后在对应编程语言配置文件中添加代码片段。
  • IDEA编辑器:用IDEA导出设置功能“文件->管理IDE设置->导出设置”导出实时模板配置发布到代码仓库,开发下载到本地,通过“文件->管理IDE设置->导入设置”功能导入实时模板配置。

IDEA编辑器导出设置界面:

img.png