使用vscode创建snippets开发效率飞起

84 阅读1分钟

在开发管理系统时会有大量的 重复的表单代码 之前我都是使用cv大法 最近我发现了一个“高端操作”,让这个动作优雅又潇洒

创建可复用的代码片段,可全局创建,或根据项目创建

1.打开vscode file->preference->configure user snippets 会出来以下界面,可选择全局创建,或根据项目创建

1658455793(1).jpg

2.我是针对某一项目进行创建 在该项目的根目录下会自动创建一个.vscode文件

1658455934(1).jpg

3.在.code-snippets里配置你想要一键创建的代码 以下代码已足够生成代码片段,其他配置我还未使用

{
   "prefix": "defaultForm", //可根据创建的代码自定义代码片段的名称
   body:[
       "<template>",
       "<div class='search'>", 
   ], //存放的是具体的代码片段,区分单引号和双引号
   "description": "default form"  //对代码段的描述 
}

4.在改项目的页面中输入,我创建的代码片段名称defaultForm 会出现代码片段提示,回车就会把代码片段输入在页面上 so easy