vscode 配置自定义模板

230 阅读1分钟

前言

工作项目中的B端项目里,制作报表时代码重复性内容比较多,想做一个模板去一键生成代码。


解决方案

vscode中配置自定义模板


实现方法

1,打开vscode,在工具栏逐步点击【文件】【首选项】【配置用户代码片段】

2,点击【新建全局代码片段】

3,在输入框全局代码段文件名,如vueTable

4,输入组件模板代码


下面是图片流程

1, 配置用户代码片段.jpg

2,

2.jpg

3,

image.png

4,

image.png

特别注意


怎么快捷生成body中的内容?

默认在body中的格式编写是比较麻烦的,下面有一个快捷方法。

1,编写一个正常通用的vue模板

2,打开配置生成地址,把1中编写的模板复制到左侧 your snippet 里面

3,右侧就会生成配置模板,同时可以设置模板名称和快捷命令。

image.png


代码定义内各个属性的含义是什么?

scope:指定代码片段的使用范围,用逗号分隔多个语言(javascript、typescript等)。默认为空时,表示使用所有语言。

prefix:生成代码片段的快捷指令名称。在编辑器中输入该指令名称后,选择指令或者按下tab生成代码片段。

body:代码片段的内容,是一个数组。数组中的每个元素是要插入的代码行。1{1},{2}等是代码中的变量和占位符,它们插入代码时会被替换和聚焦。

description:代码片段的描述,一般用来解释代码的用途。