一个案例学会 VSCode Snippets,极大行进开发效劳

你的位置:【开元棋盘1383官方网站】 > 生产技术 > 一个案例学会 VSCode Snippets,极大行进开发效劳
一个案例学会 VSCode Snippets,极大行进开发效劳
发布日期:2022-08-07 12:43    点击次数:157

snippets 是片段的意义,VSCode 支持自定义 snippets,写代码的岁月可以或许基于它倏地实现一段代码的编写。

不可是 VSCode,根抵全体的主流编辑器都支持 snipeets。

一个功用被这么多编辑器都支持,那必然是颇有效的,然则这功用大大都人都没用起来。

我从前写过一篇 snippets 的文章,讲了 snippets 支持的种种语法和设置要领,然则并无效这些来做一个着实的案例。

所以,这篇文章就来讲一个着实的 snippets,根抵用到了全体的 snippets 语法。能独立把它写进去,就能说 snippets 已经独霸了。

我们照旧先追念下 VSCode 的 snippets 语法

snippets 根抵

snippets 是这样的 json 名目:

{     "alpha": {         "prefix": ["a", "z"],         "body": [             "abcdefghijklmnopqrstuvwxyz"         ],         "description": "字母",         "scope": "javascript"     } } 
prefix 是触发的前缀,可以或许指定多个 body 是拔出到编辑器中的内容,支持良多语法 description 是形貌 scope 是生效的言语,不指定的话就是全体言语都生效

body 部份就是待拔出的代码,支持良多语法,也是一种 DSL(规模特定言语)。

支持经由过程一、2 指定光标职位地方:

"$1  xxxx", "yyyy $2" 

可以或许多光标同时编辑:

"$1  xxxx $1" 

可以或许加之 placeholader,也可以做默认值:

"${1:aaa}  xxxx", "yyyy ${2:bbb}" 

可以或许供应多个值来抉择:

"${1|卡颂,神光,yck|}最帅"             

还供应了一些变量可以或许取:

"今后文件: $TM_FILENAME", "今后日期: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE" 

而且还能对变量做正则替代:

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

根抵语法过了一遍,巨匠晓得支持啥就行,后面我们来做个着实的案例,把这些用一遍就会了。

经由过程 co妹妹and + shift + p,输入 snippets 尔后抉择一种规模:

snippets 有 project、global、language 3 种生效规模。我集团写 global 级其它相比多,名目和言语级其它也可以。

根抵过完了,接上去我们就来写一个 snippets 吧。

实战案例

我比来在做 vue 的名目,写 router-link 相比多,所以封装了个 router-link 代码的 snippets。

我们先写个最俭朴的版本:

{     "routerLink": {         "prefix": "link",         "body": [             "<router-link to={ name:'xxx', params: {id: 1} } target='_blank'>link</router-link>"         ],         "description": "router-link 跳转"     } } 

这个没啥好说的,就是痛处前缀补全内容:

尔后在 name、id、链接文字处加三个光标,也就是一、二、$3:

{     "routerLink": {         "prefix": "link",         "body": [             "<router-link to={ name: $1, params: {id: $2} } target='_blank'>$3</router-link>"         ],         "description": "router-link 跳转"     } } 

可以或许按 tab 键倏地编辑个中变换的部份:

尔后加之 placeholder:

{     "routerLink": {         "prefix": "link",         "body": [             "<router-link to={ name: '${1:RouteName}', params: {id: ${2:id}} } target='_blank'>${3:link}</router-link>"         ],         "description": "router-link 跳转"     } } 

着实 target 部份也是可选的,这里我们用多选来做:

选项有两个,就是 target="_blank" 或许空格。

${3| ,生产技术target=\"_blank\"|} 

所以 snippets 就变成为了这样:

{     "routerLink": {         "prefix": "link",         "body": [             "<router-link to={ name: '${1:RouteName}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"         ],         "description": "router-link 跳转"     } } 

跳转地点大大都是和今后文件名无关,比喻 XxxYyyZzzList 跳转 XxxYyyZzzDetail 的相比多。

所以我们默认值取今后文件名,用 TM_FILENAME 变量(全体可用变量可以或许在 vscode 官网查):

${1:$TM_FILENAME} 

今朝的 snippets:

{     "routerLink": {         "prefix": "link",         "body": [             "<router-link to={ name: '${1:$TM_FILENAME}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"         ],         "description": "router-link 跳转"     } } 

结果是这样:

确凿把文件名填上去了,然则还要手动改,能不克不迭填上去的就是改了今后的呢?

可以或许,变量支持做 transform,也就是正则替代:

XxxList.vue 要取出 Xxx 来,尔后拼上 Detail,这样的正则不难写:

用 js 写是这样的:

'XxxList.vue'.replace(/(.*)List\.vue/,'$1Detail') 

在 snippets 里也差不多,只不过用 / 分开断绝分散:

${TM_FILENAME/(.*)List\\.vue/$1Detail/i 

所以 snippets 就变成为了这样:

{     "routerLink": {         "prefix": "link",         "body": [             "<router-link to={ name: '${1:${TM_FILENAME/(.*)List\\.vue/$1Detail/i}}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"         ],         "description": "router-link 跳转"     } } 

填入的代码都是替代好了的:

链接的内容我们停留用选中的内容,这个也有变量,就是 TM_SELECTED_TEXT。

最后,我们停留 router-link 这个标签也可以变,而且改的岁月开闭标签可以或许一起改。

这个要用多光标编辑,指定多个 $x 为同一个数字就行。

<${5:router-link}></${5:router-link}> 

结果就是这样的:

这就是终究的 snippets,全体 snippets 语法都用了一遍。

完备 snippets 以下,巨匠可以或许在 VSCode 里用用看,用起来休会照旧很爽的:

{     "routerLink": {         "prefix": "link",         "body": [             "<${5:router-link} to={ name: '${1:${TM_FILENAME/(.*)List\\.vue/$1Detail/i}}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:$TM_SELECTED_TEXT}</${5:router-link}>"         ],         "description": "router-link 跳转"     } } 
总结

根抵全体主流编辑器都支持 snippets,也就是设置代码片段来行进开发效劳,VSCode 也不例外,这是一个颇有效的功用。

VSCode snippets 支持 global、project、language 3 种生效规模。我集团用全局的相比多。

它也算是一种 DSL 了,支持良多语法,比喻指定光标职位地方、多光标编辑、placeholder、多选值、变量、对变量做转换等语法。

指定光标职位地方:$x 多光标编辑:$x $x 指定 placeholder 文本:${x:placeholder} 指定多选值:${x|aaa,bbb,ccc|} 取变量:$VariableName 对变量做转换:${VariableName/正则/替代的文本/i}

我们写了一个 router-link 的 snippets,综合使用了这些语法,过一遍就会了。

能自身定义得当自身的 snippets,关于行进开发效劳是颇有协助的。假定没写过,没关系夙来日诰日起头试一下吧。