GitLab

通过配置项目内的代码片段，生成模板代码

目的

• 减少重复代码，如 cl => console.log()，isarr => Array.isArray
• 提供基础模板代码，如 vue 基础模板，table 基础模板，表单基础模板，弹窗表单基础模板，entry 基础模板等
• 统一代码规范
• 防止手动从0开始编译代码，引起的基本功能的遗漏，比如 列表接收路由参数

配置

全局配置

打开VSCODE编辑器，依次选择“文件 -> 首选项 -> 用户代码片段”，选择对应语言范围，回车后进行编辑

项目配置

在项目根目录的 .vscode 文件夹内，创建 以 .code-snippets 为后缀的文件，基础格式如下

{
	"快速创建代码片段": {
		"scope": "",
		"prefix": "create snippets",
		"description": "快速创建代码片段",
		"body": [
			"\"代码片段名称\": {",
			"  \"scope\": \"\",",
			"  \"prefix\": \"触发片段的名称\",",
			"  \"description\": \"快速创建代码片段\",",
			"  \"body\": [",
			"    \"console.log('\\$0');\", // 设置光标位置",
			"    \"console.log('\\$(1:xxx)');\", // 设置默认值",
			"    \"console.log('\\${2|1,2,3,4|}');\", // 设置默认可选项",
			"    \"\\$3\"",
			"  ],",
			"}",
		],
	},
	"判断是否为数组": {
		"prefix": "isarr",
		"description": "判断是否为数组",
		"body": [
			"Array.isArray($1)"
		],
	},
}

字段说明

• Print to console 代码片段名称
• scope 使用的语言范围
• prefix 触发当前的 snippt 片段
• body 代码片段的具体内容
• description 代码片段的描述

技巧

• $0 表示你希望生成代码后光标的位置
• prefix 表示生成对应预设代码的命令
• 设置默认可选项，注意需要从 1 开始 "console.log('${1|1,2,3,4|}');",
• 设置默认值 "console.log('${1:xxx}');",

注意点

防止转译

• 双引号需要加斜杠 \"
• $ 需要将两个斜杠 \\$

使用

以快速创建 判断是否为数组 代码为例

打开项目内任意页面，输入 isarr

回车后生成代码

Array.isArray()