利用 Vscode snippets 和项目成员一起提高开发效率

开发 前端
vscode 的 snippets 是可以随项目共享的,多人开发一个项目的时候,可以维护项目级别的 snippets 并且通过 git 共享,来提高项目开发效率。

[[422869]]

code snippets 是代码片段的意思,是 vscode 提供的根据某字符串快速补全一段代码的功能,可以提高写代码的效率。

图片

vscode 的 snippets 是可以随项目共享的,多人开发一个项目的时候,可以维护项目级别的 snippets 并且通过 git 共享,来提高项目开发效率。

下面我们来详细了解下 snippets。

snippets 的功能

snippets 配置的格式如下:

  1.   "For Loop": { 
  2.     "prefix": ["for""for-const"], 
  3.     "body": ["for (const ${2:element} of ${1:array}) {""\t$0""}"], 
  4.     "description""A for loop." 
  5.   } 
  • prefix 是触发 snippets 的前缀,可以通过数组指定多个
  • body 是填入到编辑器的内容
  • description 是 snippets 的描述

其中 body 部分可以通过 ${} 的方式指定光标位置、顺序、占位字符串、可用的值等,有 5 种语法,我们分别来看一下:

光标跳转:$1 $2

可以通过 $1、$2 指定光标位置,当填入 snippets 的内容之后,光标会设置到 $1 的位置来编辑,当编辑完,可以通过 tab 来跳到 $2。

比如这段配置:

  1.  "测试": { 
  2.   "scope""javascript,typescript"
  3.   "prefix""test"
  4.   "body": [ 
  5.    "$1  xxxx"
  6.    "yyyy $2"
  7.   ], 
  8.   "description""光标跳转" 
  9.  } 

效果为:

图片

还有当有多个 $1、$2 等,编辑一处其他内容也会同步修改,也就是 vscode 的多光标编辑。

比如:

  1.  "测试": { 
  2.   "scope""javascript,typescript"
  3.   "prefix""test"
  4.   "body": [ 
  5.    "$1  xxxx $1"
  6.   ], 
  7.   "description""多光标" 
  8.  } 

效果为:

通过这种功能可以快速编辑 snippets 中的可编辑内容。

占位符:${1: placeholder}

只是光标跳转虽然可以快速编辑内容,但是不知道编辑的部分是什么,所以 snippets 支持了设置 placeholder 的值,默认会选中该段文本,输入内容即可覆盖。

比如:

  1.  "测试": { 
  2.   "scope""javascript,typescript"
  3.   "prefix""test"
  4.   "body": [ 
  5.    "${1:aaa}  xxxx"
  6.    "yyyy ${2:bbb}"
  7.   ], 
  8.   "description""光标跳转" 
  9.  } 

效果为:

可选值:${1|text1,text2,text3|}

占位符的方式就像 input 标签加了个 placeholder 属性,还是要手动输入,当可编辑区域是有几个可选的值的话,就要换成下拉选择,在 snippets 里就是通过:

${1|text1,text2,text3|} 的方式支持,在 | 和 | 之间填入通过 , 分割的多个选项。

比如:

  1.  "测试": { 
  2.   "scope""javascript,typescript"
  3.   "prefix""test"
  4.   "body": [ 
  5.   "${1|神说要有光,卡颂|}" 
  6.   ], 
  7.   "description""可选值" 
  8.  } 

效果为:

变量:$变量名

在模版可编辑位置填入内容的时候,有的时候需要用到选中的值、剪贴板的值、文件名、日期等,这些信息通过 snippets 中支持的变量来取。

比如:

  • TM_FILENAME: 文件名
  • TM_CURRENT_LINE: 当前行的内容
  • CLIPBOARD: 剪贴板内容
  • WORKSPACE_NAME:workspace 的名字
  • WORKSPACE_PATH:workspace 的路径
  • CURRENT_YEAR:当前年
  • CURRENT_MONTH:当前月
  • CURRENT_DATE:当前日
  • RANDOM: 随机数
  • RANDOM_HEX: 6 位随机 16 进制数
  • UUID: 唯一 id

可以取这些变量的值来填入到光标位置,方式就是使用 $TM_FILENAME、$CURRENT_YEAR 的方式。

比如:

  1.  "测试": { 
  2.   "scope""javascript,typescript"
  3.   "prefix""test"
  4.   "body": [ 
  5.   "当前文件: $TM_FILENAME"
  6.   "当前日期: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE" 
  7.   ], 
  8.   "description""变量" 
  9.  } 

效果为:

变量转换:${变量名/匹配的正则/替换到的字符串/匹配模式}

支持了变量的填入还不行,因为有的变量的内容不合适,需要做一些字符串替换,所以 snippets 只吃了 transform 的功能。

比如 abc-123.js 的文件,

我们通过 $TM_FILENAME 取到文件名,然后把后缀去掉转成大写填入

  1. ${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i} 

对文件名 TM_FILENAME 做正则匹配 (.*).[a-z]+,把分组一变成大写之后返回,匹配模式为忽略大小写(ignore)。

  1.     "填入文件名": { 
  2.             "scope""javascript,typescript"
  3.             "prefix""filename"
  4.             "body": [ 
  5.                     "${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}" 
  6.             ], 
  7.             "description""文件名" 
  8.     } 

我们实验下效果:

图片

可以看到,正确的取到了文件名,并且去掉后缀转成大写填入了。

知道了 snippets 的功能,那么怎么设置 snippets 呢?snippets 在什么范围内生效呢?

snippets 的范围

command + shift + p 打开命令面板,输入 snippet,选择 configure user snippets:

可以选择创建全局的、项目范围的、语言范围的 snippets:

分别会打开不同位置的文件来添加 snippets。

语言级别的 snippets 是对于特定语言才生效,这个还可以封装成插件。在插件的 package.json 中配置下即可:

  1.   "contributes": { 
  2.     "snippets": [ 
  3.       { 
  4.         "language""javascript"
  5.         "path""./snippets.json" 
  6.       } 
  7.     ] 
  8.   } 

项目范围的 snippets 是在项目根目录的 .vscode/xxx.code-snippets 下面添加的,vscode 启动的时候会读取这些文件,然后使之在项目范围内生效。

当有一些项目级别的代码片段可以共享的时候,完全把这个文件提交到远程 git 仓库,然后项目成员都可以共享这些 snippets 设置。对于一些模版代码比较多的项目,还是比较有意义的。

总结

snippets 是 vscode 提供的用于提高开发效率的一些快速输入代码片段的功能,支持光标位置的跳转、多光标同时编辑、占位符、可选值、变量、变量转换等功能,灵活运用这些功能,可以作出易用的提高开发效率的 snippets。

snippets 有 global、language、project 3 种生效范围:global 是全局的设置;language 是语言级别的设置,可以进一步封装成插件共享;project 则是项目范围内的,在 .vscode 下的 xx.code-snippets 中,完全可以提交到 git 仓库,和其他成员共享。

灵活运用 snippets 功能,是可以提高开发效率的,而且这个也是可以项目级别共享的。希望这篇文章能够帮大家了解 snippets。

【编辑推荐】

 

责任编辑:姜华 来源: 神光的编程秘籍
相关推荐

2022-01-13 22:37:26

VSCode代码 编辑器

2021-02-23 09:21:29

代码效率C++

2021-11-04 06:58:31

CSS性能设备

2010-11-15 16:46:49

Oracle查询效率

2015-07-20 10:54:47

IOS提高效率工具

2021-07-17 06:48:09

AI人工智能

2021-07-18 07:45:04

物联网资产IOT

2009-11-06 08:57:31

WCF开发

2021-02-07 09:26:55

机器学习建筑能源ML

2023-11-22 08:26:03

HutoolJava工具集

2021-11-16 19:18:23

数字化

2010-08-26 12:55:01

丁磊

2023-12-28 09:55:08

队列数据结构存储

2024-02-02 09:21:57

API性能策略

2020-11-04 07:32:01

AI技术

2013-09-18 10:25:52

Google Glas谷歌眼镜

2013-08-06 09:49:01

2010-04-01 14:51:52

Visual Stud

2009-06-19 15:11:34

DWR和Spring

2023-05-31 08:42:02

管理产品技术项目
点赞
收藏

51CTO技术栈公众号